The light source in three.js

Based on light source

  1. THREE.AmbientLight
  • Action: Applies color globally.
  • Scene: Use with other light sources to soften shadows or add extra color to the scene.
  • Usage:
let ambientLight = new THREE.AmbientLight("#0c0c0c")
scene.add(ambientLight)
Copy the code
  1. THREE.PointLight
  • Function: Emits a point light source from a specified point in all directions
  • Properties:
attribute instructions
color color
distance Distance of light source, default 0
intensity Intensity of light source, default 1
position Position of the light source in the scene
visible Sets whether the light source is visible true, false
  • Usage:
let pointLight = new THREE.PointLight("cfcfcf")
pointLight.position.set(x,y,z)
scene.add(pointLight)
Copy the code
  1. THREE.SpotLight
  • Role: Spotlight effect, suitable for constructing shadows, with direction and Angle
  • Properties:
Commonly used attributes instructions
angle Launch Angle, math.pi /3 by default
castShadow Set to true to cast shadows
color color
exponent The intensity decay index is emitted farther as the value increases
intensity The default light intensity is 1
onlyShadow When true, only shadows are added and no light is added to the scene
position location
shadowDarkness Shadow darkness, module recognition 0.5
shadowCameraFar Projection far point
shadowCameraFov Projection readings
shadowCameraNear Projection near point
shadowCameraVisible Projection mode visible
target Project objectives
  • Usage:
let spotLight = new THREE.spotLight("cfcfcf")
spotLight.position.set(x,y,z)
spotLight.castShadow = true
spotLight.target = plane
scene.add(spotLight)
Copy the code
  1. THREE.DirectionalLight
  • Action: Same intensity, similar to sunlight
  • Properties: Like spotLight, the difference is that unlike spotLight, it doesn’t vary by distance

A special light source

  1. THREE.HemisphereLight
  • Function: Can create a more natural outdoor lighting effect
  • Properties:
attribute instructions
groundColor The color of the light emitted from the ground
color The color of the light from the sky
intensity The intensity of light exposure
  • Usage:
let hemiLight = new THREE.HemisphereLight(color,groundColor,intensity)
hemiLight.position.set(x,y,z)
scene.add(hemiLight)
Copy the code
  1. THREE.AreaLight
  • Function: Defines a rectangular glow area, using the extension library
  • The renderer: using THREE WebGLDeferredRenderer object to render complexity light source
  • Extension libraries:

  • Renderer use:
// More on parameters in Chapter 10
    let renderer = new THREE.WebGLDeferreRenderer({
        width:window.innerWidth,
        height:window.innerHeght,
        scale:1.antialias:true.tonemapping:THREE.FilmicOperator,
        brightness:2.5
    })
Copy the code
  • Use of light source:
// Same as other light sources
let areaLight1 = new THREE.AreaLIGHT(0xff0000.3)
areaLight1.poistion.set(-10.10, -35)
areaLight1.rotation.set(-Math.PI / 2.0.0)
areaLight1.width = 4
areaLight1.height = 9.9
scene.add(areaLight1)
Copy the code

Create lens flare

  • Creation method:
    flare = new  THREE.LensFlare(texture, size, distance, blending, color, opacity)
    flare.position = spotLight.position
    scene.add(flare)
Copy the code
  • Properties:
attribute instructions
texture A texture is a picture that determines the shape of the halo
size The flare size, in pixels, if -1 represents the size of the texture Bunsen
distance Distance from light source 0 to camera 1
blending Mixed materials
color The color of the halo
opacity transparency
  • Methods: add ()
let textureFlare3  = THREE.ImageUtiles.loadTexture('.. /img.png')
flare.add(textureFlare3,60.0.6,THREE.AdditiveBlending) 
scene.add(flare)
Copy the code