added Scale to dissolve material

This commit is contained in:
2025-09-16 18:10:20 +05:30
parent f4bf1183cf
commit e6c4fbfb19

View File

@@ -19,6 +19,7 @@ const fragmentShader = `
uniform float uThickness; uniform float uThickness;
uniform vec3 uColor; uniform vec3 uColor;
uniform float uProgress; uniform float uProgress;
uniform vec3 uInverseScale;
float hash(vec3 p) { float hash(vec3 p) {
p = fract(p * 0.3183099 + 0.1); p = fract(p * 0.3183099 + 0.1);
@@ -39,7 +40,7 @@ const fragmentShader = `
} }
void main() { void main() {
float noiseValue = noise(vPosition * 10.0); float noiseValue = noise(vPosition * uInverseScale * 10.0);
float progress = uProgress; float progress = uProgress;
float visualFade = 1.0 - smoothstep(0.9, 1.0, progress); float visualFade = 1.0 - smoothstep(0.9, 1.0, progress);
@@ -65,6 +66,7 @@ const fragmentShader = `
interface DissolveMaterialProps { interface DissolveMaterialProps {
baseMaterial: THREE.ShaderMaterial | THREE.MeshStandardMaterial | THREE.MeshPhysicalMaterial; baseMaterial: THREE.ShaderMaterial | THREE.MeshStandardMaterial | THREE.MeshPhysicalMaterial;
scale?: [number, number, number];
thickness?: number; thickness?: number;
color?: string; color?: string;
intensity?: number; intensity?: number;
@@ -74,11 +76,12 @@ interface DissolveMaterialProps {
fadedOut?: () => void; 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({ const uniforms = React.useRef({
uThickness: { value: thickness }, uThickness: { value: thickness },
uColor: { value: new THREE.Color(color).multiplyScalar(intensity) }, uColor: { value: new THREE.Color(color).multiplyScalar(intensity) },
uProgress: { value: fade ? 1 : 0 }, uProgress: { value: fade ? 1 : 0 },
uInverseScale: { value: new THREE.Vector3(...scale) },
}); });
const hasFadedIn = React.useRef(false); const hasFadedIn = React.useRef(false);