This website contains a collection of examples building up to interactive 3D applications involving shadows.

• Basic HTML

  Examples of basic HTML elements, scripting, interaction with elements on page.

• Basic Three.js Scene

  Example 3D scene created with the three.js library; includes shadow casting and wireframe helper objects to illustrate direction and range of shadows.
  
  This and the following examples use OrbitControls to control the camera:

  • hold left mouse button and drag to rotate scene around center
  • use mouse wheel to zoom in and out on scene center
  • hold right mouse button and drag to translate camera horizontally

• Orthogonal Shadows

  A scene with three orthogonal directional lights casting shadows of a rotating cone.

• Constructive Solid Geometry

  Example of Constructive Solid Geometry (CSG) calculations, using the libraries CSG.js and THREE-CSGMesh. Displays meshes that are the union, intersection, or difference of two other meshes (a sphere and a cube in this example).

• CSG + Translucent Overlays

  The intersection of two hollow cylinders; original cylinders are rendered as translucent objects.

• CSG + Wireframe Overlays

  The intersection of two hollow frustums; original frustums are rendered as wireframe objects.

• 3D Text

  Creating three-dimensional text meshes.

• Shapes and Extrusions

  Creating shapes (specified by points/lines/curves), extruding the shapes to make 3D objects, and normalizing each shape to fit exactly in a unit box.

• Many Shapes

  A combination of 3D text and extruded shapes, all normalized to fit exactly in a unit box.

• CSG + Text Meshes

  Three text meshes are rotated to orthogonal directions, then intersected to create a mesh.

• CSG + Shadows

  A combination of the shape, CSG, and shadow examples above. This demo creates the intersection of meshes constructed from shapes extruded along perpendicular directions, and shadows are projection along the three perpendicular directions. URL supports parameter input to select three different shapes and an optional rotation speed. For example:

  • Square, Triangle, Circle (not rotating)
  • Circle, 5-point Star, Square (rotating)
  • Smile, Z, Circle (rotating)
  • Smile, Frown, Square (rotating)
  • Circle, Square, 6-point Star (rotating)
  • Triangle, Hexagon, Square (rotating)
  
  Note that some combinations of shapes result in additional truncation and so shadow projections may not appear as expected.

• Transform Controls

  Transformation controls, similar to those found in digital content creation (DCC) tools such as Blender, applied to a mesh. See the official documentation and example for additional details.

• Drag and Drop Controls

  Simple Drag-and-Drop controls applied to a mesh. The dragged object moves in a plane perpendicular to the forward direction of the camera.

• Viewports

  Four views of a scene - top, front, right, and diagonal - rendered at the same time, using perspective cameras.
  (Similar to the "quad view" in Blender.)

• Viewports - Orthogonal

  Four views of a scene. Each quadrant includes a text label. The top, front, and right views are rendered with orthographic cameras, and code guarantees a square aspect ratio is preserved when the window is resized. OrbitControls are active for the perspective view and are enabled only when the mouse pointer is dragged within the corresponding quadrant of the scene.
  (Even more similar to the "quad view" in Blender.)

• Viewports + Drag-and-Drop

  Four views of a scene, combined with a draggable sphere. Drag controls plugin modified to work correctly with viewports. Multiple drag controls required: one for each of the orthographic views, where dragging is enabled.

• Viewports + Drag-and-Drop (version 2)

  A more colorful version of the previous example.

• Drag and Drop Triangle

  Drag-and-Drop controls applied to three vertices of a triangle. Lines connecting the vertices are automatically updated.

• Drag and Drop Triangle + Mesh

  The previous example extended to include a triangular mesh bounded by the three objects representing the vertices of the triangle.