Colorful light source of webgl

1. What light sources are there in Three.js?

  In Three.js, the light source has a base class THREE.Light(hex) . This hex accepts hexadecimal color as a parameter to initialize the color of the light source. For example, if we want to define a green light source, we can define it like this:

var greenLight = new THREE.Light(0x00FF00);

  As a 3d engine three.js, this base class is difficult to meet our requirements, so we also need to inherit more diverse light sources from this base class:

    That is, in addition to this base class light source, we also have ambient light, area light, directional light, spot light, point light source, and so on. Below we introduce some commonly used light sources.

 

(1) Ambient light

  Ambient light is light that has been reflected many times , so its original direction cannot be determined. It is a ubiquitous light whose source can be considered to come from any direction. Therefore, when we make the scene light source as ambient light, all objects will show the same degree of light and shade. The ambient light can be represented by THREE.AmbientLight, and its constructor is THREE.AmbientLight(hex); , it still accepts The hexadecimal color is used as a parameter, as follows:

var light = new THREE.AmbientLight(0xff00000);
scene.add(light);

  As above, after adding the light source, the scene can be rendered by the light source.

 

(2) Point light source

  The light emitted by this light source comes from the same point, and the direction is radiated in all directions. For example, a light bulb at home is a point light source. The constructor is as follows:

var light = new THREE.PointLight(color, intensity, distance);
  1. color, the color of light.
  2. Intensity, that is, the intensity of light, the value is between 0 and 1, the default is 1.0, that is, the highest intensity.
  3. distance, that is, the distance of the light. From the position of the light source, after the distance is turned into an example, the intensity of the light will be attenuated from Intensity to 0. By default, this value is 0.0, which means that the intensity of the light source is not attenuated.

 

 

(3) Spotlight

  The light of this light source is emitted from a cone, which produces a condensing effect on the illuminated object. To use this light source, you need to specify the direction of the light and the vertex angle α of the cone, as follows:

  We can use the following constructor:

var light = nwe THREE.SpotLight(hex, intensity, distance, angle, exponent);
  • hex is the hexadecimal color of the spotlight.
  • Intensity is also the intensity of the light source.
  • distance is an example of the intensity of the light source from setting to 0, the default is 0, that is, the light does not decay.
  • Angle is the angle at which the spotlight is shaded, in radians.
  • Exponent is a parameter of attenuation in the light source model. The larger the value of this parameter, the faster the attenuation.

  

(4) Parallel light

  Parallel light, also known as Directional Light, is a group of parallel rays with no attenuation, similar to the effect of sunlight,

  The constructor looks like this:

var lignt = new THREE.DirectionalLight(hex, intensity);

 Among them, Hex is the color of light, and Intensity is the age of light.

 

 

 

 

The relationship between light source and material

   We draw an object on the screen without any light source, define the color of the object as black, its value is 0x000000, and define the material as follows:

var material = new THREE.MeshLambertMaterial( { color: 0x000000 } ); // This is the Lambert material, one of the materials

  Then the end effect is that nothing can be seen. And in fact we can draw conclusions that are not so easy to draw from here:

  Without any light source, the final color will be black, no matter what color the material is. Therefore, in the daytime, the color of the object we see is actually the color that the object cannot absorb, and we only see it. In the case of night, the object cannot absorb anything, and naturally we can't see anything.

  

  The next thing we want to talk about is the Lambert material, which is a type of material formed by uniform scattering on a dark or matte surface. For example , a piece of paper is the Lambert surface, which is rough and uniform. It scatters the light evenly in all inverses, so the Lambert material is affected by ambient light, showing the color of the ambient light, which has little to do with the color of the material itself.

  

  The ambient light is the ubiquitous light in the scene, and its impact on the object is uniform, that is to say, no matter which angle you observe the object from, the color of the object is the same, this is the ambient light.

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

  

 

Guess you like

Origin http://43.154.161.224:23101/article/api/json?id=325102061&siteId=291194637