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的代码复制进来后导出,也是一样的报错.后来通过这个安装旧版本的方法解决.

纹理贴图

在使用TextureLoader纹理贴图的方法时不能直接.load(url),这样无法url路径的图片渲染

//使用require方法请求到路径.在放到.load方法里
const Texturing = require('../../../public/static/images/floor.jpg')
    const loader = new THREE.TextureLoader()
    loader.load(Texturing, (texture) => {