基于Threejs的360全景图预览

2024-06-20 23:18
文章标签 预览 360 threejs 全景图

本文主要是介绍基于Threejs的360全景图预览,希望对大家解决编程问题提供一定的参考价值,需要的开发者们随着小编来一起学习吧!

先,我们先来了解一下Photo Sphere Viewer,它是一款基于Three.js的360X180度全景图预览js插件。该js插件可以360度旋转查看全景图,也可以上下180度查看图片。使用该插件的唯一要求是浏览器支持canvas或WebGL。


Photo Sphere Viewer是纯JS,并且基于Three.js,允许在支持HTML Canvas的其他系统上支持WebGL系统(最新浏览器)以及相当不错的表现。
它也可以与触摸屏一起工作!


360全景就是视角超过人的正常视角的图像,而这里我们所说的全景特指水平视角360度,垂直视角180度的图像。全景实际上只是一种对周围景象以某种几何关系进行映射生成的平面图片。


球面全景图(原理)

利用一张全景图围成一个球,自身位置位于球体内。由于图片是矩形,所以最上和最下的缝合处很明显就能够看得出来。
球面全景图是最接近人眼的构建模式,若利用多个立面构建,拼接方法繁琐,性能消耗高


1、使用该全景图插件时要引入three.min.js和photo-sphere-viewer.min.js文件。

下载Three              下载photo-sphere-viewer.js


2、创建一个空的div来放置全景图



3、初始化插件(很重要)

创建一个新的PhotoSphereViewer对象,然后在这个对象中插入一个参数对象,有两个参数是必须设置

(panorama和container




下面是它的参数列表:

panorama:必填参数,全景图的路径。
container:必填参数,放置全景图的div元素。
autoload:可选,默认值为true,true为自动调用全景图,false为在后面加载全景图(通过.load()方法)。
usexmpdata:可选,默认值为true,如果Photo Sphere Viewer必须读入XMP数据则为true。
default_position:可选,默认值为{},定义默认的位置,及用户看见的第一个点,例如:{long: Math.PI, lat: Math.PI/2}。
min_fov:可选,默认值为30,观察的最小区域,单位degrees,在1-179之间。
max_fov:可选,默认值为90,观察的最大区域,单位degrees,在1-179之间。
allow_user_interactions:可选,默认值为true,设置为false则禁止用户和全景图交互(导航条不可用)。
tilt_up_max:可选,默认值为Math.PI/2,向上倾斜的最大角度,单位radians。
tilt_down_max:可选,默认值为Math.PI/2,向下倾斜的最大角度,单位radians。
zoom_level:可选,默认值为0,默认的缩放级别,值在0-100之间。
long_offset:可选,默认值为PI/360,mouse/touch移动时每像素经过的经度值。
lat_offset:可选,默认值为PI/180,mouse/touch移动时每像素经过的纬度值。
time_anim:可选,默认值为2000,全景图在time_anim毫秒后会自动进行动画。(设置为false禁用它)
theta_offset:过时的选项,可选,默认值为1440,自动动画时水平方向的速度。
anim_speed:可选,默认值为2rpm,动画的速度,每秒/分钟多少radians/degrees/revolutions。
navbar:可选值,默认为false。显示导航条。
navbar_style:可选值,默认为{}。导航条的自定义样式。下面是可用的样式列表:
backgroundColor:导航条的背景颜色,默认值为rgba(61, 61, 61, 0.5)。
buttonsColor:按钮的前景颜色,默认值为transparent。
activeButtonsBackgroundColor:按钮激活状态的背景颜色,默认值为rgba(255, 255, 255, 0.1)。
buttonsHeight:按钮的高度,单位像素,默认值为20。
autorotateThickness:autorotate图标的厚度,单位像素,默认值为1。
zoomRangeWidth:缩放的范围,单位显示,默认值50。
zoomRangeThickness:缩放的范围的厚度,单位像素,默认值1。
zoomRangeDisk:缩放范围的圆盘直径,单位像素,默认值为7。
fullscreenRatio:全屏图标的比例,默认值为3/4。
fullscreenThickness:全屏图标的厚度,单位像素,默认值为2。
loading_msg:可选,默认值为Loading…,图片加载时的提示文字。
loading_img:可选,默认值为null,在加载时显示的图片的路径。
size:可选,默认值null,全景图容器的最终尺寸。例如:{width: 500, height: 300}。
onready:可选值,默认值为null。当全景图准备就绪并且第一张图片显示时的回调函数。

方法介绍

addAction():添加事件(插件没有提供执行事件的方法,似乎是提供给插件内部使用的)。
fitToContainer():调整全景图容器大小为指定大小。
getPosition():获取坐标经纬度。
getPositionInDegrees():获取经纬度度数。
getZoomLevel():获取缩放级别。
load():加载全景图()。
moveTo(longitude, latitude):根据经纬度移动到某一点。
rotate(dlong, dlat):根据经纬度度数移动到某一点。
toggleAutorotate():是否开启全景图自动旋转。
toggleDeviceOrientation():是否开启重力感应方向控制。
toggleFullscreen():是否开启全景图全屏。
toggleStereo():是否开启立体效果(可用于WebVR哦)。
zoom(level):设置缩放级别。
zoomIn():放大。
zoomOut():缩小。

这篇关于基于Threejs的360全景图预览的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!



http://www.chinasem.cn/article/1079537

相关文章

Android 10.0 mtk平板camera2横屏预览旋转90度横屏拍照图片旋转90度功能实现

1.前言 在10.0的系统rom定制化开发中,在进行一些平板等默认横屏的设备开发的过程中,需要在进入camera2的 时候,默认预览图像也是需要横屏显示的,在上一篇已经实现了横屏预览功能,然后发现横屏预览后,拍照保存的图片 依然是竖屏的,所以说同样需要将图片也保存为横屏图标了,所以就需要看下mtk的camera2的相关横屏保存图片功能, 如何实现实现横屏保存图片功能 如图所示: 2.mtk

4-4.Andorid Camera 之简化编码模板(获取摄像头 ID、选择最优预览尺寸)

一、Camera 简化思路 在 Camera 的开发中,其实我们通常只关注打开相机、图像预览和关闭相机,其他的步骤我们不应该花费太多的精力 为此,应该提供一个工具类,它有处理相机的一些基本工具方法,包括获取摄像头 ID、选择最优预览尺寸以及打印相机参数信息 二、Camera 工具类 CameraIdResult.java public class CameraIdResult {

第二天旅游线路规划和预览

第二天:从克拉玛依市乌尔禾区到五彩滩,晚上住宿贾登峪; 规划结果见下图: 1、行程安排 根据上面的耗时情况,规划一天的行程安排如下: 1)早上7:30起床,吃完早饭,8:30出发; 2)从克拉玛依市乌尔禾区到五彩滩风景区,路程229公里,车程3小时,中午12:00左右到达五彩滩景区; 3)中午吃饭1小时; 3)五彩滩游玩时间约3小时,在五彩滩游玩到16:00; 4)乘车前往阿勒泰地区布尔津县

uni-app--》打造个性化壁纸预览应用平台(三)

🏙️作者简介:大家好,我是亦世凡华、渴望知识储备自己的一名前端工程师 🌄个人主页:亦世凡华、 🌆系列专栏:uni-app 🌇座右铭:人生亦可燃烧,亦可腐败,我愿燃烧,耗尽所有光芒。 👀引言 ⚓经过web前端的学习,相信大家对于前端开发有了一定深入的了解,今天我开设了uni-app专栏,对于想从移动端开发方向进一步发展的朋友,希望看到我文章的朋友能对你有所帮助。

企业级大数据平台建设参考 | 淘宝滴滴美团360快手京东

点击上方蓝色字体,选择“设为星标” 回复”资源“获取更多资源 本文结合小编自己的经验并且参考了淘宝&滴滴&美团&360&快手等各个大厂大数据平台建设的思路。在尊重事实的基础上重新组织了语言和内容,旨在给读者揭开一个完善的大数据平台的组成和发展过程。 大数据平台是为了计算,现今社会所产生的越来越大的数据量,以存储、运算、展现作为目的的平台。大数据技术是指从各种各样类型的数据中,快速获得有价值信息

HelloChart--PreviewChartView(预览统计图)

PreviewColumnChartView、PreviewLineChartView相当于是柱形图、折线图的预览模式,当柱形图与折线图数据过多,就可以通过预览图对其进行展示,用户可通过点击其中一部分进行放大查看。而且PreviewColumnChartView、PreviewLineChartView与ColumnChartView、LineChartView属性类似,只是多了一个预览图效果。

vue3 前端实现pdf打印预览 printjs

在utils建print.ts文件 interface PrintFunction {extendOptions: Function;getStyle: Function;setDomHeight: Function;toPrint: Function;}const Print = function (dom, options?: object): PrintFunction {optio

电脑图片只显示图标不显示图片,但是可以打开看,就是不能预览

电脑图片只显示图标不显示图片,但是可以打开看,就是不能预览 例如:不能显示出图片内容 解决方法:我的电脑(计算机)-右键-属性-高级系统设置-高级-性能-设置-找到(显示缩略图,而不是显示图标)前面勾上,保存 效果

如何在html中播放本地视频文件【兼容ie、火狐、谷歌、360浏览器等】

查询资料会发现,有的说用object标签,有的用embed标签,其实都是对的。只是针对的情况不一样,前者主要适用ie浏览器,后者用于火狐谷歌等其他浏览器。 <object> 标签用于包含对象,比如图像、音频、视频、Java applets、ActiveX、PDF 以及 Flash。 embed标签定义嵌入的内容,比如插件。 object和embed的区别:1、是为了兼容不同浏览器,I

在Vision Pro上实现360度全景视频播放:HLS360VideoMaterial框架介绍

随着Apple Vision Pro的推出,空间计算技术正在变得越来越普及,而360度全景视频则是其中一种令人兴奋的应用形式。对于希望在visionOS平台上集成360度视频流的开发者而言,找到合适的工具和框架至关重要。今天,我们要介绍的正是这样一个框架——HLS360VideoMaterial,它可以帮助你在Vision Pro上轻松实现360度全景视频的播放,并支持二次开发,让你的应用更上一层