I attempted to replicate the impressive wave simulation from this CodePen link: https://codepen.io/cheekymonkey/pen/vMvYNV, using Vue.js. However, the animation seems to be running significantly slower when implemented in Vue.js.
In my effort to recreate it, I ensured that all functions were converted into Vue.js methods and all necessary variables were included in the data section of the component.
<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)
},
adjustVertices: 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.adjustVertices();
this.camera.updateProjectionMatrix();
this.renderer.render(this.scene, this.camera);
}
},
mounted() {
this.init();
}
}
</script>
While the wave animation does work correctly, it noticeably runs slower. I'm not sure if this sluggish performance is due to Vue.js or an issue with how I've configured it. Any guidance would be greatly appreciated!