当前位置：首页 > news >正文

Three.js 点击第三人称移动教程

news 2026/7/16 9:40:42

点击第三人称移动 ·Person Move· ▶ 在线运行案例

案例合集：三维可视化功能案例（threehub.cn）
开源仓库github地址：https://github.com/z2586300277/three-cesium-examples
400个案例代码:网盘链接

你将学到什么

AnimationMixer 骨骼动画播放与过渡
glTF/FBX/OBJ 外部模型加载
相机交互控制器
GSAP / anime.js 属性动画
requestAnimationFrame 渲染循环

效果说明

本案例演示点击第三人称移动效果：支持鼠标拾取、绘制或拖拽交互；核心用到 OrbitControls、glTF/Draco、GSAP。建议先打开文首在线案例查看动态画面，再对照下方源码逐步理解。

核心概念

AnimationMixer驱动 glTF 骨骼动画；每帧mixer.update(delta)。动作切换可用crossFadeTo平滑过渡。
Loader异步加载模型；glTF 返回gltf.scene，加载后注意scale与坐标系。Draco 需配置DRACOLoader。
OrbitControls轨道旋转缩放；开enableDamping时每帧需controls.update()。
时间线库驱动 position/rotation/uniform，与 rAF 渲染循环配合。

实现步骤

搭建 Scene / Camera / Renderer 与 OrbitControls
Loader 异步加载模型/纹理资源
rAF 循环中 update 并 render

代码要点

import * as THREE from 'three'import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls.js' import { GLTFLoader } from 'three/examples/jsm/loaders/GLTFLoader.js' import gsap from 'gsap'
const box = document.getElementById('box')
const scene = new THREE.Scene()
const camera = new THREE.PerspectiveCamera(75, box.clientWidth / box.clientHeight, 0.1, 1000)
camera.position.set(5, 5, 5)
const renderer = new THREE.WebGLRenderer({ antialias: true, alpha: true, logarithmicDepthBuffer: true })
renderer.setSize(box.clientWidth, box.clientHeight)
box.appendChild(renderer.domElement)
const controls = new OrbitControls(camera, renderer.domElement)
scene.add(new THREE.AmbientLight(0xffffff, 4), new THREE.GridHelper(40, 20))
animate()
function animate() {
requestAnimationFrame(animate)
renderer.render(scene, camera)
}
let group = null
new GLTFLoader().load(FILE_HOST + 'files/model/Soldier.glb',
gltf => {
group = gltf.scene
scene.add(group)
const clock = new THREE.Clock() // 时钟
const mixer = new THREE.AnimationMixer(group) // 模型动画
group.mixerAnimateRender = () => mixer.update(clock.getDelta()) // 动画帧
group.currentAction = mixer.clipAction(gltf.animations[3]) // walk 动画
}
)
const raycaster = new THREE.Raycaster() // 射线
const targetPositon = new THREE.Vector3() // 目标位置
const plane = new THREE.Plane(new THREE.Vector3(0, 1, 0), 0) // 碰撞面
// 点击事件 box.addEventListener('click', (event) => {
const mouse = new THREE.Vector2((event.offsetX / event.target.clientWidth)2 - 1, -(event.offsetY / event.target.clientHeight)2 + 1)
raycaster.setFromCamera(mouse, camera)
raycaster.ray.intersectPlane(plane, targetPositon)
const mesh = new THREE.Mesh(new THREE.BoxGeometry(0.1, 0.1, 0.1), new THREE.MeshBasicMaterial())
mesh.position.copy(targetPositon)
scene.add(mesh)
goAddress(group, targetPositon)
})
let oldgsap = null
function goAddress(group, targetPositon) {
oldgsap?.kill() // 停止上一个动画
const distance = group.position.distanceTo(targetPositon) // 距离
const vector = camera.position.clone().sub(group.position) // camera 和 group 差向量
group.lookAt(targetPositon) // 模型朝向
group.rotation.y += Math.PI // 朝向纠正
const duration = distance / 3 // 距离 / 速度
oldgsap = gsap.to(group.position, {
...targetPositon, duration, ease: "none",
onStart: () => {
controls.enabled = false // 禁止控制
group.currentAction.play() // 播放动画
},
onUpdate: () => {
group.mixerAnimateRender() // 动画帧
controls.target.copy(group.position) // 目标跟随 camera.position.lerp(group.position.clone().add(vector), 0.1) // 相机跟随
},
onComplete: () => controls.enabled = true // 恢复控制
})}