3D objects for the web,
with code included.

// 3D asset from Obj3cts.com — Floating Crystal Cluster
// Attribution required by the selected asset license.
// https://obj3cts.com

import { Canvas, useFrame } from '@react-three/fiber';
import { OrbitControls, useGLTF, Environment } from '@react-three/drei';
import { Suspense, useRef } from 'react';
import * as THREE from 'three';

function Model() {
  const { scene } = useGLTF('/models/model.glb');
  const ref = useRef<THREE.Group>(null);
  useFrame((_, delta) => {
    if (ref.current) ref.current.rotation.y += delta * 0.2;
  });
  return <primitive ref={ref} object={scene} />;
}

useGLTF.preload('/models/model.glb');

export function Scene() {
  return (
    <Canvas shadows camera={{ fov: 35, position: [2.4, 1.6, 2.4] }}>
      <color attach="background" args={['#0a0a09']} />
      <Suspense fallback={null}>
        <Environment preset="city" />
        <Model />
        <ambientLight intensity={0.4} />
        <directionalLight position={[3, 5, 2]} intensity={1.2} castShadow />
      </Suspense>
      <OrbitControls enableDamping dampingFactor={0.08} />
    </Canvas>
  );
}