vue中使用threejs注意事项

最近在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);

})

```

但后续创建天空盒需要把图片路径以数组的方式放进去,无法解决,导致天空盒内部无法渲染图片,尚未解决.

未完待续