Three.js 之动画

通过 THREE.RayCaster 获取某个坐标是否在 mesh 上

通过 RayCaster 可以判断当前鼠标是否悬浮在某一个 mesh 上面：

const raycaster = new THREE.Raycaster();
raycaster.setFromCamera(pointer, camera);

const intersects = raycaster.intersectObjects(cubes, false);

通过 DragControls 拖拽 mesh

import { DragControls } from 'three/addons/controls/DragControls.js';
import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls'

const orbit = new OrbitControls(camera, renderer.domElement)
orbit.update()
const controls = new DragControls(cubes, camera, renderer.domElement)
controls.addEventListener('dragstart', function (event) {
  orbit.enabled = false
  event.object.material.emissive.set(0x33333)
})
controls.addEventListener('dragend', function (event) {
  orbit.enabled = true
  event.object.material.emissive.set(0x000000)
})

也可以通过 TransformControls 拖拽 mesh，TransformControls 是一个可视化的拖拽工具

通过 tween 对 mesh 设置动画

Tween.js 提供了两种方式对 mesh 设置动画

通过 onUpdate 函数
通过调用 TWEEN.update() 方法

先初始化 tween 的一些动画参数，然后在对应的函数中调整 mesh 的坐标即可

THREE 提供的动画属性

THREE.AnimationClip：从外部加载一个模型以后，模型里面的动画数据
THREE.AnimationMixer：多个 Clip 的协调管理

PREVIOUSThree.js 之几何体

NEXTThree.js 之后处理