vue项目全景网站制作（three.js）

vue项目全景网站制作

今天花了大半天研究了下全景网站，记录一下踩的坑。
链接: 详解前端实现VR全景看房！跟上趋势，Three.js赶紧学习起来！
链接: VR全景小程序
代码可以去上面两个视频学习。

vue项目运行

//装一下第三方依赖
npm install
//运行
npm run dev

老版本运行用npm run serve，上面不成功再用这个试一下。
这里我发现拿到的项目里面是yarn包管理的，貌似跟npm二选一即可，可以把那个yarn.lock文件删掉。

three.js使用体会

要初始化场景相机渲染，还有照片纹理。
这里x轴横向，y轴纵向，z轴向屏幕外。
项目中包含六张图做一个立方体呈现全景效果，和hdr文件产生一个球体生成效果，只需要改动其中图片文件即可。

第三方依赖更改

这里全景拖动的时候，鼠标跟图片移动方向是相反的，原理是移动的是摄像机而不是物体本身，与大部分全景网站不同，所以我们要修改一下源码，这里我们对OrbitControls 包下面的rotateLeft和rotateUp两个方法，把他们减号改成加号即可。这里改完之后要重新用命令运行才能看见。

打补丁

如果想让我们的修改一直伴随项目，要打个补丁。
修改package.json文件

"scripts": {
    ***,
+   "postinstall": "patch-package"
}

修改依赖包源码
生成补丁

npx patch-package package-name

然后就会发现多了一个patch文件夹
可以把node_modules文件夹删了，再install看一下效果。