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 - PlaneBasic 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 GeometriesAdvanced 3D Lathe Geometries Extrude Geomotery Extrude Tube Extrude SVG Parametric Geometries Text Geometry Binary Operations Particles, Sprites, & the Point CloudParticlesParticles - WebGL Basic Point Cloud Program Based Sprites Program Based Point Cloud - WebGl Program Based Sprites - WebGL Rainy Scene Snow Scene Sprites 3D Sprites Particle System Created from a Model Creating & Loading Advanced Meshes & GeometriesGroupingMerging 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 VRML Load Babylon Animations & Moving the CameraBasic AnimationSelecting 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 TexturesBasic Fragment ShaderBasic 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 PostprocessingBasic Effect ComposerPost Processing Simple Passes Glitch Pass Post Processing Masks Simple Shaderpass Blur Shaderpass Advanced Shaderpass Custom Shaderpass Custom Shaders & Render PostprocessingBasic SceneMaterial Properties Shapes Constraints DOF Constraint Audio Hinge |