Demonstrations - Three.js

First Scene

Basic Skeleton Nothing is displayed on the page, but the code provides everything necessary for the structure of a Three.js page.

First Scene Create a plane and place some wireframe objects with geometry.

First Scene - Changes Make changes to the previous demonstration.

Materials & Light Create some mesh and apply lighting to the objects.

Materials & Light - Changes Make changes to the previous demonstration.

Materials, Light, & Animation Objects can be animated with some simple formulas.

Materials, Light, & Animation - Changes Make changes to the previous demonstration.

Control GUI Use dat.GUI to make experimenting easier.

Control GUI - Changes Added a cylinder and controls with some additional small changes.

Screen Size Adjust to changes in the screen size.

Basic Components

Add Objects to the Scene Allow for the addition and deletion of cubes with controls.

Add Objects to the Scene - Changes Modify the previous demonstration to allow for the addition of spheres to the scene.

Add Fog to the Scene Add fog to the scene so that it increases linearly.

Add Objects to the Scene - Changes Add fog to the scene so that it increases exponentially.

Force Materials Force all of the materials in the scene to be the same.

Force Materials - Changes Modify the previous demonstrate by changing materials and colors.

Geometries View the different standard geometries available.

Custom Geometries View the different standard geometries available.

Custom Geometries - Changes View the different standard geometries available.

Mesh Properties View the different standard meshes available.

Mesh Properties - Changes View the different standard geometries available.

Both Cameras View the scene with a perspective camera and an orthographic camera.

The lookAt Function View the scene with both cameras looking in different directions.

Light Sources

Ambient Light Change the ambient light color and the spot light.

Point Light Change the intensity and distance of the point light.

Spot Light Change many attributes of the spot light.

Directional Light Change many attributes of the directional light.

Hemisphere Light The hemisphere light is a bit more advanced, and it requires a server.

Area Light The area light is also more advanced than the point light, spot light, and directional light.

Lense Flares Lense flare can create more dramatic effects on images.


Mesh Basic Material This material is a very simple material that does not take into account the lights that are available in the scene. Meshes with this material will be rendered as simple flat polygons, and you have the option of showing the wireframe.

Depth Material The way an object looks with depth material is not defined by the lights or by a specific material property; it is defined by the distance the object is from the camera. You can combine it with other materials to create fading effects.

Combined Material The mesh depth material does not allow you to set the color, and everything is decided for you with default settings. There is an option to create materials together to create new effects, and this is where blending comes into play.

Mesh Normal Material Mesh normal material allows the face of each material to be rendered in a slightly different color, and even when a sphere rotates the colors stay the same at close to the same place. The normal vector is used to make this happen, and you could view it with the arrow helper. The normal vector is used to determine light reflections, helps in mapping textures to 3D models, and gives information on how to light, shade, and color pixels on a surface. Three.js handles the computation of the normal vectors internally so that you do not have to calculate them.

Mesh Face Material This last basic material really is not a material but much more a container of other materials. Mesh face material allows you to assign a different material to each face of your geometry. A cube with 12 faces (Three.js works only with triangles) could have different material assigned to each face with this material.

Mesh Lambert Material Mesh lambert material can be used to create dull-looking, non-shiny surfaces. It is easy to use and responds to lighting sources in the scene.

Mesh Phong Material Mesh phong material allows for the creation of a material that is shiny. The properties that you can use for it are pretty much the same as for a non-shiny Mesh Lambert material object.

Shader Material The Shader material is one of the most versatile and complex materials available in Three.js. It allows you to pass in your own custom shaders that are directly run in the WebGL context. With custom shaders you can define exactly how an object should be rendered and how to override or alter the defaults from Three.js.

Line Material The materials available for line geometry are very simple.

Line Dashed Material The line dashed material has the same properties as the line material and two additional ones to define the dash width and width of the gaps between the dashes.


Basic 2D Geometries - Plane

Basic 2D Geometries - Circle

Basic 2D Geometries - Shape

Basic 3D Geometries - Ring

Basic 3D Geometries - Cube

Basic 3D Geometries - Sphere

Basic 3D Geometries - Cylinder

Basic 3D Geometries - Torus

Basic 3D Geometries - Ring

Basic 3D Geometries - Torus Knot

Basic 3D Geometries - Polyhedron

Advanced Geometries

Advanced 3D Convex Geometries

Advanced 3D Lathe Geometries

Extrude Geomotery

Extrude Tube

Extrude SVG

Parametric Geometries

Text Geometry

Binary Operations

Particles, Sprites, & the Point Cloud


Particles - WebGL

Basic Point Cloud

Program Based Sprites

Program Based Point Cloud - WebGl

Program Based Sprites - WebGL

Rainy Scene

Snow Scene


3D Sprites

Particle System Created from a Model

Creating & Loading Advanced Meshes & Geometries



Load & Save a JSON Object

Load & Savve a JSON Scene

Blender from JSON

Load an Object

Load a MTL Object

Load a Collada Object

Load STL

Load CTM

Load VTK

Load PDB

Load PLY

Load AWD

Load Assimp


Load Babylon

Animations & Moving the Camera

Basic Animation

Selecting Objects

Animation Tween

Trackball Controls Camera

Fly Controls Camera

Roll Controls Camera

First Person Camera

Orbit Controls

Morph Targets

Morph Targets Manually

Bones Manually

Animation from Blender

Animation from Collada

Animation from MD2

Animation from GTLF

Loading & Working with Textures

Basic Fragment Shader

Basic Vertex Shader

Dynamic ENV Map

Normal Object MTL

Basic Texture

Basic Texture DDS

Basic Texture PRV

Basic Texture TGA

Bump Map

Normal Map

Light Map

Env Dynamic Map

Env Static Map

Specular Map

UV Mapping

UV Mapping Manual

Repeat Wrapping

Canvas Texture

Canvas Texture Bumpmap

Video Texture

Video Texture Alternative

Custom Shaders & Render Postprocessing

Basic Effect Composer

Post Processing Simple Passes

Glitch Pass

Post Processing Masks

Simple Shaderpass

Blur Shaderpass

Advanced Shaderpass

Custom Shaderpass

Custom Shaders & Render Postprocessing

Basic Scene

Material Properties



DOF Constraint