[英]Why is my Three.js animation slower in Vue.js?
我正在嘗試在 Vue.js 中重新創建這個很棒的波浪模擬: https: //codepen.io/cheekymonkey/pen/vMvYNV。 但是,當我在 Vue.js 中重新創建 animation 時,它真的很慢
我嘗試制作與 Vue.js 方法相同的所有功能,並將變量包含在組件的數據屬性中。
<template>
<div id="container" style="width:100%; height:100vh;"></div>
</template>
<script>
import * as Three from 'three'
import SimplexNoise from'simplex-noise'
export default {
name: 'ThreeTest',
data() {
return {
camera: Three.PerspectiveCamera,
scene: Three.Scene,
renderer: Three.WebGLRenderer,
mesh: Three.Mesh,
noise: SimplexNoise,
geometry: null,
factor: 0
}
},
methods: {
init: function() {
this.createScene();
this.createCamera();
this.createShape();
this.addSpotlight('#fdffab');
this.addAmbientLight();
this.animate();
window.addEventListener('resize', this.onResize())
},
onResize: function() {
let container = document.getElementById('container');
this.renderer.setSize(container.clientWidth, container.clientHeight);
this.camera.aspect = container.clientWidth / container.clientHeight;
this.camera.updateProjectionMatrix();
},
createScene: function() {
this.scene = new Three.Scene();
this.renderer = new Three.WebGLRenderer({
antialias: true,
alpha: true
});
let container = document.getElementById('container');
this.renderer.setSize(container.clientWidth, container.clientHeight);
this.renderer.setPixelRatio(window.devicePixelRatio);
this.renderer.setClearColor(new Three.Color('#fff'));
//this.render.shadowMap.type = Three.PCFSoftShadowMap;
this.noise = new SimplexNoise()
container.appendChild(this.renderer.domElement);
},
createCamera: function() {
this.camera = new Three.PerspectiveCamera(20, container.clientWidth/container.clientHeight, 1, 1000);
this.camera.position.set(0, 0, 20);
},
createShape: function() {
const seg = 100
this.geometry = new Three.PlaneGeometry(5, 8, seg, seg)
const material = new Three.MeshPhysicalMaterial({
color: '#da0463',
metalness: 0.6,
emissive: '#000',
side: Three.DoubleSide,
wireframe: true
})
this.mesh = new Three.Mesh(this.geometry, material)
this.mesh.receiveShadow = true
this.mesh.castShadow = true
this.mesh.position.set(0, 0, 0)
this.mesh.rotation.x = -Math.PI / 3
this.mesh.rotation.z = -Math.PI / 4
this.scene.add(this.mesh)
},
addSpotlight: function(color) {
const light = new Three.SpotLight(color, 2, 1000)
light.position.set(0, 0, 30)
this.scene.add(light)
},
addAmbientLight: function() {
const light = new Three.AmbientLight('#fff', 0.5)
this.scene.add(light)
},
addjustVertices: function() {
for (let i = 0; i < this.geometry.vertices.length; i++) {
const vertex = this.geometry.vertices[i]
const x = vertex.x / 4
const y = vertex.y / 6
vertex.z = this.noise.noise2D(x, y + this.factor)
}
this.factor += 0.007
this.geometry.verticesNeedUpdate = true
this.geometry.computeVertexNormals()
},
animate: function() {
requestAnimationFrame(this.animate);
this.addjustVertices();
this.camera.updateProjectionMatrix();
this.renderer.render(this.scene, this.camera);
}
},
mounted() {
this.init();
}
}
</script>
它可以工作,就像它應該在波浪動畫中一樣,但它要慢得多。 不確定這是否是由於 Vue.js 或者我是如何設置的。 非常感謝任何建議!
發生這種情況是因為 Vue 在后台使每個附加到實例的組件都具有反應性。 深度反應。 打開開發工具並查看您的 memory 足跡,當我在我的機器上運行您的代碼片段時,它約為 300mb,而 codepen 示例約為 20mb。
當您使用console.log(this.scene)
時,您看到的是允許 Vue 跟蹤對象的 getter/setter。
下面的代碼片段將 three.js 對象從 Vue 數據 object 中提取出來,並將它們附加到vue 靜態object 中。 此插件允許您將某些變量設置為非反應性。
<template>
<div id="container" style="width:100%; height:100vh;"></div>
</template>
<script>
import * as Three from 'three'
import SimplexNoise from'simplex-noise'
export default {
name: 'ThreeTest',
static(){
return {
scene: new Three.Scene(),
camera: null,
renderer: Three.WebGLRenderer,
mesh: new Three.Mesh,
noise: SimplexNoise,
factor:0
}
},
mounted() {
this.init();
},
methods: {
init: function() {
this.createScene();
this.createCamera();
this.createShape();
this.addSpotlight('#fdffab');
this.addAmbientLight();
this.animate();
window.addEventListener('resize', this.onResize())
},
onResize: function() {
let container = document.getElementById('container');
this.renderer.setSize(container.clientWidth, container.clientHeight);
this.camera.aspect = container.clientWidth / container.clientHeight;
this.camera.updateProjectionMatrix();
},
createScene: function() {
console.log("TCL: this.$options.bigHairyHorseNuts ",this.bigHairyHorseNuts)
this.renderer = new Three.WebGLRenderer({
antialias: true,
alpha: true
});
let container = document.getElementById('container');
this.renderer.setSize(container.clientWidth, container.clientHeight);
this.renderer.setPixelRatio(window.devicePixelRatio);
this.renderer.setClearColor(new Three.Color('#fff'));
//this.render.shadowMap.type = Three.PCFSoftShadowMap;
this.noise = new SimplexNoise()
container.appendChild(this.renderer.domElement);
},
createCamera: function() {
this.camera = new Three.PerspectiveCamera(20, container.clientWidth/container.clientHeight, 1, 1000);
this.camera.position.set(0, 0, 20);
},
createShape: function() {
const seg = 100
this.geometry = new Three.PlaneGeometry(5, 8, seg, seg)
const material = new Three.MeshPhysicalMaterial({
color: '#da0463',
metalness: 0.6,
emissive: '#000',
side: Three.DoubleSide,
wireframe: true
})
this.mesh = new Three.Mesh(this.geometry, material)
this.mesh.receiveShadow = true
this.mesh.castShadow = true
this.mesh.position.set(0, 0, 0)
this.mesh.rotation.x = -Math.PI / 3
this.mesh.rotation.z = -Math.PI / 4
this.scene.add(this.mesh)
},
addSpotlight: function(color) {
const light = new Three.SpotLight(color, 2, 1000)
light.position.set(0, 0, 30)
this.scene.add(light)
},
addAmbientLight: function() {
const light = new Three.AmbientLight('#fff', 0.5)
this.scene.add(light)
},
addjustVertices: function() {
for (let i = 0; i < this.geometry.vertices.length; i++) {
const vertex = this.geometry.vertices[i]
const x = vertex.x / 4
const y = vertex.y / 6
vertex.z = this.noise.noise2D(x, y + this.factor)
}
this.factor += 0.007
this.geometry.verticesNeedUpdate = true
this.geometry.computeVertexNormals()
},
animate: function() {
requestAnimationFrame(this.animate);
this.addjustVertices();
this.camera.updateProjectionMatrix();
this.renderer.render(this.scene, this.camera);
}
}
}
</script>
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.