Classification of light sources

  1. AmbientLight(Ambient light),PointLightPoint light source,SpotLight(concentrator) andDirectionalLight(Parallel light) is the base light source
  2. HemisphereLight(Hemispherical source),AreaLight(Regional light source),LensFlareLens flare is a special purpose light source

Hemispherical light sources

  • The hemisphere light is placed directly over the scene, and the light color changes from sky light color to ground light color
  • Hemispherical light cannot cast shadows
  • Hemispheres can create a more natural outdoor lighting effect in order to simulate the reflective effect in outdoor scenes

Application of hemispherical light source

HemisphereLight, where THREE.DirectionalLight is not used, is used to simulate outdoor lighting, and a THREE.AmbientLight may be added to provide base colors for the scene

Common properties of hemispherical light sources

  • Color: The color of light emitted from the sky
  • GroundColor: The color of light emitted from the ground
  • Intensity: indicates the intensity of light irradiation. The default value is 1.
  • Position: Position of the light in the scene. Default values are :(0, 100, 0)
  • Visible: If set to true (the default), the light will turn on. If set to false, the light source will be turned off.

Code examples of hemispherical light sources

Hemilight.position. set(0, 100, greasy-back) var hemiLight = new THREE. Greasy-back = new THREE. 0) scene.add(hemiLight)Copy the code

The ambient light AmbientLight

  • Ambient light without a specific direction of the light source, will uniformly illuminate all objects in the scene, mainly to uniformly change the overall light and shade effect of Threejs object surface, which is different from the direction of the light source, such as point light source can make different areas of the object surface different degree of light and shade
  • Ambient light affects the whole scene, its light has no specific source but is everywhere, it cannot affect shadow generation because it has no direction and cannot be used as the only light source while using other light sourcesTHREE.AmbientLightThe goal is to weaken the shadows and add some color

Code example of ambient light

Var AmbientLight = new THREE.AmbientLight(0x0C0c0c) Scene.add (AmbientLight)Copy the code

The difference between ambient and hemispheric light sources

  • Ambient light is divided intoTHREE.AmbientLight & THREE.HemisphereLight
  • THREE.AmbientLightObject chiaroscuro cannot be displayed
  • THREE.HemisphereLightThe contrast between light and dark of the object is obvious
  • If you want to simulate the real world, it’s recommendedTHREE.HemisphereLight, can be used if the three-dimensional presentation is not particularly harshTHREE.AmbientLight 和 THREE.DirectionalLight

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
  • Unlike ambient light, which does not require setting the position of the light source, point light requires setting the position attribute.positionDepending on the position of the light source, the surface of the object is illuminated at different distances and distances because of the different degree of attenuation

Code example of point light source

Var point = new three.pointlight (0xffFFFF) var point = new three.pointlight (0xffffff) // Set point.position.set(400, 200, 300) scene.add(point)Copy the code

Parallel light DirectionalLight

  • Parallel light just as the name implies, for a plane, different regions of the plane receive parallel light at the same incident Angle
  • The point light source radiates in all directions, so set the position property.positionYou can determine the Angle between the light and the surface
  • For parallel light, it is mainly to determine the direction of the light. Once the direction of the light is set, the incident Angle of the light and the object surface is determined. Only setting the position of the light does not work
  • In three dimensions to determine the direction of a line you just need to determine the coordinates of two points on the line, so parallel light provides position.positionAnd the target.targetTwo properties that together determine the direction of parallel light
  • The target.targetThe attribute value of can be any 3D model object in the scene, such as a Mesh model. The parallel light will pass its position attribute.positionand.targetRepresents the position property of an object.positioncalculated
  • Parallel light if not set.positionand.targetAttribute, the light defaults from the top down, that is, can be considered(0, 0)and(0, 0)Two coordinates determine the direction of the ray
  • Note the position property of the parallel light source.positionIt doesn’t mean that parallel light is coming out of this position,.positionThe property is just used to determine the direction of the light coming from parallel light, which you can think of as sunlight coming from infinity

Parallel light code example

Var directionalLight = new THREE.DirectionalLight(0xffFFFF, 1) By the light source position and goal, the position of the object attribute computing directionalLight. Position. Set (80, 100, 50) / / directional mesh mesh point to objects, can not set, The default position is 0,0,0 directionalLight. Target = mesh scene.add(directionalLight)Copy the code

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
  • Through property.angleYou can set the divergence Angle of the concentrating source, and the setting of the irradiation direction of the concentrating source is the same as that of the parallel light source.positionAnd the target.targetTwo properties to implement

Sample code for a spotlight source

var spotLight = new THREE.SpotLight(0xffffff) spotLight.position.set(200, 200, Angle = math.pi / 6 scene.add(spotLight)// Add the light object to the sceneCopy the code

What is a light projection

Under the action of a directional light source, objects will form a shadow projection effect

How does light projection calculate

Three. Js object projection simulation calculation mainly set up Three parts

  1. One is to set the model object that produces the projection
  2. One is to set up the model that receives the projection effect
  3. The last one is the setting of the light object itself. How does the light create a projection

Parallel light projection calculation code example

/ / create a directional light source var directionalLight = new THREE. The directionalLight (0 XFFFFFF, 1) directionalLight. Position. Set (60, 100, 40) scene. The add (directionalLight) / / set the light source used to calculate the shadow directionalLight object. CastShadow = true / / set to calculate shadow area, it is best to just close surrounded around the object, If the calculated shadow area is too large: fuzzy, if too small: Can't see or show incomplete directionalLight. Shadow. Camera. Near = 0.5 directionalLight. Shadow. Camera. Far = 300 directionalLight.shadow.camera.left = -50 directionalLight.shadow.camera.right = 50 directionalLight.shadow.camera.top = 200 directionalLight. Shadow. Camera. Bottom = - 100 / / set mapSize properties can make shadow more clear, Less fuzzy / / directionalLight. Shadow. MapSize. Set (1024102)Copy the code

Concentrator projection calculation code example

Var spotLight = new THREE.SpotLight(0xffFFFF) spotLight. Position. set(50, 90, 30) spotLight. Angle = math.pi /6 scene.add(spotLight) spotLight. CastShadow = true Note wrapped around the object's spotLight. Shadow. Camera. Near = 1 spotLight. Shadow. Camera. Far = 300 spotLight. Shadow. Camera. The fov = 20Copy the code

Common properties of optical projection calculations

  • model.castShadowProperties,.castShadowProperty value is a Boolean value, defaultfalseTo set whether a model object casts a shadow under light
  • model.receiveShadowProperties,.receiveShadowProperty value is a Boolean value, defaultfalseUsed to set whether a model object receives projections from other models under light
  • The light source.castShadowProperty if the property is set totrue, the light source will cast dynamic shadows. Warning: This requires a lot of computing resources and needs to be adjusted to make the shadows look correct
  • The light source.shadowattribute

    DirectionalLight shadow object DirectionalLightShadow SpotLightShadow object SpotLight shadow object

  • Shadow object base classLightShadow

    From the point of view of light, the object behind other objects will be in shadow based on the position and direction of the camera object being observed. A two-dimensional vector Vector2 that defines the width and height dimensions of the shadow texture map. Higher values will provide better shadow quality at the cost of calculation time. Wide high value must be a power of 2 until a given device WebGLRenderer. “capabilities. MaxTextureSize despite the width and height don’t have the same (for example, (512, 1024) is a valid). The default value is (512, 512) LightShadow attribute. Map, which is the value of the WebGL rendering target object, the WebGLRenderTarget, using the depth map generated by the built-in camera, the position beyond the pixel depth in the shadow, internally computed during rendering

Official examples of Threejs: ———— Threejs Light Objects: ———— HemisphereLight and AmbientLight: ———— Threejs

I’m FX67ll.com. If you find anything wrong with this article, please comment on it in the comments section. Thank you for reading! If you like this article, welcome to visit my github warehouse address, for me to click a Star, Thanks~ 🙂 forward please note the reference article address, very thank you!!