如何纯前端实现VR查看全景
实现VR查看全景
1、环境
首先需要有node环境，安装node，找到对应电脑系统的版本直接安装即可。
2、下载源码
打开Gitee地址：https://gitee.com/muxiaogo/threejs-vr-vue3下载本地解压
3、安装依赖
打开命令行工具cmd，cd到源码解压的根目录执行命令
npm install 若安装依赖失败，有可能是node版本不对。本文使用node.v16.4.0
执行成功后会出现node_modules包
4、启动程序
在当前目录下执行命令:第一次解析需要一段时间
npm run serve 出现地址则启动成功，可以打开访问
5、使用
运行成功后访问加载默认的环境，分为小球环境和外界环境。
点击右上角的功能：
点击更新房间-进到项目目录public目录下-house目录-选择素材-场景就会更新
点击更新环境-进到项目目录public目录下-textures目录-选择素材-场景就会更新
6、更新素材
若本文的素材都不喜欢或者想用自己的素材，只需要将自己的素材放到项目里的house文件夹或texture文件即可。
注意
项目只支持HDR格式的文件。
7、制作HDR文件
考虑到很多人都不知道HDR文件是什么，或者怎么做。
本文推荐一个免费的全景图片转HDR文件工具：Convertio
手机拍的全景图片上传-选择转换HDR文件-转换成功后下载放到项目目录中-即可切换
8、外网访问
当然很多小伙伴都想让身边的朋友也能看到，那么作者推荐可以使用内网穿透的方法。
这里还是推荐一个免费的工具：神卓互联
步骤：注册登录-内网穿透-映射管理-创建映射-将本地IP和端口号8080配置完成即可-得到的公网地址就可以让伙伴们访问。
项目已开源，本文有源码下载地址：https://gitee.com/muxiaogo/threejs-vr-vue3，以及HDR环境素材，素材过大，下载望考虑周全。
上一篇：负载均衡四层_负载均衡
下一篇：小米14玩原神怎么样好用吗