Three.js provides the features one would expect from a 3D codebase, as well as 2D and 3D geometry built with polygonal meshes, including hierarchical objects and transformed scene images, materials, textures and lights, real-time shadows, open to user-defined , and a flexible rendering system that supports multi-pass and deferred rendering techniques for advanced special effects.
3.1 Geometry and meshes
Includes preset geometries (such as cubes and cylinders), path drawing shapes, 2D extrusion geometry, and user-extensible base classes for us to freely add custom geometries.
Geometry base class : scr/core/Geometry.js base class,
Most of the time, instead of constructing geometry directly programmatically, 3D models built with professional modeling software such as 3ds Max, Maya, and Blender are loaded directly into the program.
examples/webgl_loader_obj_mtl.html
Three.js provides a series of static functions for transforming and loading model files. Loaders are provided for a variety of file formats, some only provide support for collection shapes and materials, but others can be more complex: including entire scenes, cameras, lights, and animations.
3.2 Hierarchy of the scene graph and spatial transformation
Three.js defines a structured scene model based on the well-established scene graph concept. The scene graph represents a collection of 3D objects stored in a parent-child relationship hierarchy, and the root node of the scene graph is usually represented by the root variable. The application renders each sublevel of the scene recursively starting from the root node.
Use a scene graph to manage complex scenes : the entirety of the car moves along a trajectory, while the wheels spin at the same time.
The most basic object type is THREE.Object3D (src/core/Object3D.js). It is the base class for all visible objects (such as meshes, lines, particle systems), and is also an essential element of the hierarchical organization of the scene graph.
Each object3D object contains its own transformation information, which is stored in the position (position, that is, translation), rotation, and scale properties, respectively. By setting these properties, the corresponding objects can be moved, rotated and scaled. Descendants will also inherit these transformations.
3.3 Material
Standard mesh materials : src/materials directory, implemented using three well-known material techniques
- unlit (aka prelit) : When using this material type, only texture, color, and transparency properties are used for the object's appearance rendering. The lighting of the scene has no effect on the appearance of objects. This is a great material type for flat style rendering effects or for drawing simple geometric shapes that don't require complex shading. This material is also suitable for situations where lighting information has been combined with the material and pre-exported to the texture (for example, created with a 3D modeling tool and used a hongpei map), because then the appearance of the object does not need to be regenerated by the renderer. Calculation.
- Phong Shading : This material provides a simple yet excellent simulation-style high-performance shading model. It has become a common way to quickly and easily implement shading and shades, and many games and applications still use this shading method. Objects rendered with Phong shading will show highlight areas (specular reflections) where the light directly hits, the brightness of the object's surface will decay with the distance from each point to the light source, and backlit areas will be rendered as completely dark.
- Lambertian reflectance : In Lambert shading, the appearance of an object does not change as the observer's viewing angle changes. It's great for objects like clouds that reflect most of the light diffusely, or satellites like the moon that have high reflectivity (the surface reflects light very brightly).
3.4 Light source
Corresponds to light types defined in modeling tools and other scene libraries. The most common types of light sources are directional lights, point lights, spot lights, and ambient lights.
- Directional light: A class of light sources that generate directional parallel light is implemented
- Point Lights: Contains position information, but no orientation information
- Spotlight: has both position and orientation information. They also provide parameters that define the size (angle) of the spotlight's inner and outer cones, and how far they can illuminate.
- Ambient Light: No position and no direction. It projects evenly over the entire scene.
3.5 Shadows
Designers have long used shadows to create a more realistic visual effect. Often these shadows are fake, pre-rendered effects that can be destroyed by moving lights in the scene or moving objects with shadows.
3.6 Shaders
Using programmable shaders, developers can create high-performance, highly realistic visual effects free from the limitations of pre-built materials and lighting models.
3.7 Rendering
The final output of 3D scene control is a 2D image rendered on the browser Canvas element. It doesn't matter whether you're using WebGL, the 2D Canvas drawing API, or changing CSS to make elements move around the page; our ultimate goal is to draw pixels.