A heavily commented but basic scene. Illustrates the setup of a scene, camera, renderer, event handlers (for window resize and fullscreen, provided by the THREEx library), mouse controls to rotate/zoom/pan the scene, mini-display for FPS stats, and setting up basic geometries: a sphere with lighting effects, a multi-colored cube, a plane with an image texture applied, and skybox/fog options for rendering objects distant from the camera.
Many of these features are described in more detail in the examples below.
The "Hello World" code with most comments and meshes removed.
Illustrates the difference between the Basic, Lambert, and Phong materials.
Illustrates the effects of changing the Color (Diffuse Color), Ambient Color, Emissive Color, Specular Color, Shininess amount, and Opacity amount.
Demonstrates how to create and apply wireframe materials.
Demonstrates how to create solid lines, dashed lines, and contains a function to convert geometries into line-style objects.
Demonstrates a neat effect to display a wireframe-style object where the obscured lines display different than the visible lines (e.g. dashed vs. solid).
Assigning colors to vertices to achieve special effects such as gradients and randomization.
Uses some of the built-in geometry constructors to create the following three dimensional shapes (and variations): cube, icosahedron, octahedron, tetrahedron, sphere, dome, cylinder, prism, cone, pyramid, frustum (truncated cone and truncated pyramid), torus, torus knots.
Create an array of 2D points, make a 2D shape, and create an extrusion (a 3D shape whose cross-sections are the given 2D shape).
Create a 3D text object (an extruded version of text rendered as a 2D image).
Demonstrates surfaces with textures (image-based materials), including shading and coloring effects.
Sprites are images (not attached to geometries/surfaces) displayed in a scene, always orthogonal to the camera. They can either appear in the 3D scene (useful as part of a particle effect) or rendered using screen coordinates (useful as part of a graphical user interface (GUI) or a heads-up display (HUD)).
Repeating (tiling) a texture on a surface.
Demostrates a function that interpolates additional points to a geometry, creating a "smoothing" effect. This example applies the modifier to a variety of cube geometries, resulting in spherical and beveled cubes.
Using textures to create a "SkyBox": backgrounds images projected onto a cube surrounding the rendering region, which creates the illusion of distant 3D surroundings.
Illustrates using basic and phong-shaded translucent materials, making image textures translucent, using additive blending for a glow-like effect, and using image textures that already have alpha transparency.
Using spotlights to create shadow effects in a scene.
Creating a mirror-like material by projecting an image of the surroundings onto a object.
Create a particle effect using a group of sprites and alpha blending (or transparency).
Animate a spritesheet image texture on a surface.
Using the functionality provided by THREEx.Keyboard, translate and rotate a mesh, with the following controls:
W/S/Q/E: translate forwards/backwards/left/right (local).
A/D/R/F: rotate left/right/up/down (local).
UP/DOWN/LEFT/RIGHT: translate Z-/Z+/X-/X+ (global).
Create a "chase cam" -- move the camera around together with a mesh. (Same controls as in "Mesh Movement" example.)
Switch between multiple cameras: chase camera (press "1") and fixed top view (press "2"). (Otherwise, same controls as in "Mesh Movement" example.)
Move around a camera and project what it sees it onto a texture. (Same controls as in "Mesh Movement" example.)
Simultaneously render two different camera views onto the same canvas element. (Same controls as in "Mesh Movement" example.)
Simultaneously render four different camera views onto the same canvas element: one perspective camera and three orthographic cameras along the axis directions (similar to many 3D modeling software configurations). (Same controls as in "Mesh Movement" example.)
Demonstrates how to set up a simple pre-defined shader (sepia coloring).
Illustrates the effects of changing the parameters in different shaders (sepia, vignette, dot screen).
Demonstrates a selective glow effect using shaders. This approach requires the creation of two scenes - the base scene and a secondary scene containing copies of the base scene objects with either bright textures for glow effects or black textures. The secondary scene is blurred and then additively blended with the base scene.
Demonstrates an atmosphere effect using shaders. This approach requires the creation of two scenes - the base scene and a secondary scene containing a spherical object with a gradient texture created using a shader. The secondary scene is then additively blended with the base scene.
Display a video as a texture. Keyboard controls: "P" to play/resume, "SPACE" to pause, "R" to rewind, "S" to stop.
Displays user webcam image on this webpage. Requires Webcam, user needs to accept permissions to run, requires WebRTC compatible browser (see http://www.webrtc.org/). (No Three.js code required; this example is a lead-in to the following example.)
Displays user webcam image as a texture on a mesh. Requires Webcam, user needs to accept permissions to run, requires WebRTC compatible browser (see http://www.webrtc.org/). Press P to pause webcam (image freezes) and R to resume webcam.
Displays user webcam image as a texture on a moveable mesh (W/A/S/D/Q/E). Incorporates code from examples: Webcam Texture, Mesh Movement, Reflection, Skybox, and Viewports - Dual. Requires Webcam, user needs to accept permissions to run, requires WebRTC compatible browser (see http://www.webrtc.org/).
Displays an interactive webpage within a Three.js scene. Based on the work of Jerome Etienne: http://learningthreejs.com/blog/2013/04/30/closing-the-gap-between-html-and-webgl/
Uses a Gamepad (e.g. XBox controller) to move a square image around a canvas. Requires Chrome browser and connected gamepad to run. Uses gamepad.js library (patched) from http://github.com/inequation/gamepad.js. Analog sticks and directional pad move square up/down/left/right. A/B/X/Y buttons change colors of square. Start/select buttons reset square to original position. [Note: You may need to press one of A/B/X/Y buttons for controller to be recognized by the web browser.] (No Three.js code required; this example is a lead-in to the following example.)
Uses a Gamepad (e.g. XBox controller) to move a cube around a Three.js scene, similar to Mesh-Movement example above. Requires Chrome browser and connected gamepad to run. Left analog stick moves cube forward/backward and turns left/right. Directional pad moves cube forward/backward/left/right. Right analog stick only turns cube left/right. Right shoulder buttons double speed of movement/turns. Start/select buttons reset cube to original position and rotation.
Create a graphical user interface (using the DAT.GUI library).
Create a graphical user interface (using the DAT.GUI library) that controls the appearance of a cube mesh.
Display a sprite at the current position of the mouse. (May be useful for targeting icon or mouse pointer icon.)
Change the color of an object in the scene when the mouse hovers over it.
Create a tooltip-style effect to display mesh names when mouse hovers. (Uses ideas from examples: Mouse Sprite, Mouse Hovering, and Texture from Canvas.)
Detect when the vertices of a mesh intersect with another object. (Move the wireframe cube with the arrow keys and rotate with W/A/S/D; the text "Hit" will appear at the top of the screen once for every vertex intersection.)
An illustration of the "Marching Cubes" algorithm for triangulating a level surface ("isosurface") of an implicitly defined function f(x,y,z) = c. See the websites:
Create a new mesh from the union, intersection, or subtraction of two meshes. Uses the library at http://github.com/chandlerprall/ThreeCSG/
Graph a function of the form z = f( x, y ).
Graph a parametric surface of the form x = f( u, v ), y = g( u, v ), z = h( u, v ).
Graph a parametric curve of the form x = f( t ), y = g( t ), z = h( t ).