基于 pannellum 插件实现的 React VR 全景图组件,在线 demo

pc 端建议按下 F12, 切换成手机模式查看最佳

如何预览

js

npm run start





打开http://localhost:3001/地址



并按下 F12, 切换成手机模式查看最佳



文章掘金地址



掘金文章地址



如何下载



通过 npm 下载



> npm i react-vr-pannellum



使用方式



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



最简单的使用

js





添加全部参数的使用

js

  setViewer={setViewer}

  config={config}

  width="100%"

  height="100vh"

  firstSceneId="oneScene"

  scenes={scenes}

  hotSpots={hotSpots}

  delayTime={0}

/>





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



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



地址为react-pannellum 参数文档



部分参数截图



!image.png



react-pannellum 实例的事件



可以通过

setViewer

参数传递的函数得到当前 react-pannellum 的实例



$3

js

const [reactPannellum, setReactPannellum] = useState(null)



useEffect(() => {

    if (!reactPannellum) return

    const initLoad = () => {}

    reactPannellum.on('load', initLoad)

    return () => {

        reactPannellum.off('load', initLoad)

    }

}, [reactPannellum])



    setViewer={setReactPannellum}

    ...

/>





通过

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





$3



$3



当全景图完成加载时触发，切换场景时，新场景也会触发该事件，并且能在该事件中通过

getScene()

方法拿到更新后的场景值 ID



$3



切换场景时触发，但在改事件中

getScene()

拿到的场景值 ID 是当前场景 ID，不是切换之后的场景值 ID



$3



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



$3



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



$3



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



$3



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



$3



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



$3



清除错误时触发



$3



按下鼠标按钮时触发。传递

MouseEvent

给处理程序。



$3



释放鼠标按钮时触发。传递

MouseEvent

给处理程序。



$3



触摸开始时触发。传递

TouchEvent

给处理程序。



$3



触摸结束时触发。传递

TouchEvent

给处理程序。



react-pannellum 实例的常用方法



$3



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



-

pitch

 水平方向上下移动角度 正值向上 负值向下，上下旋转角度控制

-

yaw

 垂直方向左右旋转角度 正值向右 负值向左，左右旋转角度控制

-

hfov

 摄像机视角，即缩放角度大小控制，值越小越近，值越大越远，视角远近控制



一张图解释



!image.png



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



$3



$3



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

true，否则返回 false





$3



返回当前场景的 pitch 值



$3



设置当前场景的 pitch 值



-

pitch pitch 值，数据类型为number

animated 动画持续时间（以毫秒为单位）或 false 表示没有动画（可选，默认1000

）

-

callback

 动画结束时调用的函数



$3



返回允许的最小和最大 pitch 返回值为一个数组

Array[minPitch, maxPitch]





$3



设置最小和最大 pitch

bounds为一个数组Array[minPitch, maxPitch]





$3



$3



$3



$3



$3



$3



$3



$3



> 这几个方法同上面方法一样，不过是获取和设置

pitch，yaw，hfov

这三个不同的值



$3



返回全景图的北偏移



$3



获取全景渲染器



$3



为动态内容设置更新



$3



设置全景图新的查看角度，包含了

pitch，yaw，hfov

三个值



$3



开启自动旋转，

speed

自动旋转速度



$3



关闭自动旋转



$3



停止所有运动



$3



加载不同的场景



-

sceneId

 加载场景的 sceneId 值

-

pitch

 场景加载好的初始 pitch 值，

-

yaw

 场景加载好初始 yaw 值

-

hfov

 场景加载好初始 hfov 值



$3



返回当前当前场景值 ID



$3



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



$3



移除场景



$3



切换全屏操作



$3



返回当前场景配置的 config



$3



返回实例容器的 dom 元素



$3



在场景中添加热点信息



-

 热点配置项，参数文档表格中有具体配置解释

-

sceneId

 需要添加热点的场景 ID 值



$3



在场景中移除热点信息



-

hotSpotId

 需要被移除热点的 id 值

-

sceneId

 需要被移除热点的场景 ID 值



$3



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



$3



检查是否支持设备方向控制，是返回

true，否返回false

 即控制手机方向会控制全景图位置



$3



停止设备控制方向



$3



开始设备控制方向



$3



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



$3



监听实例的事件，相当于

addEventListener





$3



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

removeEventListener`

$3

销毁实例

最后

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

基于 pannellum 插件实现的 React VR 全景图组件,在线 demo

pc 端建议按下 F12, 切换成手机模式查看最佳

如何预览

js

npm run start





打开http://localhost:3001/地址



并按下 F12, 切换成手机模式查看最佳



文章掘金地址



掘金文章地址



如何下载



通过 npm 下载



> npm i react-vr-pannellum



使用方式



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



最简单的使用

js





添加全部参数的使用

js

  setViewer={setViewer}

  config={config}

  width="100%"

  height="100vh"

  firstSceneId="oneScene"

  scenes={scenes}

  hotSpots={hotSpots}

  delayTime={0}

/>





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



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



地址为react-pannellum 参数文档



部分参数截图



!image.png



react-pannellum 实例的事件



可以通过

setViewer

参数传递的函数得到当前 react-pannellum 的实例



$3

js

const [reactPannellum, setReactPannellum] = useState(null)



useEffect(() => {

    if (!reactPannellum) return

    const initLoad = () => {}

    reactPannellum.on('load', initLoad)

    return () => {

        reactPannellum.off('load', initLoad)

    }

}, [reactPannellum])



    setViewer={setReactPannellum}

    ...

/>





通过

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





$3



$3



当全景图完成加载时触发，切换场景时，新场景也会触发该事件，并且能在该事件中通过

getScene()

方法拿到更新后的场景值 ID



$3



切换场景时触发，但在改事件中

getScene()

拿到的场景值 ID 是当前场景 ID，不是切换之后的场景值 ID



$3



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



$3



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



$3



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



$3



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



$3



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



$3



清除错误时触发



$3



按下鼠标按钮时触发。传递

MouseEvent

给处理程序。



$3



释放鼠标按钮时触发。传递

MouseEvent

给处理程序。



$3



触摸开始时触发。传递

TouchEvent

给处理程序。



$3



触摸结束时触发。传递

TouchEvent

给处理程序。



react-pannellum 实例的常用方法



$3



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



-

pitch

 水平方向上下移动角度 正值向上 负值向下，上下旋转角度控制

-

yaw

 垂直方向左右旋转角度 正值向右 负值向左，左右旋转角度控制

-

hfov

 摄像机视角，即缩放角度大小控制，值越小越近，值越大越远，视角远近控制



一张图解释



!image.png



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



$3



$3



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

true，否则返回 false





$3



返回当前场景的 pitch 值



$3



设置当前场景的 pitch 值



-

pitch pitch 值，数据类型为number

animated 动画持续时间（以毫秒为单位）或 false 表示没有动画（可选，默认1000

）

-

callback

 动画结束时调用的函数



$3



返回允许的最小和最大 pitch 返回值为一个数组

Array[minPitch, maxPitch]





$3



设置最小和最大 pitch

bounds为一个数组Array[minPitch, maxPitch]





$3



$3



$3



$3



$3



$3



$3



$3



> 这几个方法同上面方法一样，不过是获取和设置

pitch，yaw，hfov

这三个不同的值



$3



返回全景图的北偏移



$3



获取全景渲染器



$3



为动态内容设置更新



$3



设置全景图新的查看角度，包含了

pitch，yaw，hfov

三个值



$3



开启自动旋转，

speed

自动旋转速度



$3



关闭自动旋转



$3



停止所有运动



$3



加载不同的场景



-

sceneId

 加载场景的 sceneId 值

-

pitch

 场景加载好的初始 pitch 值，

-

yaw

 场景加载好初始 yaw 值

-

hfov

 场景加载好初始 hfov 值



$3



返回当前当前场景值 ID



$3



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



$3



移除场景



$3



切换全屏操作



$3



返回当前场景配置的 config



$3



返回实例容器的 dom 元素



$3



在场景中添加热点信息



-

 热点配置项，参数文档表格中有具体配置解释

-

sceneId

 需要添加热点的场景 ID 值



$3



在场景中移除热点信息



-

hotSpotId

 需要被移除热点的 id 值

-

sceneId

 需要被移除热点的场景 ID 值



$3



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



$3



检查是否支持设备方向控制，是返回

true，否返回false

 即控制手机方向会控制全景图位置



$3



停止设备控制方向



$3



开始设备控制方向



$3



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



$3



监听实例的事件，相当于

addEventListener





$3



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

removeEventListener`

$3

销毁实例