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 Lambert and Phong materials. Unfortunately, this property seems to be ignored for some materials on some objects, and it has no effect for Basic materials. For Flat shading, when it is working correctly, 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.
