From 3641f02011ea6e3e8c3733736cbf69ccc4057d1e Mon Sep 17 00:00:00 2001 From: Kevin Levron Date: Wed, 30 Sep 2020 23:57:20 +0200 Subject: [PATCH] update noisy components --- src/components/noisy/NoisyImage.js | 2 +- src/components/noisy/NoisyPlane.js | 10 ++-- src/components/noisy/NoisySphere.js | 11 ++--- src/components/noisy/NoisyText.js | 74 ++++++++--------------------- 4 files changed, 29 insertions(+), 68 deletions(-) diff --git a/src/components/noisy/NoisyImage.js b/src/components/noisy/NoisyImage.js index 7023eb6..da8e8d3 100644 --- a/src/components/noisy/NoisyImage.js +++ b/src/components/noisy/NoisyImage.js @@ -27,7 +27,7 @@ export default { uTime, uNoiseCoef, uZCoef, uDispCoef, }; }, - created() { + mounted() { const startTime = Date.now(); this.three.onBeforeRender(() => { this.uTime.value = (Date.now() - startTime) * this.timeCoef; diff --git a/src/components/noisy/NoisyPlane.js b/src/components/noisy/NoisyPlane.js index 5530732..6c19647 100644 --- a/src/components/noisy/NoisyPlane.js +++ b/src/components/noisy/NoisyPlane.js @@ -1,4 +1,3 @@ -import { MeshLambertMaterial } from 'three'; import { watch } from 'vue'; import Plane from '../../meshes/Plane.js'; import snoise3 from '../../glsl/snoise3.glsl.js'; @@ -22,16 +21,15 @@ export default { uTime, uNoiseCoef, uZCoef, }; }, - created() { - this.createMaterial(); + mounted() { + this.updateMaterial(); const startTime = Date.now(); this.three.onBeforeRender(() => { this.uTime.value = (Date.now() - startTime) * this.timeCoef; }); }, methods: { - createMaterial() { - this.material = new MeshLambertMaterial({}); + updateMaterial() { this.material.onBeforeCompile = (shader) => { shader.uniforms.uTime = this.uTime; shader.uniforms.uNoiseCoef = this.uNoiseCoef; @@ -53,9 +51,9 @@ export default { transformed.z += vNoise * uZCoef; ` ); - this.materialShader = shader; }; + this.material.needsupdate = true; }, }, __hmrId: 'NoisyPlane', diff --git a/src/components/noisy/NoisySphere.js b/src/components/noisy/NoisySphere.js index 00c5b5e..0f3d3de 100644 --- a/src/components/noisy/NoisySphere.js +++ b/src/components/noisy/NoisySphere.js @@ -1,4 +1,3 @@ -import { MeshPhysicalMaterial } from 'three'; import { watch } from 'vue'; import Sphere from '../../meshes/Sphere.js'; import snoise4 from '../../glsl/snoise4.glsl.js'; @@ -24,9 +23,8 @@ export default { uTime, uNoiseCoef, uDispCoef, }; }, - created() { - this.createGeometry(); - this.createMaterial(); + mounted() { + this.updateMaterial(); const startTime = Date.now(); this.three.onBeforeRender(() => { @@ -34,8 +32,7 @@ export default { }); }, methods: { - createMaterial() { - this.material = new MeshPhysicalMaterial(); + updateMaterial() { this.material.onBeforeCompile = (shader) => { shader.uniforms.uTime = this.uTime; shader.uniforms.uNoiseCoef = this.uNoiseCoef; @@ -57,9 +54,9 @@ export default { transformed += normalize(position) * vNoise * uDispCoef; ` ); - this.materialShader = shader; }; + this.material.needsupdate = true; }, }, __hmrId: 'NoisySphere', diff --git a/src/components/noisy/NoisyText.js b/src/components/noisy/NoisyText.js index 45c9308..bdc74a4 100644 --- a/src/components/noisy/NoisyText.js +++ b/src/components/noisy/NoisyText.js @@ -1,54 +1,37 @@ -import { FontLoader, MeshPhongMaterial, MeshStandardMaterial, TextBufferGeometry } from 'three'; import { watch } from 'vue'; -import Mesh from '../../meshes/Mesh.js'; -import TextProps from '../../meshes/TextProps.js'; +import Text from '../../meshes/Text.js'; import snoise2 from '../../glsl/snoise2.glsl.js'; export default { - extends: Mesh, + extends: Text, props: { - ...TextProps, - 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 - const watchProps = [ - 'text', 'size', 'height', 'curveSegments', - 'bevelEnabled', 'bevelThickness', 'bevelSize', 'bevelOffset', 'bevelSegments', - 'align', - ]; - watchProps.forEach(p => { - watch(() => this[p], () => { - if (this.font) this.refreshGeometry(); - }); - }); - + setup(props) { // uniforms - this.uTime = { value: 0 }; - this.uNoiseCoef = { value: this.noiseCoef }; - watch(() => this.noiseCoef, (value) => { this.uNoiseCoef.value = value; }); - this.uZCoef = { value: this.zCoef }; - watch(() => this.zCoef, (value) => { this.uZCoef.value = value; }); + const uTime = { value: 0 }; + const uNoiseCoef = { value: props.noiseCoef }; + watch(() => props.noiseCoef, (value) => { uNoiseCoef.value = value; }); + const uZCoef = { value: props.zCoef }; + watch(() => props.zCoef, (value) => { uZCoef.value = value; }); - const loader = new FontLoader(); - loader.load(this.fontSrc, (font) => { - this.font = font; - this.createGeometry(); - this.createMaterial(); - this.initMesh(); + return { + uTime, uNoiseCoef, uZCoef, + }; + }, + mounted() { + this.material = this.three.materials[this.materialId]; + this.updateMaterial(); - const startTime = Date.now(); - this.three.onBeforeRender(() => { - this.uTime.value = (Date.now() - startTime) * this.timeCoef; - }); + const startTime = Date.now(); + this.three.onBeforeRender(() => { + this.uTime.value = (Date.now() - startTime) * this.timeCoef; }); }, methods: { - createMaterial() { - this.material = new MeshPhongMaterial({ color: this.color }); + updateMaterial() { this.material.onBeforeCompile = (shader) => { shader.uniforms.uTime = this.uTime; shader.uniforms.uNoiseCoef = this.uNoiseCoef; @@ -72,24 +55,7 @@ export default { ); this.materialShader = shader; }; - }, - createGeometry() { - this.geometry = new TextBufferGeometry(this.text, { - font: this.font, - size: this.size, - height: this.height, - depth: this.depth, - curveSegments: this.curveSegments, - bevelEnabled: this.bevelEnabled, - bevelThickness: this.bevelThickness, - bevelSize: this.bevelSize, - bevelOffset: this.bevelOffset, - bevelSegments: this.bevelSegments, - }); - - if (this.align === 'center') { - this.geometry.center(); - } + this.material.needsupdate = true; }, }, __hmrId: 'NoisyText',