DOCSEARCHbyAlgolia
Submit Docs

Three.js Documentation

website·Indexed 31 days ago

https://docs.hzzzh.tech

Guides and technical references for Three.js, covering core concepts such as Object3D, renderers, and various camera types including PerspectiveCamera, OrthographicCamera, StereoCamera, and CubeCamera. Includes sections on 3D models, lighting, and getting started with installation and basic scene setup.

Tokens
2.6K
Snippets
17
Records
26
Agent score
53%

What's inside Three.js

  1. Understand and use StereoCamera for VR-like vision

    The StereoCamera is used to simulate human binocular vision, similar to cameras used for filming VR content. It works by splitting the rendered scene into two separate views—one for the left eye and one for the right eye—to create a stereoscopic 3D effect.

  2. Choose a Three.js Camera type

    Three.js provides several camera types depending on the desired projection and use case:

    • PerspectiveCamera: A 3D camera that mimics the human eye (objects further away appear smaller).
    • OrthographicCamera: A 2D camera where objects maintain their size regardless of distance.
    • ArrayCamera: A collection of cameras.
    • CubeCamera: Used for rendering cube maps (reflections).
    • StereoCamera: Used for VR/Stereoscopic rendering.

  3. Understand the Object3D base class in Three.js

    In Three.js, Object3D is the base class for nearly all objects that exist in 3D space, such as meshes, cameras, and lights. It provides the fundamental properties and methods required to manipulate an object's position, rotation, scale, and hierarchical relationship (parent/child) within a scene.

  4. Common 3D modeling software for asset creation

    The following software tools are commonly used to create 3D models that can be exported for use in web-based 3D engines:

  5. Use OrthographicCamera for 2D views and CAD design

    The OrthographicCamera uses an orthographic projection to create a 2D view. Unlike a perspective camera, the size of objects in the scene does not change based on their distance from the camera. This makes it ideal for 2D games, CAD software, and scenarios where maintaining accurate object size proportions is more important than perspective effects.

  6. Import Three.js modules in TypeScript/JavaScript

    Three.js supports both full namespace imports and named imports for on-demand usage.
    // Full import
import * as Three from 'three'

// On-demand/Named import
import { Scene } from 'three'

  7. Install Three.js using npm or pnpm

    Install the Three.js library into your project using either pnpm or npm.
    # Using pnpm
pnpm add three

# Using npm
npm install three

  8. Initialize a PerspectiveCamera in Three.js

    The PerspectiveCamera is used to simulate the way the human eye sees the world and is the most common projection mode for 3D rendering. It defines a viewing frustum where only objects between the near and far planes are rendered.
    // PerspectiveCamera( fov, aspect, near, far )
const camera = new THREE.PerspectiveCamera(50, window.innerWidth / window.innerHeight, 0.1, 2000);

  9. Configure lighting behavior using useLegacyLights

    The useLegacyLights setting determines whether the renderer uses traditional lighting for compatibility with older devices or modern physically-based rendering (PBR).

    When useLegacyLights is true (default), the renderer uses traditional behavior: only basic light types (e.g., AmbientLight, DirectionalLight) are used, old material/shading syntax is applied (no PBR support), and simplified lighting and shadow algorithms are employed.

    When useLegacyLights is set to false, the renderer enables modern rendering features including:

    • Physically Based Rendering (PBR)
    • Screen Space Ambient Occlusion (SSAO)
    • Parallel light shadow mapping
    • Point and Spot light shadows
    • Higher precision shadows
    // Example: Enable modern PBR and advanced lighting
renderer.useLegacyLights = false;

  10. Configure PerspectiveCamera constructor parameters

    The PerspectiveCamera constructor accepts four primary arguments:

    • fov (Field of View): The vertical field of view angle. A larger FOV makes objects appear smaller because more of the scene is visible. Default is 50.
    • aspect: The aspect ratio of the viewing frustum (typically width divided by height).
    • near: The distance to the near clipping plane. Objects closer than this distance will not be rendered. Default is 0.1. Range: [0, far].
    • far: The distance to the far clipping plane. Objects beyond this distance will not be rendered. Default is 2000.

  11. Set the scene background color

    Change the background color of the Scene by assigning a Color object to the scene.background property.
    const scene = new Scene();
scene.background = new Color(0x4c4c4c); // Replace with your desired hex color

  12. Enable anti-aliasing for smoother edges

    Enable the antialias option when creating a WebGLRenderer to reduce jagged edges (aliasing) in the rendered scene.
    const renderer = new WebGLRenderer({
  antialias: true,
});