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

Question

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

我使用的是 Three.js 85，因为旧版本的 THREE.json 加载器的使用在新版本中已被弃用。这会是问题所在吗？可能的解决方案是在新标准中重新导出这些模型？问题仍然是，为什么在加载完全相同的文件时，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有关使您的组件成为非 react 性的更多信息。

版本

Three.js r.112