diff --git a/src/components/NoisyText.js b/src/components/NoisyText.js index 9973a15..09ca5f8 100644 --- a/src/components/NoisyText.js +++ b/src/components/NoisyText.js @@ -8,10 +8,10 @@ export default { extends: Mesh, props: { ...TextProps, - color: { - type: [String, Number], - default: 0xffffff, - }, + color: { type: [String, Number], default: 0xffffff }, + timeCoef: { type: Number, default: 0.001 }, + noiseCoef: { type: Number, default: 0.015 }, + zCoef: { type: Number, default: 10 }, }, created() { // add watchers @@ -26,8 +26,14 @@ export default { }); }); - // uniform - this.time = { value: 0 }; + // uniforms + this.uTime = { value: 0 }; + + this.uNoiseCoef = { value: this.noiseCoef }; + watch(() => this.noiseCoef, () => { this.uNoiseCoef.value = this.noiseCoef; }); + + this.uZCoef = { value: this.zCoef }; + watch(() => this.zCoef, () => { this.uZCoef.value = this.zCoef; }); const loader = new FontLoader(); loader.load(this.fontSrc, (font) => { @@ -38,28 +44,32 @@ export default { const startTime = Date.now(); this.three.onBeforeRender(() => { - this.time.value = (Date.now() - startTime) / 1000; + this.uTime.value = (Date.now() - startTime) * this.timeCoef; }); }); }, methods: { createMaterial() { - this.material = new MeshStandardMaterial({ color: this.color }); + this.material = new MeshStandardMaterial({ color: this.color, metalness: 0.8, roughness: 0.5 }); this.material.onBeforeCompile = (shader) => { - shader.uniforms.time = this.time; + shader.uniforms.uTime = this.uTime; + shader.uniforms.uNoiseCoef = this.uNoiseCoef; + shader.uniforms.uZCoef = this.uZCoef; shader.vertexShader = ` - uniform float time; + uniform float uTime; + uniform float uNoiseCoef; + uniform float uZCoef; ${snoise2} ` + shader.vertexShader; shader.vertexShader = shader.vertexShader.replace( '#include ', - ` - vec3 p = vec3(position * 0.01); - p.x += time; + ` + vec3 p = vec3(position * uNoiseCoef); + p.x += uTime; float noise = snoise(p.xy); vec3 transformed = vec3(position); - transformed.z += noise * 10.0; + transformed.z += noise * uZCoef; ` ); this.materialShader = shader; diff --git a/src/meshes/Mesh.js b/src/meshes/Mesh.js index 88b9a75..c9f28a1 100644 --- a/src/meshes/Mesh.js +++ b/src/meshes/Mesh.js @@ -24,8 +24,9 @@ export default { if (this.geometry && !this.mesh) this.initMesh(); }, unmounted() { - if (this.geometry) this.geometry.dispose(); if (this.mesh) this.scene.remove(this.mesh); + if (this.geometry) this.geometry.dispose(); + if (this.material && !this.materialId) this.material.dispose(); }, methods: { initMesh() {