基于threejs实现的vr全景图管理系统
demo地址：
npm i vr-panorama
yarn add vr-panorama根据你需要的功能引入对应的sdk文件
<!--只包含全景图展示功能-->
<script src="https://unpkg.com/vr-panorama@latest/dist/VrTraveller.js"></script>
<!--只包含全景图录制数据功能-->
<script src="https://unpkg.com/vr-panorama@latest/dist/VrAligner.js"></script>
<!--包含VrTraveller和VrAligner-->
<script src="https://unpkg.com/vr-panorama@latest/dist/VrPano.js"></script>// 如果是在浏览器中使用，不需要引入，可以直接通过window对象拿到
import VrPano from 'vr-panorama';
const { VrTraveller, VrAligner } = VrPano;
// 用来展示vr的容器
const box = document.querySelector('#container');
// 渲染vr所需要的数据
const data = getNaviData();
// 如果需要前端展示
const traveller = new VrTraveller(data, box);
// 如果需要录制数据
const aligner = new VrAligner(data, box);[{
// 场景的角度及资源
"scene": {
// 场景的唯一标识
"photo_key": "1",
// 场景的校正角度
"correction": [0, 0, 0],
// 场景的旋转角度 水平，数值，第三项固定为0
"rotation": [180, 0, 0],
"title": "卧室",
// 球面贴图的资源
"sphereSource": {
//缩略图
thumb: `${sourceRoot}/sphereSource/1/thumb.jpg`,
// 清晰切片图
slices: getSphereSliceUrl(1)
},
// 立方体贴图的资源
"cubeSource": {
thumb: `${sourceRoot}/cubeSource/1/thumb.jpg`,
slices: getCubeSliceUrl(1)
},
// 是否默认展示该场景
"is_main": 1
},
// 场景的导航
"overlays": [{
"title": "洗手间",
// 导航的位置，x:经度，y:纬度
"x": 4.6720072719141,
"y": -0.52291666726088,
// 导航的跳转场景标识
"next_photo_key": "2"
},
{
"title": "厨房",
"x": 4.6720072719141,
"y": 0.52291666726088,
"next_photo_key": "2"
}]
},
{
"scene": {
"photo_key": "2",
"correction": [0, 0, 0],
"rotation": [180, 0, 0],
"title": "卫生间",
"sphereSource": {
thumb: `${sourceRoot}/sphereSource/2/thumb.jpg`,
slices: getSphereSliceUrl(2)
},
"cubeSource": {
thumb: `${sourceRoot}/cubeSource/2/thumb.jpg`,
slices: getCubeSliceUrl(2)
},
"is_main": 0
},
"overlays": [{
"title": "卧室",
"x": 3.4483749837697,
"y": -0.7169249148447,
"next_photo_key": "1"
}]
}]sdk会判断当前浏览器是否支持webgl，如果支持的话就使用sphereSource作为资源图片,否则使用css3d使用cubeSource完成全景图的渲染。
对于每一个场景，需要准备一个thumb表示缩略图，一般是一张不太清晰的全景图，用户网络不好的情况下也能看到东西，然后slices是该场景的切片图。如果是webgl渲染，这个slices是一个长度为4的数组，数组每一项长度为8;也就是将清晰的全景图切成了4行8列，然后保存到slices中。如果是css3d渲染，thumb同样是一张缩略图，slices是一个长度为6的数组，保存立方体6的面的图片地址。
针对这个项目，我写了一个项目来生成图片资源，对于球面图资源，你只需要提供一个清晰的全景图，就可以为你切出4*8=32张碎片图，对于立方体图资源，你需要提供6个面的缩略图，然后为你生成一整张缩略图。这里是项目地址.
下面是球面缩略图和立方体缩略图的大概样子：
VrTraveller提供了GlassesButton功能，可以支持开启VR眼镜浏览模式，如果需要的话，可以这样使用：
// vr眼镜，可选
const glassesButton = new VrTraveller.GlassesButton();
traveller.setGlassesButton(glassesButton);注意：VR眼镜浏览功能是通过监听手机的陀螺仪来实现的，所以需要在移动端体验，某些机型可能不支持。
- 参数： -{ string } key
- 功能：实现场景的跳转
- 参数： -{ string } key
- 功能：设置指定的场景为主场景(有多个场景时,默认渲染该场景)
- 功能：保存当前场景的角度设置
- 功能：重置当前场景的角度为上一次保存的角度
- 功能：获取到当前场景的校验角度
- 功能：获取到当前场景的旋转角度
- 参数： -{ string | number } val
- 功能：设置当前场景的
yaw偏转角
- 参数： -{ string | number } val
- 功能：设置当前场景的
roll偏转角
- 参数： -{ string | number } val
- 功能：设置当前场景的
pitch偏转角
- 参数： -{ string | number } val
- 功能：设置当前场景沿着Y轴旋转角度
- 参数： -{ string | number } val
- 功能：设置当前场景沿着X轴旋转角度
- 参数： -{ string } title 导航名称(唯一) -{ string } next_photo_key 导航的跳转场景标识
- 功能：在当前场景中添加一个导航
- Array
- 详细: 当前项目的配置数据