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

我正在将Angular 1.5中的一个旧的Three.js项目引入Vue 2.6。该项目以JSON文件格式可视化对象，我在更大的文件上获得了约12FPS的速度，在Angular中执行了约60FPS的速度。此示例使用3.6mb的

大对象

和84kb的

小对象

进行文件比较

由于旧的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>

从“Stats.js”导入统计信息；
将*从“三”导入为三
常量轨道控制=需要（“三轨道控制”）（三个）
导出默认值{
数据（）{
返回{
摄像机：空，
场景：新的三个。场景（），
渲染器：null，
控件：null，
loader:new THREE.ObjectLoader（），
上下文：null，
animationFrameID:null，
统计：空
}
},
安装的（）{
this.init（）
this.loader.load（“./large_object.json”、this.loadModel、this.onProgress、this.onError）
这个。动画（）；
},
方法：{
init:function（）{
this.container=document.getElementById（'modelView'）
this.stats=新stats（）；
this.stats.showPanel（0）；//0:fps，1:ms，2:mb，3+:custom
document.body.appendChild（this.stats.dom）；
var环境光=新的三个环境光（0xe8ecff，1.4）
ambient.name='ambientLight'
this.scene.add（环境光）
//设置渲染器
this.renderer=new THREE.WebGLRenderer（{antialas: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=新的3.fog（0x1a2050、10000、10000）
this.container.appendChild（this.renderer.doElement）
//设置摄像机和控制装置
this.camera=新的三视角摄像机（45，window.innerWidth/window.innerHeight，2015000）
此.摄像机.位置.设置（300400900）
this.controls=新的轨道控件（this.camera、this.renderer.doElement）
this.controls.update（）
},
设置动画：函数（）{
this.animationFrameID=requestAnimationFrame（this.animate）
this.renderer.render（this.scene，this.camera）
this.stats.update（）
},
负荷模型：功能（obj）{
this.scene.add（obj）
},
//解析json时loadlayers函数的回调函数
onProgress:函数（xhr）{
log（（xhr.loaded/xhr.total*100）+'%loaded'）；
},
//解析json时loadlayers函数的回调函数
onError：函数（err）{
console.error（'发生错误'）
},
}
}
身体{
保证金：0；
填充：0；
}
#应用程序{
字体系列：“Avenir”、Helvetica、Arial、无衬线字体；
-webkit字体平滑：抗锯齿；
-moz osx字体平滑：灰度；
文本对齐：居中；
颜色：#2c3e50；
}
#模型视图{
高度：100vh；
宽度：100vw；
}

通过将几何体文件从几何体更新为缓冲几何体，将帧速率提高到60FPS。还值得注意的是，这只解决了这个问题的一部分，因为Vue使每个组件都是被动的，这会在更大的应用程序上增加内存占用。有关使您的组件无反应性的更多信息，请参考本文件

版本

---

Three.js r.112

通过将几何体文件从几何体更新为缓冲几何体，将帧速率提高到60FPS。还值得注意的是，这只解决了这个问题的一部分，因为Vue使每个组件都是被动的，这会在更大的应用程序上增加内存占用。有关使您的组件无反应性的更多信息，请参考本文件

版本

---

Three.js r.112

我想看看与Angular.js方法（

console.log

）相比，您的Vue方法执行了多少次。请注意：不要使用

document.getElementById（）

。不能在同一页面上重用该组件，因为元素的ID在文档中必须是唯一的。使用

和

此项。$refs.modelView

。我建议使用vue开发工具，它们有一个性能显示，您可以在其中看到幕后到底发生了什么以及它如何影响您的FPS。另外，为什么要跟踪数据中的

加载程序
和
场景
？将它们作为导入下面的外部变量，而不是跟踪它们的更改，这不是很好吗。这可能是导致lagI的原因。与Angular.js方法（
console.log
）相比，lagI将查看Vue方法的执行次数。请注意：不要使用
document.getElementById（）
。不能在同一页面上重用该组件，因为元素的ID在文档中必须是唯一的。使用
和
此项。$refs.modelView
。我建议使用vue开发工具，它们有一个性能显示，您可以在其中看到幕后到底发生了什么以及它如何影响您的FPS。另外，为什么要跟踪数据中的
加载程序
和
场景
？将它们作为导入下面的外部变量，而不是跟踪它们的更改，这不是很好吗。这可能是拉格现象的原因，我刚刚看到了这一点，很高兴你能继续跟进，并且不会留下太少的答案！刚刚看到这一点，很高兴你跟进，并没有留下答案少！