较大的JSON文件上的Vue Threejs帧速率慢

Question

我将Angular 1.5中的旧Three.js项目带入Vue 2.6。该项目以JSON文件格式可视化对象，而在Angular中执行约60FPS的较大文件中，我获得约12FPS。本示例使用3.6MB的large_object和84kb的small_object进行文件比较。

由于使用旧的THREE.json加载程序而在新版本中已弃用，因此我在three.js 85中。这会是问题吗？可能的解决方案是将这些模型重新导出到较新的标准中吗？问题仍然是为什么当加载完全相同的文件时，为什么Vue中的帧率会比Angular低得多。

App.js

<template>
  <div id="app">
    <div id="modelView"></div>
  </div>
</template>
<script>
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')
    },
  }
}
</script>
<style lang="scss">
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;
}
</style>

Answer 1

通过将几何文件从Geometry更新为Buffer Geometry，可以将帧速率提高到60FPS。还值得注意的是，这仅解决了这一问题的一部分，因为Vue使每个组件具有反应性，这会增加大型应用程序的内存占用量。请参考此answer，以获取有关使组件无反应的其他信息。

版本

Three.js r.112