Three.js 记录

灯光 - 聚光灯

const spotLight = new THREE.SpotLight(0xffffff);
spotLight.position.set(10, 10, 10);

 // 从聚光灯的位置以弧度表示聚光灯的最大范围
spotLight.angle = Math.PI / 7;

 // 聚光锥的半影衰减百分比
spotLight.penumbra = 0.1;

 // 沿着光照距离的衰减量。
spotLight.decay = 1;

 // 距离
spotLight.distance = 200;

// 光功率power = intensity * 4π （一样会影响光强度）
// spotLight.intensity = 1 // 光照强度
spotLight.power = parseInt(lux) / 150

spotLight.castShadow = true;
spotLight.shadow.mapSize.width = 512;
spotLight.shadow.mapSize.height = 512;
spotLight.shadow.camera.near = 10;
spotLight.shadow.camera.far = 200;
spotLight.shadow.focus = 1;

// 聚光灯的方向是从它的位置到目标位置.默认的目标位置为原点  (0,0,0) 。
spotLight.target = target

SpotLight

色温所对应颜色表

轨迹动画

物体位置移动动画

/**
 * 物体位置移动动画
 * @param {Object} box 移动的物体，应为 Mesh/Group
 * @param {Array} positions 位置数组, 每三个数表示一个点 [0, 0, 0,  1, 1, 1]
 * @param {Function} onFinished 动画完成时回调
 * @returns update 用于更新动画的函数
 */
export function positionAnimation(box, positions, onFinished) {
  const DURATION = 3 // 动画持续时间
  const animationGroup = new THREE.AnimationObjectGroup()
  animationGroup.add(box)
  const times = Array.from({length: positions.length / 3}, (_, i) => i)
  const frameKey = new THREE.VectorKeyframeTrack('.position', times, positions)
  const clip = new THREE.AnimationClip('default', DURATION, [frameKey])
  const mixer = new THREE.AnimationMixer(animationGroup)
  const clipAction = mixer.clipAction(clip)
  clipAction.play()
  clipAction.setLoop(THREE.LoopOnce)
  clipAction.clampWhenFinished = true // 动画将在最后一帧之后自动暂停
  const callback = (e) => {
    onFinished && onFinished(e)
    mixer.removeEventListener('finished', callback)
  }
  mixer.addEventListener('finished', callback)

  const clock = new THREE.Clock();
  const update = () => {
    mixer.update(clock.getDelta());
  }
  return update
}

使用方式

// 创建物体
const material = new THREE.MeshPhongMaterial( { color: 0x4080ff, dithering: true } );
const geometry = new THREE.BoxGeometry(15, 3, 15);
const mesh = new THREE.Mesh( geometry, material );
mesh.position.set( 0, 0, 0 );
// 定义经过的点
const positions = [
    0, 0, 0,
    -10, 0, 0,
    -10, 10, 0,
    -10, 10, -10
]

const update = positionAnimation(mesh, positions, () => {
    console.log('播放结束了')
})

function animate() {
    update();
    renderer.render( scene, camera );
    requestAnimationFrame(animate);
}
animate()