diff --git a/app/src/modules/builder/wrappers/materials/dissolveMaterial.tsx b/app/src/modules/builder/wrappers/materials/dissolveMaterial.tsx index 957f045..8095f92 100644 --- a/app/src/modules/builder/wrappers/materials/dissolveMaterial.tsx +++ b/app/src/modules/builder/wrappers/materials/dissolveMaterial.tsx @@ -19,6 +19,7 @@ const fragmentShader = ` uniform float uThickness; uniform vec3 uColor; uniform float uProgress; + uniform vec3 uInverseScale; float hash(vec3 p) { p = fract(p * 0.3183099 + 0.1); @@ -39,7 +40,7 @@ const fragmentShader = ` } void main() { - float noiseValue = noise(vPosition * 10.0); + float noiseValue = noise(vPosition * uInverseScale * 10.0); float progress = uProgress; float visualFade = 1.0 - smoothstep(0.9, 1.0, progress); @@ -65,6 +66,7 @@ const fragmentShader = ` interface DissolveMaterialProps { baseMaterial: THREE.ShaderMaterial | THREE.MeshStandardMaterial | THREE.MeshPhysicalMaterial; + scale?: [number, number, number]; thickness?: number; color?: string; intensity?: number; @@ -74,11 +76,12 @@ interface DissolveMaterialProps { fadedOut?: () => void; } -export function DissolveMaterial({ baseMaterial, thickness = 0.1, color = "#0082b2", intensity = 50, duration = 1.2, fade = true, fadedIn, fadedOut }: DissolveMaterialProps) { +export function DissolveMaterial({ baseMaterial, scale = [1, 1, 1], thickness = 0.1, color = "#0082b2", intensity = 50, duration = 1.2, fade = true, fadedIn, fadedOut }: DissolveMaterialProps) { const uniforms = React.useRef({ uThickness: { value: thickness }, uColor: { value: new THREE.Color(color).multiplyScalar(intensity) }, uProgress: { value: fade ? 1 : 0 }, + uInverseScale: { value: new THREE.Vector3(...scale) }, }); const hasFadedIn = React.useRef(false);