Threejs Fundamentals

Learn and apply core Three.js fundamentals through automation and integration

Category: productivity Source: cloudai-x/threejs-skills

Three.js Fundamentals is a community skill for 3D web development basics with Three.js, covering scene setup, geometry and materials, lighting, camera controls, and rendering for interactive 3D web applications.

What Is This?

Overview

Three.js Fundamentals provides guidance on building 3D scenes for the web using the Three.js library. It covers scene setup that initializes renderer, scene, and camera for 3D display, geometry and materials that create and style 3D objects with various shapes and surface properties, lighting that illuminates scenes with ambient, directional, and point light sources, camera controls that enable user interaction through orbit, pan, and zoom, and rendering that draws frames with proper sizing and pixel ratio handling. The skill helps developers build interactive 3D web experiences.

Who Should Use This

This skill serves web developers learning 3D graphics, frontend engineers adding 3D elements to web applications, and creative developers building interactive visualizations.

Why Use It?

Problems It Solves

Raw WebGL programming requires hundreds of lines of boilerplate for basic 3D scenes. Setting up proper camera, lighting, and rendering pipelines involves many configuration details. Handling window resizing and pixel ratios across devices needs careful management. Loading 3D models and textures requires format handling and asset management.

Core Highlights

Scene builder initializes renderer, scene, and camera. Geometry creator builds shapes with materials and textures. Light manager configures ambient and directional illumination. Render loop handles frame updates with proper timing.

How to Use It?

Basic Usage

// Three.js scene setup
import * as THREE from
  'three';
import { OrbitControls }
  from 'three/addons/'
  + 'controls/'
  + 'OrbitControls.js';

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

const scene =
  new THREE.Scene();
scene.background =
  new THREE.Color(
    0x1a1a2e);

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

const controls =
  new OrbitControls(
    camera,
    renderer.domElement);

// Lighting
scene.add(
  new THREE
  .AmbientLight(
    0x404040));
const dirLight =
  new THREE
  .DirectionalLight(
    0xffffff, 1);
dirLight.position.set(
  5, 10, 5);
scene.add(dirLight);

// Mesh
const mesh =
  new THREE.Mesh(
    new THREE
    .SphereGeometry(1),
    new THREE
    .MeshStandardMaterial(
      { color: 0x00aaff }));
scene.add(mesh);

function animate() {
  requestAnimationFrame(
    animate);
  controls.update();
  renderer.render(
    scene, camera);
}
animate();

Real-World Examples

// Model loader with
// texture
import * as THREE from
  'three';
import { GLTFLoader }
  from 'three/addons/'
  + 'loaders/'
  + 'GLTFLoader.js';

class SceneManager {
  constructor(container) {
    this.scene =
      new THREE.Scene();
    this.loader =
      new GLTFLoader();
    this.models = {};
  }

  async loadModel(
    name, url
  ) {
    const gltf =
      await this.loader
      .loadAsync(url);
    this.models[name] =
      gltf.scene;
    this.scene.add(
      gltf.scene);
    return gltf;
  }

  addTexturedPlane(
    texturePath
  ) {
    const tex =
      new THREE
      .TextureLoader()
      .load(texturePath);
    const plane =
      new THREE.Mesh(
        new THREE
        .PlaneGeometry(
          10, 10),
        new THREE
        .MeshStandardMaterial(
          { map: tex }));
    plane.rotation.x =
      -Math.PI / 2;
    this.scene.add(plane);
  }

  resize(w, h) {
    // Update camera
    // and renderer
  }
}

const mgr =
  new SceneManager();
mgr.addTexturedPlane(
  'floor.jpg');
mgr.loadModel(
  'character',
  'model.glb');

Advanced Tips

Use MeshStandardMaterial with environment maps for realistic reflections. Handle window resize events to update camera aspect ratio and renderer size. Enable shadow mapping on the renderer and configure shadow-casting lights for depth.

When to Use It?

Use Cases

Build a product viewer that loads 3D models with orbit controls for user interaction. Create a data visualization with 3D charts and animated transitions. Design an interactive landing page with 3D elements and scroll-based camera movement.

Related Topics

Three.js, WebGL, 3D graphics, scene management, model loading, materials, and interactive visualization.

Important Notes

Requirements

Three.js installed via npm or CDN for 3D rendering. A WebGL-capable browser which covers all modern browsers. 3D assets in supported formats like glTF for models and standard image formats for textures.

Usage Recommendations

Do: dispose of geometries, materials, and textures when removing objects to prevent memory leaks. Use the built-in clock for consistent frame timing across devices. Test on mobile devices since GPU capabilities vary.

Don't: add lights without testing their impact on scene performance since each light adds rendering cost. Use uncompressed textures for web delivery since file sizes affect load time. Skip the render loop cleanup when components unmount in framework apps.

Limitations

WebGL performance varies across devices and browsers especially on mobile hardware. Complex scenes with many objects need level of detail management for smooth frame rates. Three.js abstracts WebGL but understanding shaders helps for advanced visual effects.