Matiss/Mati.ss
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: Enhance HeroModel wave animation with updated geometry, noise parameters, material, rotation, and camera settings.

Browse Source
This commit is contained in:
Matiss Jurevics
2025-12-15 19:25:29 +00:00
parent be43e23d30
commit 50993176c1
1 changed files with 12 additions and 14 deletions
Download Patch File Download Diff File Expand all files Collapse all files

26
src/canvas/HeroModel.jsx
View File

@@ -7,8 +7,8 @@ const Terrain = () => {
const mesh = useRef(); const mesh = useRef();
const noise3D = useMemo(() => createNoise3D(), []); const noise3D = useMemo(() => createNoise3D(), []);
// Create geometry with high segment count for smooth wave // Create geometry with HIGHER segment count for smoother, denser wave like the reference
const geometry = useMemo(() => new THREE.PlaneGeometry(15, 15, 64, 64), []); const geometry = useMemo(() => new THREE.PlaneGeometry(20, 20, 100, 100), []);
useFrame((state) => { useFrame((state) => {
if (mesh.current) { if (mesh.current) {
@@ -18,27 +18,25 @@ const Terrain = () => {
for (let i = 0; i < positions.count; i++) { for (let i = 0; i < positions.count; i++) {
const x = positions.getX(i); const x = positions.getX(i);
const y = positions.getY(i); const y = positions.getY(i);
// Animate z-axis with noise based on x, y and time // Smoother noise settings
// Frequency: how "zoomed in" the noise is (0.3) const z = noise3D(x * 0.15, y * 0.15, time * 0.15) * 2;
// Amplitude: height of waves (1.5)
const z = noise3D(x * 0.3, y * 0.3, time * 0.2) * 1.5;
positions.setZ(i, z); positions.setZ(i, z);
} }
positions.needsUpdate = true; positions.needsUpdate = true;
// Slight rotation for perspective // Slight rotation
mesh.current.rotation.x = -Math.PI / 3; mesh.current.rotation.x = -Math.PI / 2.5;
mesh.current.rotation.z += 0.001; mesh.current.rotation.z += 0.0005;
} }
}); });
return ( return (
<mesh ref={mesh} geometry={geometry}> <mesh ref={mesh} geometry={geometry}>
{/* Wireframe material options */} <meshBasicMaterial
<meshStandardMaterial color="#000000"
color="#333"
wireframe={true} wireframe={true}
wireframeLinewidth={1.5} transparent={true}
opacity={0.15}
/> />
</mesh> </mesh>
); );
@@ -49,7 +47,7 @@ const HeroModel = () => {
<div style={{ width: '100%', height: '100vh', position: 'absolute', top: 0, left: 0, zIndex: 0 }}> <div style={{ width: '100%', height: '100vh', position: 'absolute', top: 0, left: 0, zIndex: 0 }}>
<Canvas <Canvas
shadows shadows
camera={{ position: [0, 5, 10], fov: 45 }} camera={{ position: [0, 5, 8], fov: 55 }}
dpr={[1, 2]} dpr={[1, 2]}
> >
<Suspense fallback={null}> <Suspense fallback={null}>