Javascript 为什么我的Three.js动画在Vue.js中速度较慢？

我试图在Vue.js中重新创建这个很棒的波浪模拟。但是，当我在Vue.js中重新创建动画时，它的速度非常慢

我尝试过使用与Vue.js方法相同的所有函数，并在组件的数据属性中包含变量

<template>
    <div id="container" style="width:100%; height:100vh;"></div>
</template>

<script>
import * as Three from 'three'
import SimplexNoise from'simplex-noise'

export default {
  name: 'ThreeTest',
  data() {
    return {
      camera: Three.PerspectiveCamera,
      scene: Three.Scene,
      renderer: Three.WebGLRenderer,
      mesh: Three.Mesh,
      noise: SimplexNoise,
      geometry: null,
      factor: 0
    }
  },
  methods: {
    init: function() {
      this.createScene();
      this.createCamera();
      this.createShape();
      this.addSpotlight('#fdffab');
      this.addAmbientLight();
      this.animate();
      window.addEventListener('resize', this.onResize())

    },
    onResize: function() {
      let container = document.getElementById('container');
      this.renderer.setSize(container.clientWidth, container.clientHeight);
      this.camera.aspect = container.clientWidth / container.clientHeight;
      this.camera.updateProjectionMatrix();
    },
    createScene: function() {
      this.scene = new Three.Scene();
      this.renderer = new Three.WebGLRenderer({
        antialias: true,
        alpha: true
      });
      let container = document.getElementById('container');
      this.renderer.setSize(container.clientWidth, container.clientHeight);
      this.renderer.setPixelRatio(window.devicePixelRatio);
      this.renderer.setClearColor(new Three.Color('#fff'));
      //this.render.shadowMap.type = Three.PCFSoftShadowMap;
      this.noise = new SimplexNoise()
      container.appendChild(this.renderer.domElement);
    },
    createCamera: function() {
      this.camera = new Three.PerspectiveCamera(20, container.clientWidth/container.clientHeight, 1, 1000);
      this.camera.position.set(0, 0, 20);
    },
    createShape: function() {
      const seg = 100
      this.geometry = new Three.PlaneGeometry(5, 8, seg, seg)
      const material = new Three.MeshPhysicalMaterial({
        color: '#da0463',
        metalness: 0.6,
        emissive: '#000',
        side: Three.DoubleSide,
        wireframe: true
      })
      this.mesh = new Three.Mesh(this.geometry, material)
      this.mesh.receiveShadow = true
      this.mesh.castShadow = true
      this.mesh.position.set(0, 0, 0)
      this.mesh.rotation.x = -Math.PI / 3
      this.mesh.rotation.z = -Math.PI / 4
      this.scene.add(this.mesh)
    },
    addSpotlight: function(color) {
      const light = new Three.SpotLight(color, 2, 1000)
      light.position.set(0, 0, 30)
      this.scene.add(light)
    },
    addAmbientLight: function() {
      const light = new Three.AmbientLight('#fff', 0.5)
      this.scene.add(light)
    },
    addjustVertices: function() {
      for (let i = 0; i < this.geometry.vertices.length; i++) {
        const vertex = this.geometry.vertices[i]
        const x = vertex.x / 4
        const y = vertex.y / 6
        vertex.z = this.noise.noise2D(x, y + this.factor)
      }
      this.factor += 0.007
      this.geometry.verticesNeedUpdate = true
      this.geometry.computeVertexNormals()
    },
    animate: function() {
        requestAnimationFrame(this.animate);
        this.addjustVertices();
        this.camera.updateProjectionMatrix();
        this.renderer.render(this.scene, this.camera);
    }
  },
  mounted() {
      this.init();
  }
}
</script>

将*从“三”导入为三
从“simplex-noise”导入SimplexNoise
导出默认值{
名称：'ThreeTest'，
数据（）{
返回{
摄像机：三，透视摄像机，
场景：三，场景，
渲染器：3.WebGLRenderer，
网格：三个，网格，
噪音：SimplexNoise，
几何体：空，
系数：0
}
},
方法：{
init:function（）{
这个.createScene（）；
这个.createCamera（）；
这个.createShape（）；
这个.addSpotlight（'fdffab'）；
这个.addAmbientLight（）；
这个。动画（）；
window.addEventListener（'resize'，this.onResize（））
},
onResize:function（）{
让container=document.getElementById（'container'）；
this.renderer.setSize（container.clientWidth，container.clientHeight）；
this.camera.aspect=container.clientWidth/container.clientHeight；
this.camera.updateProjectMatrix（）；
},
createScene:function（）{
this.scene=新的三个.scene（）；
this.renderer=new Three.WebGLRenderer({
反别名：是的，
阿尔法：是的
});
让container=document.getElementById（'container'）；
this.renderer.setSize（container.clientWidth，container.clientHeight）；
this.renderer.setPixelRatio（window.devicePixelRatio）；
this.renderer.setClearColor（新的Three.Color（'#fff'））；
//this.render.shadowMap.type=Three.PCFSoftShadowMap；
this.noise=新的SimplexNoise（）
container.appendChild（this.renderer.doElement）；
},
createCamera:function（）{
this.camera=新的3.PerspectiveCamera（20，container.clientWidth/container.clientHeight，11000）；
此.camera.position.set（0,0,20）；
},
createShape:function（）{
常数seg=100
this.geometry=新的三个平面几何体（5，8，seg，seg）
常数材料=新的三网格物理材料({
颜色：“#da0463”，
金属度：0.6，
发射：“#000”，
三面，双面，
线框：正确
})
this.mesh=新的3.mesh（this.geometry，material）
this.mesh.receiveShadow=true
this.mesh.castShadow=true
this.mesh.position.set（0,0,0）
this.mesh.rotation.x=-Math.PI/3
this.mesh.rotation.z=-Math.PI/4
this.scene.add（this.mesh）
},
addSpotlight:功能（颜色）{
恒光=新的三个聚光灯（颜色，21000）
灯光位置设置（0,0,30）
此.scene.add（灯光）
},
addAmbientLight:函数（）{
恒光=新的三倍环境光（'fff'，0.5）
此.scene.add（灯光）
},
addjustVertices:function（）{
for（设i=0；i

---

它可以工作，就像波浪中的动画一样，但速度要慢得多。不确定这是因为Vue.js还是因为我是如何设置的。非常感谢任何建议

之所以发生这种情况，是因为引擎盖下的Vue使连接到实例的每个组件都是被动的。打开开发工具，看看你的内存占用情况，当我在我的机器上运行你的代码片段时，它是~300mb，而代码笔示例是~20mb

当您

console.log（this.scene）

看到的是允许Vue跟踪对象的getter/setter

下面的代码段将三个.js对象从Vue数据对象中提取出来，并将它们附加到一个对象。此插件允许您将某些变量设置为非反应变量

<template>
    <div id="container" style="width:100%; height:100vh;"></div>
</template>

<script>
import * as Three from 'three'
import SimplexNoise from'simplex-noise'

export default {
  name: 'ThreeTest',
  static(){
    return {
      scene: new Three.Scene(),
      camera: null,
      renderer: Three.WebGLRenderer,
      mesh: new Three.Mesh,
      noise: SimplexNoise,
      factor:0
    }
  },
  mounted() {
    this.init();
  },
  methods: {
    init: function() {
      this.createScene();
      this.createCamera();
      this.createShape();
      this.addSpotlight('#fdffab');
      this.addAmbientLight();
      this.animate();
      window.addEventListener('resize', this.onResize())
    },
    onResize: function() {
      let container = document.getElementById('container');
      this.renderer.setSize(container.clientWidth, container.clientHeight);
      this.camera.aspect = container.clientWidth / container.clientHeight;
      this.camera.updateProjectionMatrix();
    },
    createScene: function() {

      console.log("TCL: this.$options.bigHairyHorseNuts ",this.bigHairyHorseNuts)

      this.renderer = new Three.WebGLRenderer({
        antialias: true,
        alpha: true
      });
      let container = document.getElementById('container');
      this.renderer.setSize(container.clientWidth, container.clientHeight);
      this.renderer.setPixelRatio(window.devicePixelRatio);
      this.renderer.setClearColor(new Three.Color('#fff'));
      //this.render.shadowMap.type = Three.PCFSoftShadowMap;
      this.noise = new SimplexNoise()
      container.appendChild(this.renderer.domElement);
    },
    createCamera: function() {
      this.camera = new Three.PerspectiveCamera(20, container.clientWidth/container.clientHeight, 1, 1000);
      this.camera.position.set(0, 0, 20);
    },
    createShape: function() {
      const seg = 100
      this.geometry = new Three.PlaneGeometry(5, 8, seg, seg)
      const material = new Three.MeshPhysicalMaterial({
        color: '#da0463',
        metalness: 0.6,
        emissive: '#000',
        side: Three.DoubleSide,
        wireframe: true
      })
      this.mesh = new Three.Mesh(this.geometry, material)
      this.mesh.receiveShadow = true
      this.mesh.castShadow = true
      this.mesh.position.set(0, 0, 0)
      this.mesh.rotation.x = -Math.PI / 3
      this.mesh.rotation.z = -Math.PI / 4
      this.scene.add(this.mesh)
    },
    addSpotlight: function(color) {
      const light = new Three.SpotLight(color, 2, 1000)
      light.position.set(0, 0, 30)
      this.scene.add(light)
    },
    addAmbientLight: function() {
      const light = new Three.AmbientLight('#fff', 0.5)
      this.scene.add(light)
    },
    addjustVertices: function() {
      for (let i = 0; i < this.geometry.vertices.length; i++) {
        const vertex = this.geometry.vertices[i]
        const x = vertex.x / 4
        const y = vertex.y / 6
        vertex.z = this.noise.noise2D(x, y + this.factor)
      }
      this.factor += 0.007
      this.geometry.verticesNeedUpdate = true
      this.geometry.computeVertexNormals()
    },
    animate: function() {
        requestAnimationFrame(this.animate);
        this.addjustVertices();
        this.camera.updateProjectionMatrix();
        this.renderer.render(this.scene, this.camera);
    }
  }
}
</script>

将*从“三”导入为三
从“simplex-noise”导入SimplexNoise
导出默认值{
名称：'ThreeTest'，
静态（）{
返回{
场景：新的三个。场景（），
摄像机：空，
渲染器：3.WebGLRenderer，
网格：新的三个，网格，
噪音：SimplexNoise，
系数：0
}
},
安装的（）{
this.init（）；
},
方法：{
init:function（）{
这个.createScene（）；
这个.createCamera（）；
这个.createShape（）；
这个.addSpotlight（'fdffab'）；
这个.addAmbientLight（）；
这个。动画（）；
window.addEventListener（'resize'，this.onResize（））
},
onResize:function（）{
让container=document.getElementById（'container'）；
this.renderer.setSize（container.clientWidth，container.clientHeight）；
this.camera.aspect=container.clientWidth/container.clientHeight；
this.camera.updateProjectMatrix（）；
},
createScene:function（）{
log（“TCL:this.options.bighearyhorsensuts”，this.bighearyhorsensuts）
this.renderer=new Three.WebGLRenderer({
反别名：是的，
阿尔法：是的
});
让container=document.getElementById（'container'）；
this.renderer.setSize（container.clientWidth，container.clientHeight）；
this.renderer.setPixelRatio（window.devicePixelRatio）；
this.renderer.setClearColor（新的Three.Color（'#fff'））；
//this.render.shadowMap.type=Three.PCFSoftShadowMap；
this.noise=新的SimplexNoise（）
container.appendChild（this.renderer.doElement）；
},
createCamera:function（）{
this.camera=新的3.PerspectiveCamera（20，container.clientWidth/container.clientHeight，11000）；
这是我的相机