three.js -- Lights 灯光

性能

低耗能
环境光AmbientLight
半球光HemisphereLight

中耗能
平行光DirectionalLight
点光源PointLight

高耗能
聚光灯SpotLight
平面光RectAreaLight

// 环境光
const ambientLight = new THREE.AmbientLight(0xffffff, 0.5)
scene.add(ambientLight)

// 平行光 (对投影有影响)
const directionalLight = new THREE.DirectionalLight(0xff0000, 0.2)
directionalLight.postion.set(1, 2, 0)
scene.add(directionalLight)

// 半球光(两个颜色值)物体在中间
// 一个是从上往下的光线颜色 (天空中发出的光线)
// 一个是从下往上的光线颜色 (地面发出的光线)
const hemisphereLight = new THREE.HemisphereLight(0xff0000, 0x0000ff, 0.5)
scene.add(hemisphereLight)

// 点光源（像灯泡，一个点像四周发出的光线）
const pointLight = new THREE.PointLight(0xff0000, 0.5, 10, 2)
pointLight.position.set(1, -0.5, 1)
scene.add(pointLight)

// 平面光 只支持 MeshStandardMaterial 和 MeshPhysicalMaterial 两种材质。
// 后两个参数设置宽高
const rectAreaLight = new THREE.RectAreaLight(0x4e00ff, 2, 3, 1)
rectAreaLight.position.set(1, 0, 1)
rectAreaLight.lookAt(new THREE.Vector3())// 改变方向
scene.add(rectAreaLight)

// 聚光灯 (像手电筒)
const spotLight = new THREE.SpotLight(0x78ff00, 0.5, 10, Math.PI * 0.1, 0.25, 1)
spotLight.position.set(0,2,3)
scene.add(spotLight)
// --移动灯光位置
spotLight.target.position.x = -0.75
scene.add(spotLight.target)

灯光助手

// 平行光助手
const directionalLightHelper = new THREE.DirectionalLightHelper(directionalLight, 0.2)
scene.add(directionalLightHelper)

// 点光源助手
const pointLightHelper = new THREE.PointLightHelper(pointLight, 0.2)
scene.add(pointLightHelper)

// 聚光灯助手需要更新
const spotLightHelper = new THREE.SpotLightHelper(spotLight)
scene.add(spotLightHelper)
window.requestAnimationFrame(() => {
    spotLightHelper.update()
})

// 平面光助手需要更新
// 需要单独导入
import { RectAreaLightHelper } from 'three/examples/jsm/helpers/RectAreaLightHelper.js'

const rectAreaLightHelper = new THREE.RectAreaLightHelper(rectAreaLight)
scene.add(rectAreaLightHelper)