This is the second day of my participation in the August Text Challenge.More challenges in August

Threejs Scene object Scene is mainly composed of model object and Light object Light. There are many different types of Light in three.js, and each Light has its own special behavior and usage. The common types and basic descriptions of light sources are as follows:

Next, let’s take a look at their basic description and getting started.

The ambient light AmbientLight

Ambient light does not have a specific direction of the light source, mainly is uniform overall change Threejs object surface light and dark effect, which is different from the direction of the light source, such as point light source can make different areas of the object surface light and dark degree is different.

Let ambient = new THREE.AmbientLight(0x444444); // Add ambient light object to scene scene.add(ambient);Copy the code

When creating THREE.AmbientLight, the color is applied globally. The light source has no particular direction and THREE.AmbientLight does not create shadows. In general, THREE.AmbientLight cannot be used as the only light source in the scene, as it will render all objects in the scene the same color regardless of shape. Use it in conjunction with other light sources (such as three. SpotLight or three. DirectionalLight) to reduce shadows or add some extra color to the scene.

Point light PointLight

Point light source is like incandescent lamp in daily life. Light radiates outward along the luminescent core. Different positions of the same plane and point light source have different incident angles.

Different from the ambient light, the ambient light does not need to set the position of the light source, while the point light source needs to set the position attribute. Different light source positions, the surface of the object to be illuminated is different, and the distance is different because the attenuation degree of light and shade is different.

// let point = new three.pointlight (0xffFFFF); Point.position. set(400, 200, 300); // Set point.position.set(400, 200, 300); scene.add(point);Copy the code

Parallel light DirectionalLight

This type of light can be thought of as light at great distances. All the fibers that it emits are parallel to each other. An example of parallel light is sunlight.

For parallel light, it is mainly to determine the direction of the light. Once the direction of the light is set, the Angle of incident between the light and the surface of the object is determined. Only setting the position of the light does not work.

In 3d space, in order to determine the direction of a straight line, only the coordinates of two points on the straight line need to be determined. Therefore, Three. Js parallel light provides two attributes of position and target to determine the direction of parallel light together. The attribute value of the target target can be any 3D model object in Threejs scene, such as a Mesh model. In this way, when Threejs calculates the direction of parallel light exposure, it calculates the position attribute of its own position and the position attribute of the object represented by target.

// let directionalLight = new THREE.DirectionalLight(0xffFFFF, 1); / / set the direction of the light source: the light source position and goal, the position of the object attribute computing directionalLight. Position. Set (80, 100, 50); // directionalLight = mesh2; // directionalLight = mesh2; scene.add(directionalLight);Copy the code

If the position and target properties are not set, the light is lit from the top down by default. That is, the light direction can be considered as determined by the coordinates (0,1,0) and (0,0,0).

Concentrated source SpotLight

A concentrator can be thought of as a light source that gradually diverges along a particular direction, forming a cone in three dimensions. The divergence Angle of the concentrating source can be set through the attribute Angle, and the setting of the irradiation direction of the concentrating source can be achieved by the position and target attributes like the parallel light source.

SpotLight is one of the most commonly used lights (especially if you want to use shadows). It’s a cone shaped light source that we can compare to a flashlight or a lighthouse.

// Let spotLight = new THREE.SpotLight(0xffFFFF); // Set spotLight. Position. set(200, 200, 200); // Mesh2 spotLight. Target = mesh2; // Set the spotLight Angle to spotLight. Angle = math.pi / 6; // Add light object to scene scene.add(spotLight);Copy the code

conclusion

Today, we learned the common basic light source in three. js and their respective basic usages. Being familiar with these usages can help us quickly understand how to use the light source. Materials (more on that later) react differently to light sources. The color of the light can be added to every color in the scene, often to soften stiff colors and shadows. PointLight emits light in all directions and cannot be used to create shadows. SpotLight is similar to a flashlight. It has a cone-shaped beam that can be configured to grow weaker with distance and generate shadows. We also learned about the THREE.DirectionalLight light source. This light source corresponds to a far-light effect, such as sunlight. Its rays are parallel to each other, and their intensity does not decrease as the distance from the target increases.

In addition to these basic light sources, there are also some special lights: THREE. Metpherelight creates a more natural outdoor effect; It is possible to emit light from a large area rather than a single point. THREE.LensFlare objects can add graphical LensFlare. Of course, the basic usage of these light sources is the same. If you need to know the usage and properties of all light sources in detail, you can refer to the official website of three. js and the development guide of Thrr.js.

That’s all for today. Thank you for liking, following and bookmarking.