Three.js Mesh Object Viewer
Select Material:
Select Object:
Shading:
Select Detail Level:
Select Material:
Select Object:
Shading:
Select Detail Level:
You can use this demo to see a variety of three.js mesh objects. A mesh object is made up of a geometry and a material. Twelve different geometries are available under "Select Object." These are created using standard classes such as THREE.SphereGeometry and THREE.Icosahedron geometry. The cylinder, cone, hexagonal frustum, and half-cylinder are all made using the class THREE.CylinderGeometry.
The mesh materials used in this demo belong to the classes THREE.MeshBasicMaterial, THREE.MeshLambertMaterial, and THREE.MeshPhongMaterial. Wireframes use THREE.MeshBasicMaterial. When a wireframe is shown in combination with a surface, there are actually two objects, one to represent the wireframe and one to represent the surface. The two objects use the same geometry but different material.
The shading radio buttons, which can be set to Flat or to Smooth, control a property of Phong and Lambert materials. This option does not appear when a Basic material is selected. For Flat shading, a normal vector is computed for each triangular face and is used for all vertices of that face. This makes the face appear flat. For Smooth shading, a normal vector is computed for each vertex of the solid, using an average of the face normals for faces that share that vertex. The result is a smooth-looking surface.
For the regular polyhedra (tetrahedron, octahedron, dodecahedron, and icosahedron), there is an additional control for specifying the "level of detail." When the level of detail is greater than zero, you no longer get a regular polyhedron. Instead, you get an approximation for the sphere that circumscribes the regular polyhedron. As the level of detail increases, the number of faces increases, and you get a better approximation for the sphere.
Note: Smooth shading does not work for the regular polyhedra with level of detail set to zero. It does work for higher levels of detail.
