title: Vue Threejs Frame Rate Slow on Larger JSON Files
body: <p>I am taking an old Three.js project that was in Angular 1.5 into Vue 2.6. The project visualizes Objects in JSON file format and I am getting ~12FPS on larger file that performed ~60FPS in Angular. This example uses <code>large_object</code> which is 3.6mb and <code>small_object</code> which is 84kb for file comparison. </p>
  
  <p>I am in three.js 85 due to the use of the old THREE.json loader being deprecated in newer versions. Would this be the issue - and a possible solution be re-exporting these models in the newer standard? The question would still remain as to why the frame-rate would be so much lower in Vue as compared to Angular when loading the exact same files.</p>
  
  <p>App.js</p>
  
  <pre><code>&lt;template&gt;
    &lt;div id="app"&gt;
      &lt;div id="modelView"&gt;&lt;/div&gt;
    &lt;/div&gt;
  &lt;/template&gt;
  &lt;script&gt;
  import Stats from "stats.js";
  import * as THREE from 'three'
  const OrbitControls = require('three-orbit-controls')(THREE)
  
  export default {
    data(){
      return {
        camera: null,
        scene: new THREE.Scene(),
        renderer: null,
        controls: null, 
        loader: new THREE.ObjectLoader(),
        context: null,
        animationFrameID: null,
        stats: null
      }
    },
    mounted(){
      this.init()
      this.loader.load("./large_object.json", this.loadModel,this.onProgress, this.onError)
      this.animate();
    },
    methods:{
      init: function(){
        this.container = document.getElementById('modelView')
  
        this.stats = new Stats();
        this.stats.showPanel( 0 ); // 0: fps, 1: ms, 2: mb, 3+: custom
        document.body.appendChild( this.stats.dom );
  
        var ambient = new THREE.AmbientLight(0xe8ecff, 1.4)
        ambient.name = 'ambientLight'
        this.scene.add(ambient)
        // set up renderer
        this.renderer = new THREE.WebGLRenderer({ antialias: true })
        this.renderer.setPixelRatio(window.devicePixelRatio)
        this.renderer.setSize(window.innerWidth, window.innerHeight )
        // this.renderer.shadowMap.enabled = true
        // this.renderer.shadowMap.type = THREE.PCFSoftShadowMap
        this.scene.background = new THREE.Color('rgb(255, 255, 255)')
        this.scene.fog = new THREE.Fog(0x1a2050, 10000, 10000)
  
        this.container.appendChild(this.renderer.domElement)
  
        // set up camera and controls
        this.camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 20, 15000)
        this.camera.position.set(300, 400, 900)
  
        this.controls = new OrbitControls(this.camera, this.renderer.domElement)
        this.controls.update()
      },
      animate: function () {
        this.animationFrameID = requestAnimationFrame(this.animate)
        this.renderer.render(this.scene, this.camera)
        this.stats.update()
      },
      loadModel: function(obj){
        this.scene.add(obj)
      },
      // callback function for loadlayers function while parsing json
      onProgress: function (xhr) {
        console.log( (xhr.loaded / xhr.total * 100) + '% loaded' );
      },
      // callback function for loadlayers function while parsing json
      onError: function (err) {
        console.error('An error happened')
      },
    }
  }
  &lt;/script&gt;
  &lt;style lang="scss"&gt;
  body{
    margin:0;
    padding:0;
  }
  #app {
    font-family: 'Avenir', Helvetica, Arial, sans-serif;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-align: center;
    color: #2c3e50;
  }
  #modelView{
    height: 100vh;
    width: 100vw;
  }
  &lt;/style&gt;
  </code></pre>