3D Basics

Scene setup, camera controls, lighting, and basic geometries.

Basic Scene

A simple scene with orbit controls. Click and drag to rotate, scroll to zoom.

import { Canvas } from '@react-three/fiber';
import { OrbitControls, PerspectiveCamera } from '@react-three/drei';

<Canvas>
  <PerspectiveCamera makeDefault position={[3, 3, 3]} />
  <OrbitControls enableDamping />
  <ambientLight intensity={0.5} />
  <directionalLight position={[5, 5, 5]} />
  <mesh>
    <boxGeometry />
    <meshStandardMaterial color="orange" />
  </mesh>
</Canvas>

Basic Geometries

Built-in geometries available in Three.js. Hover to see interaction.

Box

Sphere

Torus

Cone

Cylinder

Dodeca

// Built-in geometries
<boxGeometry args={[1, 1, 1]} />
<sphereGeometry args={[0.7, 32, 32]} />
<torusGeometry args={[0.5, 0.2, 16, 32]} />
<coneGeometry args={[0.7, 1, 32]} />
<cylinderGeometry args={[0.5, 0.5, 1, 32]} />
<dodecahedronGeometry args={[0.7]} />

Lighting Types

Different light sources create different moods and effects.

// Light types
<ambientLight intensity={0.5} />
<directionalLight position={[5, 5, 5]} intensity={1.5} castShadow />
<pointLight position={[2, 2, 2]} intensity={50} color="#ff6b6b" />
<spotLight position={[3, 5, 3]} angle={0.3} penumbra={0.5} intensity={100} />