Three-.js Development Guide – Reading Notes (Chapter 3)

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

2. THREE.PointLight

• Function: Emits a point light source from a specified point in all directions
• Properties:

• Usage:

let pointLight = new THREE.PointLight("cfcfcf")
pointLight.position.set(x,y,z)
scene.add(pointLight)
Copy the code

3. THREE.SpotLight

• Role: Spotlight effect, suitable for constructing shadows, with direction and Angle
• Properties:

• 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

3. 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:

• Usage:

let hemiLight = new THREE.HemisphereLight(color,groundColor,intensity)
hemiLight.position.set(x,y,z)
scene.add(hemiLight)
Copy the code

2. 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:

• Methods: add ()

let textureFlare3  = THREE.ImageUtiles.loadTexture('.. /img.png')
flare.add(textureFlare3,60.0.6,THREE.AdditiveBlending) 
scene.add(flare)
Copy the code