Using Native Components in Three.js

Three.js provides built-in geometries, materials, lights, cameras, and other essential 3D components to create interactive 3D applications. These native components allow you to build complex scenes without needing external libraries or extensive custom shaders.

In this guide, we’ll explore how to use native Three.js components, such as:

Geometries (Box, Sphere, Plane, etc.)
Materials (Basic, Standard, Phong, etc.)
Lights (Ambient, Directional, Point, etc.)
Cameras (Perspective, Orthographic)
Controls (OrbitControls)

1. Setting Up a Basic Three.js Scene

Before we dive into native components, let’s set up a simple Three.js scene.

Project Structure:

bash

Copy

Edit
/threejs-native
 ├── index.html
 ├── app.js

index.html (Boilerplate with Import Maps)

html

Copy

Edit
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Three.js Native Components</title>
  <script type="importmap">
    {
      "imports": {
        "three": "https://cdn.jsdelivr.net/npm/three@latest/build/three.module.js",
        "three/addons/": "https://cdn.jsdelivr.net/npm/three@latest/examples/jsm/"
      }
    }
  </script>
</head>
<body>
  <script type="module" src="app.js"></script>
</body>
</html>

2. Adding Native Components in Three.js

app.js (Main Three.js Logic)

js

Copy

Edit
import * as THREE from "three";
import { OrbitControls } from "three/addons/controls/OrbitControls.js";

// 1️⃣ Create the Scene
const scene = new THREE.Scene();

// 2️⃣ Add a Camera (PerspectiveCamera)
const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
camera.position.set(0, 2, 5);

// 3️⃣ Create a WebGL Renderer
const renderer = new THREE.WebGLRenderer({ antialias: true });
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);

// 4️⃣ Add OrbitControls (Allow Mouse Interaction)
const controls = new OrbitControls(camera, renderer.domElement);
controls.enableDamping = true; // Smooth movement

// 5️⃣ Add a Box Geometry (Native Shape)
const boxGeometry = new THREE.BoxGeometry(1, 1, 1);
const boxMaterial = new THREE.MeshStandardMaterial({ color: 0x00ff00 });
const cube = new THREE.Mesh(boxGeometry, boxMaterial);
scene.add(cube);

// 6️⃣ Add a Plane (Ground)
const planeGeometry = new THREE.PlaneGeometry(10, 10);
const planeMaterial = new THREE.MeshStandardMaterial({ color: 0x555555, side: THREE.DoubleSide });
const plane = new THREE.Mesh(planeGeometry, planeMaterial);
plane.rotation.x = -Math.PI / 2; // Make it horizontal
scene.add(plane);

// 7️⃣ Add a Light (Native PointLight)
const light = new THREE.PointLight(0xffffff, 1);
light.position.set(2, 3, 3);
scene.add(light);

// 8️⃣ Animation Loop
function animate() {
  requestAnimationFrame(animate);
  controls.update(); // Smooth camera movement
  renderer.render(scene, camera);
}

animate();

3. Exploring Native Three.js Components

A. Geometries (Shapes)

Three.js provides several built-in geometries:

js

Copy

Edit
const sphere = new THREE.Mesh(
  new THREE.SphereGeometry(0.5, 32, 32),
  new THREE.MeshStandardMaterial({ color: 0xff0000 })
);
scene.add(sphere);

const torus = new THREE.Mesh(
  new THREE.TorusGeometry(1, 0.3, 16, 100),
  new THREE.MeshStandardMaterial({ color: 0xffff00 })
);
scene.add(torus);

Other native geometries:

BoxGeometry(width, height, depth)
SphereGeometry(radius, widthSegments, heightSegments)
PlaneGeometry(width, height)
CylinderGeometry(radiusTop, radiusBottom, height, radialSegments)
TorusGeometry(radius, tube, radialSegments, tubularSegments)

B. Materials

Three.js offers several built-in materials:

js

Copy

Edit
const basicMaterial = new THREE.MeshBasicMaterial({ color: 0x0000ff }); // No lighting
const standardMaterial = new THREE.MeshStandardMaterial({ color: 0xff00ff, roughness: 0.5, metalness: 0.8 });
const phongMaterial = new THREE.MeshPhongMaterial({ color: 0x00ffff, shininess: 100 });

Common materials:

MeshBasicMaterial: No shading, always visible.
MeshStandardMaterial: Realistic material with roughness/metalness.
MeshPhongMaterial: Shiny material with specular highlights.
MeshLambertMaterial: Non-shiny material affected by light.

C. Lights

To create realistic lighting, you can use native lights:

js

Copy

Edit
const ambientLight = new THREE.AmbientLight(0xffffff, 0.5);
scene.add(ambientLight);

const directionalLight = new THREE.DirectionalLight(0xffffff, 1);
directionalLight.position.set(2, 3, 4);
scene.add(directionalLight);

Types of lights:

AmbientLight: Soft light affecting all objects.
DirectionalLight: Sun-like parallel light rays.
PointLight: Emits light from a single point in all directions.
SpotLight: Emits a focused beam of light.
HemisphereLight: Light with different colors for sky and ground.

D. Cameras

Three.js has two main camera types:

js

Copy

Edit
const perspectiveCamera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
perspectiveCamera.position.set(0, 2, 5);

const orthographicCamera = new THREE.OrthographicCamera(-5, 5, 5, -5, 0.1, 1000);
orthographicCamera.position.set(0, 2, 5);

PerspectiveCamera: Simulates human vision.
OrthographicCamera: No perspective distortion.

E. Controls (OrbitControls)

You can use OrbitControls to enable user interaction:

js

Copy

Edit
import { OrbitControls } from "three/addons/controls/OrbitControls.js";
const controls = new OrbitControls(camera, renderer.domElement);
controls.enableDamping = true;

4. Running the Project

Save index.html and app.js in your project folder.
Open index.html in a browser.
Use your mouse to interact with the 3D scene.