Use a variety of light sources in the Three.js

Light sources provided by the 1.three.js Library

The Three.js library provides a number of column lights, and no light source has a specific behavior and purpose. These light sources include:

Light Source Name/description

Ambientlight (ambient light)/This is an underlying light source whose color is added to the entire scene and the current color of all objects

Pointlight (Point Light)/a point in space, emitting light in all directions

SpotLight (Spotlight Light)/This light source has the effect of concentrating, like a lamp, a chandelier on the ceiling, or a flashlight

Directionlight (directional light)/also known as infinite Light. The light emitted from this light source can be looked at in parallel. For example, sunlight

Hemishperelight (Hemisphere light)/This is a special light source that can be used to create more natural outdoor light, simulating the luminous surface and the faint sky

Arealight (face Light)/Use this light source to specify a plane that emits light, rather than a point in space

LensFlare (lens glare)/This is not a light source, but you can add a glare effect to the light source in the scene by LensFlare

2. Using the Three.color object

When you build a three.color (color) object, color can be either a hexadecimal string (#cccccc) or a hexadecimal value. However, if you need to change the color after the idea is constructed, you will have to create a new Three.color object or modify the internal properties of the current Three.color object. Three. The functions provided by color include:

Name/Description of function

Set (value)/changes the current color to the specified hexadecimal value. Can be a string, or it can be a number

Sethex (value)/Specifies the current color as a hexadecimal value

Setrgb (R, G, b)/set the color according to the provided RBG. Parameter range 0 to 1

SETHSV (H, S, v)/sets the color according to the HSV value provided. Parameters range from 0 to 1

SetStyle (color)/set colors based on CSS values

Copy (color)/from the supplied color object to the current object

Convertgamatolinear (color)/converts the current color from the gamma color space to the linear color space

Convertlineartogamma (color)/converts the current color from a linear color space to a gamma color space

Gethex ()/Get color values from a color object in 16 binary form

Gethexstring ()/Get a color value from a color object as a hexadecimal string

GetStyle ()/Get color values from a color object in CSS-worthy form

GETHSV ()/Get color values from a Color object in HSV form

Addcolor (color)/Adds the provided color to the current color

Clone ()/copy current color

3.PointLight Properties

Properties/Description
Color (colour)/light source color
Intensity (intensity)/light intensity. The default value is 1
Distance (distance)/distance from the light source
Position (position)/location of light source
Visible (visible)/If set to true, the light is turned on, and if false, the light is turned off

4.SpotLight Properties

Properties/Description
Castshadow (projection)/If set to true, the light source generates a shadow
target/determines the direction of the light source
Angle (angle)/How wide is the beam of light. The unit is in radians and the default value is MATH.PI/3
Shadowcameravisible (projection mode display)/For debugging, if set to true, you can see where the lights are and how to generate shadows
Shadowmapwidth (Shadow map width)/Determines how many pixels are used to generate shadows. This value can be increased if the edge of the shadow is uneven or does not appear smooth. Cannot be modified after a scene has been rendered
Shadowmapheight (Shadow map height)/determines that du-less pixels are used to generate shadows. This value can be increased if the edge of the shadow is uneven or does not appear smooth. Cannot be modified after a scene has been rendered
Creating a light source is simple. Just specify the color, set the desired properties, and add the guest to the scene set. For example:

vartarget =Newthree. Object3d (); Target.position=NewThree. Vector3 (5, 0, 0);varPointcolor = "#ffffff";varSpotLight =Newthree. SpotLight (Pointcolor); SpotLight.position.set (-40, 60,-10); Spotlight.castshadow=true; Spotlight.shadowcameranear= 2; Spotlight.shadowcamerafar= 200; Spotlight.target=target;spotlight.distance= 0; Spotlight.angle= 0.4; Scene.add (spotLight);

If the shadow looks a bit blurry, you can increase the value of the Shadowmapwidth, Shadowmaptheight property, or ensure that the area used to generate the shadow tightly surrounds the object. This area can be configured using the Shadowcameranear, Shadowcamerafar, and Shadowcamerafov properties.

5.DirectionLight Properties

Many properties of the directional and spotlight lights are the same. As with the spotlight, the month that surrounds the object space is tight and the effect of the projection is better. You can define this block using the following properties.

varPointcolor = "#ff5808";varDirectionlight =Newthree. DirectionalLight (Pointcolor);d IrectionLight.position.set (-40, 60,-10);d Irectionlight.castshadow=true;d irectionlight.shadowcameranear= 2;d Irectionlight.shadowcamerafar= 100;d Irectionlight.shadowcameraleft=-50;d irectionlight.shadowcameraright= 50;d irectionlight.shadowcameratop= 50;d Irectionlight.shadowcamerabottom=-50;d irectionlight.distance= 0;d irectionlight.intensity= 0.5;d irectionlight.shadowmapwidth= 1024;d irectionlight.shadowmapheight= 1024; Scene.add (directionlight);

6.HemisphereLight Dome Light Source

Using a hemispherical light source, you can create a more natural lighting effect. The constructor is new three. Heimspherelight (groundcolor, color, intensity). Property Description:

Properties/Description
groundcolor/the color of light emitted from the ground
color/the color of light emitted from the sky
intensity/intensity of light exposure

7. How to load arts and sciences

We can add arts and sciences to the material surface, arts and sciences can be a picture. Loading arts and Sciences can use Three.imageutils's loadtexture function. For example:

varTexturegrass = three. Imageutils.loadtexture (".. /assets/textures/ground/grasslight-big.jpg "); Texturegrass.wraps=three. Repeatwrapping;texturegrass.wrapt=three. Repeatwrapping;texturegrass.repeat.set (4, 4);//create the ground planevarPlanegeometry =NewThree. Planegeometry (1000, 200, 20, 20);varPlanematerial =Newthree. Meshlambertmaterial ({map:texturegrass});varPlane =Newthree. Mesh (Planegeometry, planematerial);p Lane.receiveshadow=true;

Texturegrass is a liberal arts object, through the wraps, WRAPT set the arts and sciences coordinates s, T direction of the tile way. TextureGrass.repeat.set (4, 4) sets the number of repetitions of the screen in S, T direction to 2*2.

8. Flat Light Source

The planar light source alealight can be topped by a single illuminated rectangle. Arealight is not labeled in your Three.js library, but in his extension library, where all the additional steps are completed before use.
If you want to use a flat light source, you cannot use the Three.webglrenderer object directly. Instead, use Three.webgldeferredrenderer (a deferred renderer for WebGL). To use the Three.webgldeferredrenderer object, you must introduce the extra extreme JavaScript code provided by Three.js. Introduced in the HTML header:

<script type= "Text/javascript" src= ". /libs/webgldeferredrenderer.js "></script><script type=" Text/javascript "src=". /libs/shaderdeferred.js "></script><script type=" Text/javascript "src=". /libs/renderpass.js "></script><script type=" Text/javascript "src=". /libs/effectcomposer.js "></script><script type=" Text/javascript "src=". /libs/copyshader.js "></script><script type=" Text/javascript "src=". /libs/shaderpass.js "></script><script type=" Text/javascript "src=". /libs/fxaashader.js "></script><script type=" Text/javascript "src=". /libs/maskpass.js "></script>

The Three.webgldeferredrenderer object can be used after the libraries are included. Use the following code:

var New  true2.5});

9. Lens Glare

You can create a lens flare by instantiating a Three.lensflare object. The object is created first. Three. LensFlare Object Receive parameters:
Three. LensFlare = function (texture, size, distance, blending, color), parameter list:
Parameters/Description
Texture/a material with a glare effect. Decide what the glare looks like
size/Specifies how large the glare should be, in pixels.
distance/the distance from the light source 0 to camera 1
blending/we can provide a variety of materials for glare. The fusion mode determines how they talk about merging together. The default dissolve mode is three.addtiveblending. It provides a transparent glare.
color/Glare Color
The creation code looks like this:

var New Three. Color (0xffaacc); var New Three. LensFlare (textureFlare0, 0.0, 0.6, 0.7, 0.9, 1.0, three. additiveblending); lensFlare.position.copy (spotlight.position); Scene.add (LensFlare) ;

The glare position created can be placed at the light source, just like sunlight. Where lensflare.add can add an aperture effect, calling it requires top arts, sizes, distances, and blending modes.

Use a variety of light sources in the Three.js