Loading effect…
Loading preview…
3d · react · free
React Three Fiber floating crystal with local lights and soft contact shadows.
"use client";
import { ContactShadows, Float } from "@react-three/drei";
import { useFrame } from "@react-three/fiber";
import { useRef } from "react";
import type { Mesh } from "three";
import { R3FCanvas } from "../../../shared/webgl";
function Crystal() {
const meshRef = useRef<Mesh>(null);
useFrame((_state, delta) => {
const mesh = meshRef.current;
if (!mesh) return;
mesh.rotation.y += delta * 0.45;
mesh.rotation.x += delta * 0.12;
});
return (React Three Fiber sample: a floating crystal with local lights and contact shadows (no remote HDR fetch).
three, @react-three/fiber, and @react-three/drei.src/FloatingCrystal.tsx (and registry/shared/webgl hosts for the same preview safeguards).R3FCanvas for WebGL probe, error boundary, DPR clamp, and frameloop pause.delivery: "repo".