最近在vue项目中使用threejs一下都是踩过的雷点
## 卡顿问题
在vue中three.js的相机,场景,渲染器,控制器,都不能放在data中,否则会导致项目运行使用出来后很卡
```
//将以上的东西放在mounted中创建,前面加上this.也是全局变量
mounted() {
this.scene = null
this.renderer = null
this.camera = null
this.controls = null
this.init()
},
//后续还要在beforeDestory中进行销毁
beforeDestroy() {
this.scene = null
this.renderer = null
this.camera = null
this.controls = null
}
```
## threebsp
通过npm 安装threebsp库后发现每次运行都会报错,尝试自己把threebsp的代码复制进来后导出,也是一样的报错.[后来通过这个安装旧版本的方法解决](https://www.jianshu.com/p/53a3aaefb297).
## 纹理贴图
在使用TextureLoader纹理贴图的方法时不能直接.load(url),这样无法url路径的图片渲染
```
//使用require方法请求到路径.在放到.load方法里
const Texturing = require('../../../public/static/images/floor.jpg')
const loader = new THREE.TextureLoader()
loader.load(Texturing, (texture) => {
texture.wrapS = texture.wrapT = THREE.RepeatWrapping
texture.repeat.set(10, 10);
const floorGeometry = new THREE.BoxGeometry(floorWidth,floorHeight,floorDepth)
const floorMaterial = new THREE.MeshBasicMaterial({
map: texture,
});
const floor = new THREE.Mesh(floorGeometry, floorMaterial)
floor.rotation.x = -Math.PI / 2
floor.name = "地面";
scene.add(floor);
})
```
但后续创建天空盒需要把图片路径以数组的方式放进去,无法解决,导致天空盒内部无法渲染图片,尚未解决.
未完待续
