如何实现一个VR？全景图？360看房？引入一个组件就够了！

泽尔马_zelma
1,548 阅读6分钟

啥也不说，先上效果图

手机扫码即可，如果有问题可以刷新一下

image.png

pc端预览地址 建议打开调式模式，使用手机模式查看

实现效果

react VR全景图组件实现，超级简单，即下即用，只需要从npm上下载，配置所需要的场景资源，就能实现VR全景图效果，可调整VR显示效果，添加自定义热点，热点样式修改，自定义跳转场景，手机控制VR效果(场景随着手机一起动)，VR全景图实例获取，多种方法事件等。

背景

在前面有一篇文章向大家介绍了如何使用pannellum插件去实现一个VR全景图，但是是使用原生的方式实现，在平时开发中，肯定是需要使用一个UI框架的，在后续工作中我使用React框架实现了全景图的功能，里面有一些坑，我一一踩过了之后，现在把他封装成一个React组件来使用，非常的方便

如何下载

我把组件上传到了NPM上，组件代码上传到了github上

npm 地址 www.npmjs.com/package/vr-…

github 地址 github.com/zuiaiwanqia…

使用方式

使用方式很简单，只需要使用npm下载组件，将组件引入并传入对应参数即可

npm i vr-react

最简单的使用

import VrReact from 'vr-react'

const scenes = {
    oneScene: {
      type: "equirectangular",
      panorama: "https://pannellum.org/images/bma-1.jpg",
    }
}
<VrReact
    scenes={scenes}
    width="100%"
    height="100vh"
 />

添加全部参数的使用

import VrReact from 'vr-react'

<VrReact
    setViewer={setViewer}
    config={config}
    width="100%"
    height="100vh"
    firstSceneId="oneScene"
    scenes={scenes}
    hotSpots={hotSpots}
    delayTime={0}
/>

上面例子的代码在项目仓库的example/src/app.js

所有参数的说明和使用方法在这个腾讯文档表格里面

所有参数内容和使用方法都在这里面

地址为vr-react参数文档

部分参数截图

image.png

react-pannellum实例的事件

可以通过setViewer参数传递的函数得到当前react-pannellum的实例

监听事件与消除事件

const [reactPannellum, setReactPannellum] = useState(null)

useEffect(() => {
    if (!reactPannellum) return
    const initLoad = () => {}
    reactPannellum.on('load', initLoad)
    return () => {
        reactPannellum.off('load', initLoad)
    }
}, [reactPannellum])

<Pannellum 
    setViewer={setReactPannellum}
    ...
/>

通过on监听事件，相当于于addEventListener，通过off消除监听事件，相当于removeEventListener

所有的事件

load

当全景图完成加载时触发，切换场景时，新场景也会触发该事件，并且能在该事件中通过getScene()方法拿到更新后的场景值ID

scenechange

切换场景时触发，但在改事件中getScene()拿到的场景值ID是当前场景ID，不是切换之后的场景值ID

zoomchange

场景 hfov 更新时触发。将新的 HFOV 值传递给处理程序

fullscreenchange

当浏览器全屏状态改变时触发。将状态值传递给处理程序。

scenechangefadedone

如果指定了场景转换淡入淡出间隔，则在切换场景后淡入淡出完成时触发此事件

animatefinished

当任何动作/动画完成时触发，即当渲染器停止渲染新帧时。将最终俯仰、偏航和 HFOV 值传递给处理程序。

error

发生错误时触发。错误消息字符串被传递给事件侦听器。

errorcleared

清除错误时触发

mousedown

按下鼠标按钮时触发。传递MouseEvent给处理程序。

mouseup

释放鼠标按钮时触发。传递MouseEvent给处理程序。

touchstart

触摸开始时触发。传递TouchEvent给处理程序。

touchend

触摸结束时触发。传递TouchEvent给处理程序。

react-pannellum实例的常用方法

解释一下pitch yaw hfov

这几个值代表了VR全景图的视角变化，在参数文档表格中也有很多体现

  • pitch 水平方向上下移动角度 正值向上 负值向下，上下旋转角度控制
  • yaw 垂直方向左右旋转角度 正值向右 负值向左，左右旋转角度控制
  • hfov 摄像机视角，即缩放角度大小控制，值越小越近，值越大越远，视角远近控制

一张图解释

image.png

建议去多试试这几个值，就能明白什么意思了

所有方法

isLoaded()

检查全景图是否加载完成。如果加载完成了，则返回true，否则返回 false

getPitch()

返回当前场景的pitch值

setPitch(pitch, animated, callback)

设置当前场景的pitch值

  • pitch pitch值，数据类型为number
  • animated 动画持续时间（以毫秒为单位）或 false 表示没有动画（可选，默认1000）
  • callback 动画结束时调用的函数

getPitchBounds()

返回允许的最小和最大pitch 返回值为一个数组Array[minPitch, maxPitch]

setPitchBounds(bounds)

设置最小和最大pitch bounds为一个数组Array[minPitch, maxPitch]

getYaw()

setYaw(yaw, animated, callback)

getYawBounds()

setYawBounds(bounds)

getHfov()

setHfov(hfov, animated, callback)

getHfovBounds()

setHfovBounds(bounds)

这几个方法同上面方法一样，不过是获取和设置pitch，yaw，hfov这三个不同的值

getNorthOffset

返回全景图的北偏移

getRenderer()

获取全景渲染器

setUpdate()

为动态内容设置更新

lookAt(pitch, yaw, hfov, animated, callback)

设置全景图新的查看角度，包含了pitch，yaw，hfov三个值

startAutoRotate(speed)

开启自动旋转，speed自动旋转速度

stopAutoRotate()

关闭自动旋转

stopMovement()

停止所有运动

loadScene(sceneId, pitch, yaw, hfov)

加载不同的场景

  • sceneId 加载场景的sceneId值
  • pitch 场景加载好的初始pitch值，
  • yaw 场景加载好初始yaw值
  • hfov 场景加载好初始hfov值

getScene()

返回当前当前场景值ID

addScene(sceneId, config)

添加新的场景，需要重新配置config

removeScene(sceneId)

移除场景

toggleFullscreen()

切换全屏操作

getConfig()

返回当前场景配置的config

getContainer()

返回实例容器的dom元素

addHotSpot(hs, sceneId)

在场景中添加热点信息

  • hs 热点配置项，参数文档表格中有具体配置解释
  • sceneId 需要添加热点的场景ID值

removeHotSpot(hotSpotId, sceneId)

在场景中移除热点信息

  • hotSpotId 需要被移除热点的id值
  • sceneId 需要被移除热点的场景ID值

resize()

如果改变了实例容器的大小，则调用此方法

isOrientationSupported()

检查是否支持设备方向控制，是返回true，否返回false 即控制手机方向会控制全景图位置

stopOrientation()

停止设备控制方向

startOrientation()

开始设备控制方向

isOrientationActive

返回当前是否激活了设备控制方向

on

监听实例的事件，相当于addEventListener

off

关闭监听实例的事件，相当于removeEventListener

destory()

销毁实例

结束语

这可以当作一个VR全景图的简单文档，核心还是使用pannellum插件实现，我不过是把这些配置项和方法重新封装了一遍，让你可以不去阅读更多的内容，能够快速的实现一个全景图, 如果觉得帮助到你了，点个赞给个星吧，最后的最后，如果你觉得该组件满足不了你的需求，可以自己去使用原生的pannellum实现

avatar
文章
阅读
粉丝