105 Core Bd572f13

# Getting Started with Three.js

Core concepts for building your first 3D scene.

## Essential Components

Every Three.js app needs 3 core elements:

### 1. Scene
Container for all 3D objects, lights, cameras.

```javascript
const scene = new THREE.Scene();
scene.background = new THREE.Color(0x000000); // black background
scene.fog = new THREE.Fog(0xffffff, 1, 5000); // distance fog
```

### 2. Camera
Viewpoint into the 3D scene.

**PerspectiveCamera** (realistic, most common):
```javascript
const camera = new THREE.PerspectiveCamera(
  75,  // fov - field of view in degrees
  window.innerWidth / window.innerHeight,  // aspect ratio
  0.1,  // near clipping plane
  1000  // far clipping plane
);
camera.position.set(0, 0, 5);
camera.lookAt(0, 0, 0);
```

**OrthographicCamera** (no perspective distortion):
```javascript
const camera = new THREE.OrthographicCamera(
  left, right, top, bottom, near, far
);
```

### 3. Renderer
Renders scene using camera perspective.

```javascript
const renderer = new THREE.WebGLRenderer({ antialias: true });
renderer.setSize(window.innerWidth, window.innerHeight);
renderer.setPixelRatio(window.devicePixelRatio);
document.body.appendChild(renderer.domElement);
```

## Basic Geometries

Primitive shapes ready to use:

```javascript
// Box
new THREE.BoxGeometry(width, height, depth);

// Sphere
new THREE.SphereGeometry(radius, widthSegments, heightSegments);

// Plane
new THREE.PlaneGeometry(width, height);

// Cylinder
new THREE.CylinderGeometry(radiusTop, radiusBottom, height, radialSegments);

// Cone
new THREE.ConeGeometry(radius, height, radialSegments);

// Torus
new THREE.TorusGeometry(radius, tube, radialSegments, tubularSegments);
```

## Basic Materials

Materials define surface appearance:

**MeshBasicMaterial** - unlit, flat color:
```javascript
new THREE.MeshBasicMaterial({ color: 0xff0000 });
```

**MeshStandardMaterial** - PBR, responds to lights:
```javascript
new THREE.MeshStandardMaterial({
  color: 0x00ff00,
  metalness: 0.5,
  roughness: 0.5
});
```

**MeshPhongMaterial** - specular highlights:
```javascript
new THREE.MeshPhongMaterial({
  color: 0x0000ff,
  shininess: 100
});
```

## Creating Mesh

Combine geometry + material:

```javascript
const geometry = new THREE.BoxGeometry(1, 1, 1);
const material = new THREE.MeshStandardMaterial({ color: 0x00ff00 });
const cube = new THREE.Mesh(geometry, material);
scene.add(cube);
```

## Basic Lights

Materials (except Basic) need lights to be visible:

```javascript
// Ambient - global illumination
const ambient = new THREE.AmbientLight(0x404040); // soft white
scene.add(ambient);

// Directional - sun-like, infinite distance
const directional = new THREE.DirectionalLight(0xffffff, 1);
directional.position.set(5, 5, 5);
scene.add(directional);

// Point - lightbulb, radiates in all directions
const point = new THREE.PointLight(0xff0000, 1, 100);
point.position.set(0, 10, 0);
scene.add(point);
```

## Animation Loop

Continuously render and update scene:

```javascript
function animate() {
  requestAnimationFrame(animate);

  // Update objects
  cube.rotation.x += 0.01;
  cube.rotation.y += 0.01;

  // Render
  renderer.render(scene, camera);
}
animate();
```

## Handle Window Resize

Keep aspect ratio correct:

```javascript
window.addEventListener('resize', () => {
  camera.aspect = window.innerWidth / window.innerHeight;
  camera.updateProjectionMatrix();
  renderer.setSize(window.innerWidth, window.innerHeight);
});
```

## Object3D Hierarchy

Transform and group objects:

```javascript
const group = new THREE.Group();
group.add(cube1);
group.add(cube2);
scene.add(group);

// Transform
object.position.set(x, y, z);
object.rotation.set(x, y, z); // Euler angles
object.scale.set(x, y, z);

// Hierarchy transforms are relative to parent
```