“This is the 15th day of my participation in the First Challenge 2022. For details: First Challenge 2022”

The sample code USES three. Js – r73 version: cdnjs.cloudflare.com/ajax/libs/t…

The world is a world of light

• Some objects in the universe are luminous and some are not. We call luminous objects light sources. The sun, electric lights, burning candles, etc are sources of light.
• Light is one of the sources of life on Earth. Light is the basis of human life. Light is the means by which man perceives the external world. Light is the ideal carrier or medium of information.
• In short, light travels along rays in a uniform medium, and no medium is needed for light to travel.

Direction of light – keyhole imaging

• With a plate with a small hole between the wall and the object, the wall will form an inverted real image of the object, we call such a phenomenon called small hole imaging. By moving the middle plate back and forth, the size of the image on the wall changes accordingly.
• The above phenomenon shows that light travels in straight lines in the same uniform medium, usually referred to as the straight line propagation of light

Various light sources in Threejs

• In Threejs’ world, there is no darkness with light.
• Threejs is very focused on 3D rendering authenticity, and the use of light is an essential part of that. Threejs offers a variety of light sources.
• The base class of Light sources
  • THREE. AmbientLight ambient light
  • THREE.DirectionalLight
  • THREE. SpotLight lights
  • THREE. PointLight point lights
  • THREE. AreaLight area light

As you can see from the figure above, all concrete Light sources inherit from the THREE.Light class

Light source is the base class

• In Threejs, the Light source is represented by Light, which is the base class for all Light sources.

THREE.Light = function(color)
Copy the code

• In computer graphics, one of the most important properties of light is color. (in physics, wavelength ~ ~), which takes one parameter color and accepts a hexadecimal color value. For example, to define a red light source, we can define it like this:

Var redLight = new THREE.Light(0xFF0000);
Copy the code

Do not add light to the scene

• What if we didn’t add any light to the scene? Look at the code below

var cube;
function initObject() {
    var geometry = new THREE.CubeGeometry(200.100.50.4.4);
    // Make the material white
    var material = new THREE.MeshLambertMaterial({ color: 0xFFFFFF });
    var mesh = new THREE.Mesh(geometry, material);
    mesh.position = new THREE.Vector3(0.0.0);
    scene.add(mesh);
}
Copy the code

• We just add a cube, the material is set to white, no light is added, and it shows black on the page. No matter how we change the material color at this time, it will always be black.

Codepen sample code: Conclusion: Without any light, everything is black

conclusion

In this section, we mainly talk about the following contents:

• Direction of light – keyhole imaging
• The classification of the light
• The base class of a light source
• Do not add a light source to the scene