Demonstrations - Three.js
First SceneBasic 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 ComponentsAdd 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 SourcesAmbient 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.
MaterialsMesh 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.
GeometriesBasic 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 GeometriesAdvanced 3D Convex Geometries
Advanced 3D Lathe Geometries
Particles, Sprites, & the Point CloudParticles
Particles - WebGL
Basic Point Cloud
Program Based Sprites
Program Based Point Cloud - WebGl
Program Based Sprites - WebGL
Particle System Created from a Model
Creating & Loading Advanced Meshes & GeometriesGrouping
Load & Save a JSON Object
Load & Savve a JSON Scene
Blender from JSON
Load an Object
Load a MTL Object
Load a Collada Object
Animations & Moving the CameraBasic Animation
Trackball Controls Camera
Fly Controls Camera
Roll Controls Camera
First Person Camera
Morph Targets Manually
Animation from Blender
Animation from Collada
Animation from MD2
Animation from GTLF
Loading & Working with TexturesBasic Fragment Shader
Basic Vertex Shader
Dynamic ENV Map
Normal Object MTL
Basic Texture DDS
Basic Texture PRV
Basic Texture TGA
Env Dynamic Map
Env Static Map
UV Mapping Manual
Canvas Texture Bumpmap
Video Texture Alternative
Custom Shaders & Render PostprocessingBasic Effect Composer
Post Processing Simple Passes
Post Processing Masks
Custom Shaders & Render PostprocessingBasic Scene