Three. js Source Code Reading Notes (illumination part)

The weather is getting colder, and people are getting lazy. They are getting more and more like watching novels or playing games in the warm bedroom, and haven't watched Three. js source code for a long time. The weather is good today. Let's take a look!

This time, we can see from the illumination section: the illumination model, from the perspective of light itself, includes ambient light, parallel light, and point light source. It also includes diffuse reflection and mirror reflection from the perspective of the object surface material.

Lights: Light
Copy codeThe Code is as follows:
THREE. Light = function (hex ){
THREE. Object3D. call (this );
This. color = new THREE. Color (hex );
};

This object is a prototype/base class of other lighting objects and inherits from the Object3D object/type. It has only one Color attribute of the THREE. color type, that is, Color.

In Three. js, as an Object3D object, illumination is added to the Scene through the Scene. add () method, and the Renderer automatically renders the added illumination effect.
Light: AmbientLight
Copy codeThe Code is as follows:
THREE. AmbientLight = function (hex ){
THREE. Light. call (this, hex );
};

Non-Direction ambient Light does not have an attribute or method more than the Light type, but inherits from Light only for semantic inheritance. It is not even necessary to be an Object3D object.

Light: DirectionalLight
Copy codeThe Code is as follows:
THREE. DirectionalLight = function (hex, intensity ){
THREE. Light. call (this, hex );
This. position = new THREE. Vector3 (0, 1, 0 );
This.tar get = new THREE. Object3D ();
This. intensity = (intensity! = Undefined )? Intensity: 1;
This. castShadow = false;
This. onlyShadow = false;
// More settings about shadow ......
};

Parallel Light (directional light). When using the new operator to construct this function, the "density" intensity of the color hex and light must be input. This class has the following attributes:
Position: A position starting from this position. The direction of the origin point is the direction of light.
Intensity: the light density. The default value is 1. Because the three values of RGB are 0 ~ Between 255, does not reflect the intensity of light changes, the stronger the light, the object surface is brighter.
Distance: attenuation distance. The default value is 0, and the light does not fade. If the value is not 0, the light degrades from the position (actually the plane of position, after the distance from the attenuation to distance, the light intensity is 0.
CastShadow: A boolean value that determines whether a shadow is generated. The default value is false. If it is set to true, all the surfaces will calculate by Pixel whether the surface is blocked in the illumination direction, which consumes a lot of computing.
OnlyShadow: A boolean value that determines whether only shadow is generated and not illuminated. The default value is false. This mode may have some special applications.
ShadowCameraLeft, shadowCameraRight ...... Series, with the position point as the center to control the shadow range?
ShadowBias: Shadow eccentric. The default value is 0.
ShadowDarkness: the effect of shadow on the brightness of an object, ranging from 0 ~ 1. The default value is 0.5.
There are still many attributes that cannot be guessed for the time being (it is really time to supplement computer graphics, and continue with it ).

Light: PointLight
Copy codeThe Code is as follows:
THREE. PointLight = function (hex, intensity, distance ){
THREE. Light. call (this, hex );
This. position = new THREE. Vector3 (0, 0, 0 );
This. intensity = (intensity! = Undefined )? Intensity: 1;
This. distance = (distance! = Undefined )? Distance: 0;
};

Point Light Source, position is definitely the light source point. Note the difference between the position of the point light source and the position of the parallel light source. The former is at the origin by default, while the latter is at the point (, 1) by default, which makes the default direction of the parallel light source consistent with the default orientation of the camera.
The other two attributes are the same as those in light. PointLight has no shadow settings.

Light: SpotLight
Copy codeThe Code is as follows:
THREE. SpotLight = function (hex, intensity, distance, angle, exponent ){
THREE. Light. call (this, hex );
This. position = new THREE. Vector3 (0, 1, 0 );
This.tar get = new THREE. Object3D ();
This. intensity = (intensity! = Undefined )? Intensity: 1;
This. distance = (distance! = Undefined )? Distance: 0;
This. angle = (angle! = Undefined )? Angle: Math. PI/2;
This. exponent = (exponent! = Undefined )? Exponent: 10; // more settings about shadow...
};

A light source that generates shadows in a certain direction, affecting the surface of MeshLamberMaterial and MeshPhongMaterial materials. The setting of how the shadow is processed is consistent with that of direlight light.
In short, lighting objects do not need to render light, but only define how to render light.
Object: Partical
Copy codeThe Code is as follows:
THREE. Particle = function (material ){
THREE. Object3D. call (this );
This. material = material;
};

The particle is an Object3D made of materials, which is easy to understand. The Object3D object provides a coordinate (that is, the coordinate of the particle), which is responsible for the motion of the particle. The particle only needs to specify the material to represent it.

Object: maid
Copy codeThe Code is as follows:
THREE. Particle System = function (geometry, material ){
THREE. Object3D. call (this );
This. geometry = geometry;
This. material = (material! = Undefined )? Material: new THREE. Fig ({color: Math. random () * 0 xffffff });
This. sortparticipant = false;
If (this. geometry ){
If (this. geometry. boundingSphere === null ){
This. geometry. computeBoundingSphere ();
}
This. boundRadius = geometry. boundingSphere. radius;
}
This. frustumCulled = false;
};

The particle system represents the movement of multiple particles. The particle system itself inherits from the Object3D object. There are several attributes:
Geometry attribute. Each node is a particle, which shares a material.
The material of these nodes.

FrustumCulled attribute, Boolean value. If it is set to true, it will be kicked out of the camera horizon, however, we haven't figured out whether the central coordinates of the particle system are kicked out of the entire particle system outside the horizon, or if a single particle goes out, we will remove it. I guess most of them are the latter.

In fact, these articles refer to how to define a scenario, and it is difficult to understand how to render the scenario. I am going to look at the Demo code next, and check the source code of the WebGLRenderer class (thousands of lines of OMG ).