From 503fdbfd78857eb1ab888ba7be11f4d93e7b4964 Mon Sep 17 00:00:00 2001 From: Kevin Levron Date: Wed, 30 Sep 2020 17:53:36 +0200 Subject: [PATCH] add noisy components --- src/components/index.js | 4 +- src/components/noisy/NoisyImage.js | 85 +++++++++++++++++++ src/components/noisy/NoisyPlane.js | 62 ++++++++++++++ src/components/{ => noisy}/NoisyText.js | 17 ++-- src/glsl/snoise2.glsl.js | 108 ++++++++++++------------ src/glsl/snoise3.glsl.js | 86 +++++++++++++++++++ src/glsl/snoise4.glsl.js | 108 ++++++++++++++++++++++++ src/meshes/Image.js | 69 ++++++++++++--- 8 files changed, 462 insertions(+), 77 deletions(-) create mode 100644 src/components/noisy/NoisyImage.js create mode 100644 src/components/noisy/NoisyPlane.js rename src/components/{ => noisy}/NoisyText.js (83%) create mode 100644 src/glsl/snoise3.glsl.js create mode 100644 src/glsl/snoise4.glsl.js diff --git a/src/components/index.js b/src/components/index.js index cd3f278..39e8c1c 100644 --- a/src/components/index.js +++ b/src/components/index.js @@ -1,4 +1,6 @@ -export { default as NoisyText } from './NoisyText.js'; +export { default as NoisyImage } from './noisy/NoisyImage.js'; +export { default as NoisyPlane } from './noisy/NoisyPlane.js'; +export { default as NoisyText } from './noisy/NoisyText.js'; export { default as Slider1 } from './sliders/Slider1.vue'; diff --git a/src/components/noisy/NoisyImage.js b/src/components/noisy/NoisyImage.js new file mode 100644 index 0000000..7023eb6 --- /dev/null +++ b/src/components/noisy/NoisyImage.js @@ -0,0 +1,85 @@ +import { DoubleSide, MeshBasicMaterial, PlaneBufferGeometry } from 'three'; +import { watch } from 'vue'; +import Image from '../../meshes/Image.js'; +import snoise2 from '../../glsl/snoise2.glsl.js'; + +export default { + extends: Image, + props: { + widthSegments: { type: Number, default: 20 }, + heightSegments: { type: Number, default: 20 }, + timeCoef: { type: Number, default: 0.001 }, + noiseCoef: { type: Number, default: 1 }, + zCoef: { type: Number, default: 5 }, + dispCoef: { type: Number, default: 0.05 }, + }, + setup(props) { + // uniforms + 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 uDispCoef = { value: props.dispCoef }; + watch(() => props.dispCoef, (value) => { uDispCoef.value = value; }); + + return { + uTime, uNoiseCoef, uZCoef, uDispCoef, + }; + }, + created() { + const startTime = Date.now(); + this.three.onBeforeRender(() => { + this.uTime.value = (Date.now() - startTime) * this.timeCoef; + }); + }, + methods: { + createGeometry() { + this.geometry = new PlaneBufferGeometry(1, 1, this.widthSegments, this.heightSegments); + }, + createMaterial() { + this.material = new MeshBasicMaterial({ side: DoubleSide, map: this.loadTexture() }); + this.material.onBeforeCompile = (shader) => { + shader.uniforms.uTime = this.uTime; + shader.uniforms.uNoiseCoef = this.uNoiseCoef; + shader.uniforms.uZCoef = this.uZCoef; + shader.uniforms.uDispCoef = this.uDispCoef; + shader.vertexShader = ` + uniform float uTime; + uniform float uNoiseCoef; + uniform float uZCoef; + varying float vNoise; + ${snoise2} + ` + shader.vertexShader; + + shader.vertexShader = shader.vertexShader.replace( + '#include ', + ` + vec3 p = vec3(position * uNoiseCoef); + p.x += uTime; + vNoise = snoise(p.xy); + vec3 transformed = vec3(position); + transformed.z += vNoise * uZCoef; + ` + ); + + shader.fragmentShader = ` + uniform float uDispCoef; + varying float vNoise; + ` + shader.fragmentShader; + + shader.fragmentShader = shader.fragmentShader.replace( + '#include ', + ` + vec4 texelColor = texture2D(map, vUv); + vec4 dispTexel = texture2D(map, vUv + vec2(vNoise * uDispCoef, 0)); + texelColor.r = dispTexel.r; + diffuseColor = texelColor; + ` + ); + this.materialShader = shader; + }; + }, + }, + __hmrId: 'NoisyImage', +}; diff --git a/src/components/noisy/NoisyPlane.js b/src/components/noisy/NoisyPlane.js new file mode 100644 index 0000000..5530732 --- /dev/null +++ b/src/components/noisy/NoisyPlane.js @@ -0,0 +1,62 @@ +import { MeshLambertMaterial } from 'three'; +import { watch } from 'vue'; +import Plane from '../../meshes/Plane.js'; +import snoise3 from '../../glsl/snoise3.glsl.js'; + +export default { + extends: Plane, + props: { + timeCoef: { type: Number, default: 0.001 }, + noiseCoef: { type: Number, default: 1 }, + zCoef: { type: Number, default: 5 }, + }, + setup(props) { + // uniforms + 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; }); + + return { + uTime, uNoiseCoef, uZCoef, + }; + }, + created() { + this.createMaterial(); + const startTime = Date.now(); + this.three.onBeforeRender(() => { + this.uTime.value = (Date.now() - startTime) * this.timeCoef; + }); + }, + methods: { + createMaterial() { + this.material = new MeshLambertMaterial({}); + this.material.onBeforeCompile = (shader) => { + shader.uniforms.uTime = this.uTime; + shader.uniforms.uNoiseCoef = this.uNoiseCoef; + shader.uniforms.uZCoef = this.uZCoef; + shader.vertexShader = ` + uniform float uTime; + uniform float uNoiseCoef; + uniform float uZCoef; + varying float vNoise; + ${snoise3} + ` + shader.vertexShader; + + shader.vertexShader = shader.vertexShader.replace( + '#include ', + ` + vec3 p = vec3(position * uNoiseCoef); + vNoise = snoise(vec3(p.x, p.y, uTime)); + vec3 transformed = vec3(position); + transformed.z += vNoise * uZCoef; + ` + ); + + this.materialShader = shader; + }; + }, + }, + __hmrId: 'NoisyPlane', +}; diff --git a/src/components/NoisyText.js b/src/components/noisy/NoisyText.js similarity index 83% rename from src/components/NoisyText.js rename to src/components/noisy/NoisyText.js index 09ca5f8..45c9308 100644 --- a/src/components/NoisyText.js +++ b/src/components/noisy/NoisyText.js @@ -1,8 +1,8 @@ -import { FontLoader, MeshStandardMaterial, TextBufferGeometry } from 'three'; +import { FontLoader, MeshPhongMaterial, MeshStandardMaterial, TextBufferGeometry } from 'three'; import { watch } from 'vue'; -import Mesh from '../meshes/Mesh.js'; -import TextProps from '../meshes/TextProps.js'; -import snoise2 from '../glsl/snoise2.glsl.js'; +import Mesh from '../../meshes/Mesh.js'; +import TextProps from '../../meshes/TextProps.js'; +import snoise2 from '../../glsl/snoise2.glsl.js'; export default { extends: Mesh, @@ -28,12 +28,10 @@ export default { // uniforms this.uTime = { value: 0 }; - this.uNoiseCoef = { value: this.noiseCoef }; - watch(() => this.noiseCoef, () => { this.uNoiseCoef.value = this.noiseCoef; }); - + watch(() => this.noiseCoef, (value) => { this.uNoiseCoef.value = value; }); this.uZCoef = { value: this.zCoef }; - watch(() => this.zCoef, () => { this.uZCoef.value = this.zCoef; }); + watch(() => this.zCoef, (value) => { this.uZCoef.value = value; }); const loader = new FontLoader(); loader.load(this.fontSrc, (font) => { @@ -50,7 +48,7 @@ export default { }, methods: { createMaterial() { - this.material = new MeshStandardMaterial({ color: this.color, metalness: 0.8, roughness: 0.5 }); + this.material = new MeshPhongMaterial({ color: this.color }); this.material.onBeforeCompile = (shader) => { shader.uniforms.uTime = this.uTime; shader.uniforms.uNoiseCoef = this.uNoiseCoef; @@ -94,4 +92,5 @@ export default { } }, }, + __hmrId: 'NoisyText', }; diff --git a/src/glsl/snoise2.glsl.js b/src/glsl/snoise2.glsl.js index 1fa726b..d7bf255 100644 --- a/src/glsl/snoise2.glsl.js +++ b/src/glsl/snoise2.glsl.js @@ -1,67 +1,67 @@ export default ` - // - // Description : Array and textureless GLSL 2D simplex noise function. - // Author : Ian McEwan, Ashima Arts. - // Maintainer : ijm - // Lastmod : 20110822 (ijm) - // License : Copyright (C) 2011 Ashima Arts. All rights reserved. - // Distributed under the MIT License. See LICENSE file. - // https://github.com/ashima/webgl-noise - // +// +// Description : Array and textureless GLSL 2D simplex noise function. +// Author : Ian McEwan, Ashima Arts. +// Maintainer : ijm +// Lastmod : 20110822 (ijm) +// License : Copyright (C) 2011 Ashima Arts. All rights reserved. +// Distributed under the MIT License. See LICENSE file. +// https://github.com/ashima/webgl-noise +// - vec3 mod289(vec3 x) { - return x - floor(x * (1.0 / 289.0)) * 289.0; - } +vec3 mod289(vec3 x) { + return x - floor(x * (1.0 / 289.0)) * 289.0; +} - vec2 mod289(vec2 x) { - return x - floor(x * (1.0 / 289.0)) * 289.0; - } +vec2 mod289(vec2 x) { + return x - floor(x * (1.0 / 289.0)) * 289.0; +} - vec3 permute(vec3 x) { - return mod289(((x*34.0)+1.0)*x); - } +vec3 permute(vec3 x) { + return mod289(((x*34.0)+1.0)*x); +} - float snoise(vec2 v) - { - const vec4 C = vec4(0.211324865405187, // (3.0-sqrt(3.0))/6.0 - 0.366025403784439, // 0.5*(sqrt(3.0)-1.0) - -0.577350269189626, // -1.0 + 2.0 * C.x - 0.024390243902439); // 1.0 / 41.0 - // First corner - vec2 i = floor(v + dot(v, C.yy) ); - vec2 x0 = v - i + dot(i, C.xx); +float snoise(vec2 v) +{ + const vec4 C = vec4(0.211324865405187, // (3.0-sqrt(3.0))/6.0 + 0.366025403784439, // 0.5*(sqrt(3.0)-1.0) + -0.577350269189626, // -1.0 + 2.0 * C.x + 0.024390243902439); // 1.0 / 41.0 + // First corner + vec2 i = floor(v + dot(v, C.yy) ); + vec2 x0 = v - i + dot(i, C.xx); - // Other corners - vec2 i1; - i1 = (x0.x > x0.y) ? vec2(1.0, 0.0) : vec2(0.0, 1.0); - vec4 x12 = x0.xyxy + C.xxzz; - x12.xy -= i1; + // Other corners + vec2 i1; + i1 = (x0.x > x0.y) ? vec2(1.0, 0.0) : vec2(0.0, 1.0); + vec4 x12 = x0.xyxy + C.xxzz; + x12.xy -= i1; - // Permutations - i = mod289(i); // Avoid truncation effects in permutation - vec3 p = permute( permute( i.y + vec3(0.0, i1.y, 1.0 )) - + i.x + vec3(0.0, i1.x, 1.0 )); + // Permutations + i = mod289(i); // Avoid truncation effects in permutation + vec3 p = permute( permute( i.y + vec3(0.0, i1.y, 1.0 )) + + i.x + vec3(0.0, i1.x, 1.0 )); - vec3 m = max(0.5 - vec3(dot(x0,x0), dot(x12.xy,x12.xy), dot(x12.zw,x12.zw)), 0.0); - m = m*m ; - m = m*m ; + vec3 m = max(0.5 - vec3(dot(x0,x0), dot(x12.xy,x12.xy), dot(x12.zw,x12.zw)), 0.0); + m = m*m ; + m = m*m ; - // Gradients: 41 points uniformly over a line, mapped onto a diamond. - // The ring size 17*17 = 289 is close to a multiple of 41 (41*7 = 287) + // Gradients: 41 points uniformly over a line, mapped onto a diamond. + // The ring size 17*17 = 289 is close to a multiple of 41 (41*7 = 287) - vec3 x = 2.0 * fract(p * C.www) - 1.0; - vec3 h = abs(x) - 0.5; - vec3 ox = floor(x + 0.5); - vec3 a0 = x - ox; + vec3 x = 2.0 * fract(p * C.www) - 1.0; + vec3 h = abs(x) - 0.5; + vec3 ox = floor(x + 0.5); + vec3 a0 = x - ox; - // Normalise gradients implicitly by scaling m - // Approximation of: m *= inversesqrt( a0*a0 + h*h ); - m *= 1.79284291400159 - 0.85373472095314 * ( a0*a0 + h*h ); + // Normalise gradients implicitly by scaling m + // Approximation of: m *= inversesqrt( a0*a0 + h*h ); + m *= 1.79284291400159 - 0.85373472095314 * ( a0*a0 + h*h ); - // Compute final noise value at P - vec3 g; - g.x = a0.x * x0.x + h.x * x0.y; - g.yz = a0.yz * x12.xz + h.yz * x12.yw; - return 130.0 * dot(m, g); - } + // Compute final noise value at P + vec3 g; + g.x = a0.x * x0.x + h.x * x0.y; + g.yz = a0.yz * x12.xz + h.yz * x12.yw; + return 130.0 * dot(m, g); +} `; diff --git a/src/glsl/snoise3.glsl.js b/src/glsl/snoise3.glsl.js new file mode 100644 index 0000000..8546e6d --- /dev/null +++ b/src/glsl/snoise3.glsl.js @@ -0,0 +1,86 @@ +export default ` +// +// Description : Array and textureless GLSL 2D/3D/4D simplex +// noise functions. +// Author : Ian McEwan, Ashima Arts. +// Maintainer : ijm +// Lastmod : 20110822 (ijm) +// License : Copyright (C) 2011 Ashima Arts. All rights reserved. +// Distributed under the MIT License. See LICENSE file. +// https://github.com/ashima/webgl-noise +// + +vec3 mod289(vec3 x) { return x - floor(x * (1.0 / 289.0)) * 289.0; } +vec4 mod289(vec4 x) { return x - floor(x * (1.0 / 289.0)) * 289.0; } +vec4 permute(vec4 x) { return mod289(((x*34.0)+1.0)*x); } +vec4 taylorInvSqrt(vec4 r) { return 1.79284291400159 - 0.85373472095314 * r; } + +float snoise(vec3 v) +{ + const vec2 C = vec2(1.0/6.0, 1.0/3.0) ; + const vec4 D = vec4(0.0, 0.5, 1.0, 2.0); + + // First corner + vec3 i = floor(v + dot(v, C.yyy) ); + vec3 x0 = v - i + dot(i, C.xxx) ; + + // Other corners + vec3 g = step(x0.yzx, x0.xyz); + vec3 l = 1.0 - g; + vec3 i1 = min( g.xyz, l.zxy ); + vec3 i2 = max( g.xyz, l.zxy ); + + vec3 x1 = x0 - i1 + C.xxx; + vec3 x2 = x0 - i2 + C.yyy; // 2.0*C.x = 1/3 = C.y + vec3 x3 = x0 - D.yyy; // -1.0+3.0*C.x = -0.5 = -D.y + + // Permutations + i = mod289(i); + vec4 p = permute( permute( permute( + i.z + vec4(0.0, i1.z, i2.z, 1.0 )) + + i.y + vec4(0.0, i1.y, i2.y, 1.0 )) + + i.x + vec4(0.0, i1.x, i2.x, 1.0 )); + + // Gradients: 7x7 points over a square, mapped onto an octahedron. + // The ring size 17*17 = 289 is close to a multiple of 49 (49*6 = 294) + float n_ = 0.142857142857; // 1.0/7.0 + vec3 ns = n_ * D.wyz - D.xzx; + + vec4 j = p - 49.0 * floor(p * ns.z * ns.z); // mod(p,7*7) + + vec4 x_ = floor(j * ns.z); + vec4 y_ = floor(j - 7.0 * x_ ); // mod(j,N) + + vec4 x = x_ *ns.x + ns.yyyy; + vec4 y = y_ *ns.x + ns.yyyy; + vec4 h = 1.0 - abs(x) - abs(y); + + vec4 b0 = vec4( x.xy, y.xy ); + vec4 b1 = vec4( x.zw, y.zw ); + + vec4 s0 = floor(b0)*2.0 + 1.0; + vec4 s1 = floor(b1)*2.0 + 1.0; + vec4 sh = -step(h, vec4(0.0)); + + vec4 a0 = b0.xzyw + s0.xzyw*sh.xxyy ; + vec4 a1 = b1.xzyw + s1.xzyw*sh.zzww ; + + vec3 p0 = vec3(a0.xy,h.x); + vec3 p1 = vec3(a0.zw,h.y); + vec3 p2 = vec3(a1.xy,h.z); + vec3 p3 = vec3(a1.zw,h.w); + + // Normalise gradients + vec4 norm = taylorInvSqrt(vec4(dot(p0,p0), dot(p1,p1), dot(p2, p2), dot(p3,p3))); + p0 *= norm.x; + p1 *= norm.y; + p2 *= norm.z; + p3 *= norm.w; + + // Mix final noise value + vec4 m = max(0.6 - vec4(dot(x0,x0), dot(x1,x1), dot(x2,x2), dot(x3,x3)), 0.0); + m = m * m; + return 42.0 * dot( m*m, vec4( dot(p0,x0), dot(p1,x1), + dot(p2,x2), dot(p3,x3) ) ); +} +`; diff --git a/src/glsl/snoise4.glsl.js b/src/glsl/snoise4.glsl.js new file mode 100644 index 0000000..1a07a6d --- /dev/null +++ b/src/glsl/snoise4.glsl.js @@ -0,0 +1,108 @@ +export default ` +// +// Description : Array and textureless GLSL 2D/3D/4D simplex +// noise functions. +// Author : Ian McEwan, Ashima Arts. +// Maintainer : ijm +// Lastmod : 20110822 (ijm) +// License : Copyright (C) 2011 Ashima Arts. All rights reserved. +// Distributed under the MIT License. See LICENSE file. +// https://github.com/ashima/webgl-noise +// + +vec4 mod289(vec4 x) { return x - floor(x * (1.0 / 289.0)) * 289.0; } +float mod289(float x) { return x - floor(x * (1.0 / 289.0)) * 289.0; } +vec4 permute(vec4 x) { return mod289(((x*34.0)+1.0)*x); } +float permute(float x) { return mod289(((x*34.0)+1.0)*x); } +vec4 taylorInvSqrt(vec4 r) { return 1.79284291400159 - 0.85373472095314 * r; } +float taylorInvSqrt(float r) { return 1.79284291400159 - 0.85373472095314 * r; } + +vec4 grad4(float j, vec4 ip) +{ + const vec4 ones = vec4(1.0, 1.0, 1.0, -1.0); + vec4 p,s; + + p.xyz = floor( fract (vec3(j) * ip.xyz) * 7.0) * ip.z - 1.0; + p.w = 1.5 - dot(abs(p.xyz), ones.xyz); + s = vec4(lessThan(p, vec4(0.0))); + p.xyz = p.xyz + (s.xyz*2.0 - 1.0) * s.www; + + return p; +} + +// (sqrt(5) - 1)/4 = F4, used once below +#define F4 0.309016994374947451 + +float snoise(vec4 v) +{ + const vec4 C = vec4( 0.138196601125011, // (5 - sqrt(5))/20 G4 + 0.276393202250021, // 2 * G4 + 0.414589803375032, // 3 * G4 + -0.447213595499958); // -1 + 4 * G4 + + // First corner + vec4 i = floor(v + dot(v, vec4(F4)) ); + vec4 x0 = v - i + dot(i, C.xxxx); + + // Other corners + + // Rank sorting originally contributed by Bill Licea-Kane, AMD (formerly ATI) + vec4 i0; + vec3 isX = step( x0.yzw, x0.xxx ); + vec3 isYZ = step( x0.zww, x0.yyz ); + // i0.x = dot( isX, vec3( 1.0 ) ); + i0.x = isX.x + isX.y + isX.z; + i0.yzw = 1.0 - isX; + // i0.y += dot( isYZ.xy, vec2( 1.0 ) ); + i0.y += isYZ.x + isYZ.y; + i0.zw += 1.0 - isYZ.xy; + i0.z += isYZ.z; + i0.w += 1.0 - isYZ.z; + + // i0 now contains the unique values 0,1,2,3 in each channel + vec4 i3 = clamp( i0, 0.0, 1.0 ); + vec4 i2 = clamp( i0-1.0, 0.0, 1.0 ); + vec4 i1 = clamp( i0-2.0, 0.0, 1.0 ); + + vec4 x1 = x0 - i1 + C.xxxx; + vec4 x2 = x0 - i2 + C.yyyy; + vec4 x3 = x0 - i3 + C.zzzz; + vec4 x4 = x0 + C.wwww; + + // Permutations + i = mod289(i); + float j0 = permute( permute( permute( permute(i.w) + i.z) + i.y) + i.x); + vec4 j1 = permute( permute( permute( permute ( + i.w + vec4(i1.w, i2.w, i3.w, 1.0 )) + + i.z + vec4(i1.z, i2.z, i3.z, 1.0 )) + + i.y + vec4(i1.y, i2.y, i3.y, 1.0 )) + + i.x + vec4(i1.x, i2.x, i3.x, 1.0 )); + + // Gradients: 7x7x6 points over a cube, mapped onto a 4-cross polytope + // 7*7*6 = 294, which is close to the ring size 17*17 = 289. + vec4 ip = vec4(1.0/294.0, 1.0/49.0, 1.0/7.0, 0.0) ; + + vec4 p0 = grad4(j0, ip); + vec4 p1 = grad4(j1.x, ip); + vec4 p2 = grad4(j1.y, ip); + vec4 p3 = grad4(j1.z, ip); + vec4 p4 = grad4(j1.w, ip); + + // Normalise gradients + vec4 norm = taylorInvSqrt(vec4(dot(p0,p0), dot(p1,p1), dot(p2, p2), dot(p3,p3))); + p0 *= norm.x; + p1 *= norm.y; + p2 *= norm.z; + p3 *= norm.w; + p4 *= taylorInvSqrt(dot(p4,p4)); + + // Mix contributions from the five corners + vec3 m0 = max(0.6 - vec3(dot(x0,x0), dot(x1,x1), dot(x2,x2)), 0.0); + vec2 m1 = max(0.6 - vec2(dot(x3,x3), dot(x4,x4) ), 0.0); + m0 = m0 * m0; + m1 = m1 * m1; + return 49.0 * ( dot(m0*m0, vec3( dot( p0, x0 ), dot( p1, x1 ), dot( p2, x2 ))) + + dot(m1*m1, vec2( dot( p3, x3 ), dot( p4, x4 ) ) ) ) ; + +} +`; diff --git a/src/meshes/Image.js b/src/meshes/Image.js index 1d37113..f1cb9c1 100644 --- a/src/meshes/Image.js +++ b/src/meshes/Image.js @@ -1,26 +1,69 @@ import { DoubleSide, MeshBasicMaterial, PlaneBufferGeometry, TextureLoader } from 'three'; +import { watch } from 'vue'; import Mesh from './Mesh.js'; export default { + emits: ['loaded'], extends: Mesh, props: { src: String, - width: { - type: Number, - default: 1, - }, - height: { - type: Number, - default: 1, - }, + width: Number, + height: Number, + keepSize: Boolean, }, created() { - this.geometry = new PlaneBufferGeometry(this.width, this.height, 1, 1); - this.material = new MeshBasicMaterial({ map: new TextureLoader().load(this.src), side: DoubleSide }); + this.createGeometry(); + this.createMaterial(); + this.initMesh(); + + watch(() => this.src, this.refreshTexture); + + ['width', 'height'].forEach(p => { + watch(() => this[p], this.resize); + }); + + if (this.keepSize) this.three.onAfterResize(this.resize); }, - unmounted() { - // this material is not mounted, it won't be auto dispose - this.material.dispose(); + methods: { + createGeometry() { + this.geometry = new PlaneBufferGeometry(1, 1, 1, 1); + }, + createMaterial() { + this.material = new MeshBasicMaterial({ side: DoubleSide, map: this.loadTexture() }); + }, + loadTexture() { + return new TextureLoader().load(this.src, this.onLoaded); + }, + refreshTexture() { + if (this.texture) this.texture.dispose(); + this.material.map = this.loadTexture(); + this.material.needsUpdate = true; + }, + onLoaded(texture) { + this.texture = texture; + this.resize(); + this.$emit('loaded'); + }, + resize() { + if (!this.texture) return; + const screen = this.three.size; + const iW = this.texture.image.width; + const iH = this.texture.image.height; + const iRatio = iW / iH; + let w, h; + if (this.width && this.height) { + w = this.width * screen.wWidth / screen.width; + h = this.height * screen.wHeight / screen.height; + } else if (this.width) { + w = this.width * screen.wWidth / screen.width; + h = w / iRatio; + } else if (this.height) { + h = this.height * screen.wHeight / screen.height; + w = h * iRatio; + } + this.mesh.scale.x = w; + this.mesh.scale.y = h; + }, }, __hmrId: 'Image', };