title: Why is my Three.js animation slower in Vue.js?
body: <p>I'm trying to recreate this awesome wave simulation: <a href="https://codepen.io/cheekymonkey/pen/vMvYNV" rel="nofollow noreferrer">https://codepen.io/cheekymonkey/pen/vMvYNV</a>, in Vue.js. However the animation is really slow when I've recreated it in Vue.js</p>
  
  <p>I've tried making all of the same functions as Vue.js methods and including the variables in the component's data property.</p>
  
  <pre><code>&lt;template&gt;
      &lt;div id="container" style="width:100%; height:100vh;"&gt;&lt;/div&gt;
  &lt;/template&gt;
  
  &lt;script&gt;
  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 &lt; 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();
    }
  }
  &lt;/script&gt;
  </code></pre>
  
  <p>It works, as in the wave animates like it should, but it's much slower. Not sure if this is due to Vue.js or just how I've set it up. Any advice much appreciated!</p>