142 lines
3.6 KiB
TypeScript
142 lines
3.6 KiB
TypeScript
"use client";
|
|
|
|
import { Canvas, useFrame, useThree } from "@react-three/fiber";
|
|
import { useEffect, useMemo, useRef } from "react";
|
|
import * as THREE from "three";
|
|
|
|
function GridFloor() {
|
|
const meshRef = useRef<THREE.Mesh>(null);
|
|
|
|
useFrame((state) => {
|
|
if (meshRef.current) {
|
|
const material = meshRef.current.material as THREE.ShaderMaterial;
|
|
if (material.uniforms) {
|
|
material.uniforms.uTime.value = state.clock.elapsedTime;
|
|
}
|
|
}
|
|
});
|
|
|
|
const gridShader = useMemo(
|
|
() => ({
|
|
uniforms: {
|
|
uTime: { value: 0 },
|
|
uColor: { value: new THREE.Color("#ccff00") },
|
|
},
|
|
vertexShader: `
|
|
varying vec2 vUv;
|
|
varying vec3 vPosition;
|
|
void main() {
|
|
vUv = uv;
|
|
vPosition = position;
|
|
gl_Position = projectionMatrix * modelViewMatrix * vec4(position, 1.0);
|
|
}
|
|
`,
|
|
fragmentShader: `
|
|
uniform float uTime;
|
|
uniform vec3 uColor;
|
|
varying vec2 vUv;
|
|
varying vec3 vPosition;
|
|
|
|
void main() {
|
|
vec2 grid = abs(fract(vPosition.xz * 0.5) - 0.5) / fwidth(vPosition.xz * 0.5);
|
|
float line = min(grid.x, grid.y);
|
|
float alpha = 1.0 - min(line, 1.0);
|
|
|
|
// Distance fade
|
|
float dist = length(vPosition.xz) * 0.08;
|
|
alpha *= max(0.0, 1.0 - dist);
|
|
alpha *= 0.12;
|
|
|
|
// Pulse wave
|
|
float wave = sin(length(vPosition.xz) * 0.3 - uTime * 0.8) * 0.5 + 0.5;
|
|
alpha *= 0.5 + wave * 0.5;
|
|
|
|
gl_FragColor = vec4(uColor, alpha);
|
|
}
|
|
`,
|
|
}),
|
|
[],
|
|
);
|
|
|
|
return (
|
|
<mesh ref={meshRef} rotation={[-Math.PI / 2, 0, 0]} position={[0, -4, 0]}>
|
|
<planeGeometry args={[40, 40, 1, 1]} />
|
|
<shaderMaterial
|
|
{...gridShader}
|
|
transparent
|
|
side={THREE.DoubleSide}
|
|
depthWrite={false}
|
|
/>
|
|
</mesh>
|
|
);
|
|
}
|
|
|
|
function CameraRig() {
|
|
const { camera } = useThree();
|
|
const mouseRef = useRef({ x: 0, y: 0 });
|
|
|
|
useFrame(() => {
|
|
const targetX = mouseRef.current.x * 0.5;
|
|
const targetY = mouseRef.current.y * 0.3 + 0.5;
|
|
camera.position.x += (targetX - camera.position.x) * 0.02;
|
|
camera.position.y += (targetY - camera.position.y) * 0.02;
|
|
camera.lookAt(0, 0, 0);
|
|
});
|
|
|
|
useEffect(() => {
|
|
const handler = (e: MouseEvent) => {
|
|
mouseRef.current.x = (e.clientX / window.innerWidth) * 2 - 1;
|
|
mouseRef.current.y = -(e.clientY / window.innerHeight) * 2 + 1;
|
|
};
|
|
window.addEventListener("mousemove", handler);
|
|
return () => window.removeEventListener("mousemove", handler);
|
|
}, []);
|
|
|
|
return null;
|
|
}
|
|
|
|
export default function HeroScene({
|
|
isVisible = true,
|
|
}: {
|
|
isVisible?: boolean;
|
|
}) {
|
|
return (
|
|
<div
|
|
className="absolute inset-0 z-0"
|
|
style={{ position: "absolute", top: 0, left: 0, right: 0, bottom: 0 }}
|
|
>
|
|
<Canvas
|
|
camera={{ position: [0, 0.5, 8], fov: 60, near: 0.1, far: 100 }}
|
|
dpr={[1, 1.5]}
|
|
frameloop={isVisible ? "always" : "never"}
|
|
gl={{
|
|
antialias: false,
|
|
alpha: true,
|
|
powerPreference: "high-performance",
|
|
}}
|
|
style={{
|
|
background: "transparent",
|
|
position: "absolute",
|
|
top: 0,
|
|
left: 0,
|
|
width: "100%",
|
|
height: "100%",
|
|
display: "block",
|
|
}}
|
|
>
|
|
<fog attach="fog" args={["#0a0a0a", 8, 30]} />
|
|
<ambientLight intensity={0.25} />
|
|
<directionalLight
|
|
position={[5, 5, 5]}
|
|
intensity={0.4}
|
|
color="#ccff00"
|
|
/>
|
|
<pointLight position={[-5, 3, -5]} intensity={0.2} color="#ffffff" />
|
|
|
|
<CameraRig />
|
|
<GridFloor />
|
|
</Canvas>
|
|
</div>
|
|
);
|
|
}
|