I am currently upgrading a legacy Three.js project from Angular 1.5 to Vue 2.6. The project is used for visualizing objects in JSON file format and I'm experiencing a drop in frame rate, going from ~60FPS in Angular to ~12FPS in Vue when loading larger files. Specifically, the example compares the performance of large_object (3.6mb) with small_object (84kb).
The reason behind this decrease could be due to my use of three.js version 85, as the old THREE.json loader has been deprecated in newer versions. One potential solution might involve re-exporting the models in the newer standard. However, there remains the question of why the frame rate is significantly lower in Vue compared to Angular, despite loading the exact same files.
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>