Spaces:
Sleeping
Sleeping
File size: 2,552 Bytes
14fdc5e | 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 | "use client";
import { useRef } from "react";
import { Canvas, useFrame } from "@react-three/fiber";
import { Float, Stars } from "@react-three/drei";
import * as THREE from "three";
type OrbProps = {
position: [number, number, number];
scale: number;
color: string;
speed: number;
};
function Orb({ position, scale, color, speed }: OrbProps) {
const meshRef = useRef<THREE.Mesh>(null);
useFrame(({ clock }) => {
const mesh = meshRef.current;
if (!mesh) {
return;
}
const t = clock.getElapsedTime() * speed;
mesh.position.y = position[1] + Math.sin(t) * 0.2;
mesh.rotation.x = t * 0.2;
mesh.rotation.y = t * 0.28;
});
return (
<Float speed={1.2} rotationIntensity={0.6} floatIntensity={0.5}>
<mesh ref={meshRef} position={position} scale={scale}>
<icosahedronGeometry args={[0.9, 10]} />
<meshStandardMaterial
color={color}
roughness={0.2}
metalness={0.4}
transparent
opacity={0.34}
emissive={color}
emissiveIntensity={0.09}
/>
</mesh>
</Float>
);
}
function AccentPlane() {
const planeRef = useRef<THREE.Mesh>(null);
useFrame(({ clock }) => {
const mesh = planeRef.current;
if (!mesh) {
return;
}
mesh.rotation.z = Math.sin(clock.getElapsedTime() * 0.08) * 0.1;
});
return (
<mesh ref={planeRef} position={[0, -2.8, -3]} rotation={[-0.8, 0, 0]}>
<planeGeometry args={[18, 8, 1, 1]} />
<meshStandardMaterial color="#dcefe9" transparent opacity={0.4} />
</mesh>
);
}
export function ThreeBackdrop() {
return (
<Canvas camera={{ position: [0, 0, 7], fov: 48 }} dpr={[1, 1.6]}>
<color attach="background" args={["#e9f2ee"]} />
<fog attach="fog" args={["#e9f2ee", 7, 15]} />
<ambientLight intensity={0.8} />
<directionalLight position={[3, 6, 7]} intensity={1.1} />
<pointLight position={[-4, 2, 4]} intensity={0.7} color="#2f7e74" />
<pointLight position={[4, -1, 3]} intensity={0.55} color="#d97706" />
<Stars radius={45} depth={20} count={900} factor={2.2} saturation={0.35} fade speed={0.4} />
<AccentPlane />
<Orb position={[-3.6, 0.8, -1.6]} scale={1.2} color="#2c8a7a" speed={0.9} />
<Orb position={[3.2, -0.2, -2.2]} scale={1.45} color="#dc7c3f" speed={0.75} />
<Orb position={[0, 2.1, -3.1]} scale={1.05} color="#26839a" speed={1.15} />
</Canvas>
);
}
|