added Scale to dissolve material
This commit is contained in:
@@ -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);
|
||||||
|
|||||||
Reference in New Issue
Block a user