Three.js

About Page

I decided that I wanted to know more about Three.js, so I am creating this page to house some three js projects as I go through a Three.js tutorial. The tutorial that I am going through can be seen here.

Notes on Three.js

  • Core Concepts
    • Three.js uses the WebGL renderer to display 3D elements on a web page.  
    • The 3D coordinate system in Three.js consists of three axes: x (horizontal), y (vertical), and z (depth).  
    • The x-axis represents horizontal placement, with negative values on the left and positive values on the right.  
    • The y-axis represents vertical placement, with negative values at the bottom and positive values at the top.  
    • The z-axis represents depth, with negative values going forward and positive values going backward from zero.  
    • A scene (Scene) is used to hold and manage 3D objects.  
    • Three.js provides two main camera types: perspective and orthographic.  
    • The perspective camera simulates real-life cameras and requires parameters like vertical field of view, aspect ratio, and near/far clipping planes.  
    • The orthographic camera is used for 2D scenes where depth is not a factor.  
    • Helpers are available as visual guides, such as the axis helper for visualizing the 3D coordinate system or the GridHelper to visualize a grid.  
    • Elements in the scene can undergo geometric transformations like rotation.  
    • Animations are created by applying transformations over time.  
    • The OrbitControls module enables camera interactivity with the mouse.
      •  
  • Elements
    • Creating an element involves geometry, material, and a mesh (the combination of geometry and material).  
    • Three.js provides various built-in geometries (e.g., BoxGeometry, PlaneGeometry, SphereGeometry).  
    • Materials define the surface properties of objects; different materials have different resource requirements.  
    • MeshBasicMaterial does not require light sources.  
    • Other materials like MeshStandardMaterial and MeshLambertMaterial require light sources to be visible.  
    • The side property of a material determines which sides of a surface are rendered (e.g., THREE.DoubleSide to render both sides).  
    • The wireframe property displays a geometry in its skeleton form.  
  • Features
    • Three.js supports various light types, including ambient light (diffuse environmental light), directional light (parallel rays), and spotlight (conical light).  
    • Shadows can be rendered, but they need to be explicitly enabled in the renderer.  
    • Shadow rendering involves a shadow camera that defines the area where shadows are cast.  
    • Fog can be added to a scene using Fog (linear fog) or FogExp2 (exponential fog).  
    • Backgrounds can be set using colors or textures.  
    • Textures can be loaded and applied to object materials.  
    • Cube textures can create 3D-like backgrounds by mapping images to the faces of a cube.  
    • Raycasting (Raycaster) allows for selecting objects in the scene with the mouse.  
    • Object selection can be based on properties like UUID, name, or ID.  
    • The shape of a mesh can be modified by updating the positions of its vertices.  
    • Vertex shaders and fragment shaders can be used to control rendering (note: requires WebGL knowledge).  
    • Three.js can load models from files (e.g., GLTF, FBX, OBJ).  

Tutorial 1