Three.js在vue中的使用（二）-动画、材质

一、Three.js 动画原理与实现

1. 基本原理

Three.js 的动画系统基于 关键帧（Keyframe） 和 时间轴（AnimationClip） 实现：

• THREE.AnimationMixer：管理多个动画片段的播放器
• THREE.AnimationClip：表示一个动画片段（如行走、跳跃）
• THREE.AnimationAction：表示当前正在播放的动画动作

2. 加载模型并播放动画（GLTF）

import { GLTFLoader } from 'three/addons/loaders/GLTFLoader.js'

const loader = new GLTFLoader()
loader.load('/models/RobotExpressive.glb', (gltf) => {
  const model = gltf.scene
  scene.add(model)

  // 初始化动画混合器
  const mixer = new THREE.AnimationMixer(model)
  const clips = gltf.animations

  if (clips.length > 0) {
    const action = mixer.clipAction(clips[0])
    action.play()
  }

  // 在渲染循环中更新动画
  function animate(time) {
    requestAnimationFrame(animate)
    const delta = clock.getDelta()
    mixer.update(delta) // 更新动画状态
    renderer.render(scene, camera)
  }
  animate()
})

3. 多动画切换控制

const idle = mixer.clipAction(clips.find(c => c.name === 'Idle'))
const walk = mixer.clipAction(clips.find(c => c.name === 'Walk'))

idle.play()
walk.fadeIn(0.5).play() // 淡入淡出切换

二、高亮原理与实现

1. 高亮方式对比

2. 方法一：修改材质颜色（简单）

function highlightObject(obj) {
  obj.material.emissive = new THREE.Color(0xff0000)
}

3. 方法二：使用 OutlinePass 描边高亮（推荐）

需引入 EffectComposer 和 OutlinePass：

npm install three/examples/js/postprocessing/EffectComposer
npm install three/examples/js/postprocessing/OutlinePass

import { EffectComposer } from 'three/addons/postprocessing/EffectComposer.js'
import { RenderPass } from 'three/addons/postprocessing/RenderPass.js'
import { OutlinePass } from 'three/addons/postprocessing/OutlinePass.js'

// 创建后期处理
const composer = new EffectComposer(renderer)
composer.addPass(new RenderPass(scene, camera))

const outlinePass = new OutlinePass(new THREE.Vector2(window.innerWidth, window.innerHeight), scene, camera)
outlinePass.visibleEdgeColor.set('#ff0000') // 高亮颜色
composer.addPass(outlinePass)

// 设置要高亮的对象
let selectedObject = null
raycaster.intersectObjects(model.children, true).forEach(intersect => {
  selectedObject = intersect.object
  outlinePass.selectedObjects = [selectedObject]
})

三、材质原理与常见类型

1. 材质基础概念

材质决定了物体如何与光照交互，Three.js 提供了多种材质类型：

2. 示例：更换材质

const material = new THREE.MeshStandardMaterial({
  color: 0x666666,
  metalness: 0.7,
  roughness: 0.2
})

mesh.material = material

3. 使用纹理贴图

const textureLoader = new THREE.TextureLoader()
const map = textureLoader.load('/textures/metal.jpg')

material.map = map
material.needsUpdate = true