Three.js 点击第三人称移动教程-北京尧图网络

点击第三人称移动 ·Person Move· ▶ 在线运行案例案例合集三维可视化功能案例threehub.cn开源仓库github地址https://github.com/z2586300277/three-cesium-examples400个案例代码:网盘链接你将学到什么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 与 OrbitControlsLoader 异步加载模型/纹理资源rAF 循环中 update 并 render代码要点import * as THREE from threeimport { OrbitControls } from three/examples/jsm/controls/OrbitControls.js import { GLTFLoader } from three/examples/jsm/loaders/GLTFLoader.js import gsap from gsapconst 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 nullnew GLTFLoader().load(FILE_HOST files/model/Soldier.glb,gltf {group gltf.scenescene.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 nullfunction 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 // 恢复控制})}完整源码GitHub小结本文提供点击第三人称移动完整 Three.js 源码与在线 Demo建议先运行案例再改 uniform/参数做二次实验更多 Three.js 实战案例见 three-cesium-examples 合集与 GitHub 开源仓库

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

相关推荐

AI与大模型新闻日报 | 2026-07-16

AD高效设计：一键导入与分类管理原理图库PCB库实战指南

生化危机4高清重制版代码镜像下载2026最新下载最快

更多资讯

GraphRAG多模态技术解析与应用实践

impeccable高级表达指南：从词源到搭配，告别只会用perfect

context-mode全解析：LLM长对话的上下文管理与RAG混合实战

SeekDB：自然语言转SQL的高效数据库查询工具

PXIe/PXI全混合8槽4 Link背板：架构解析与系统集成实战

Flutter在OpenHarmony上的游戏开发实战

今日更新

学生选课系统DFD图绘制指南：边界划分与分层校验实战

JIRA敏捷落地：Scrum角色权限、Sprint与燃尽图避坑指南

SEMI S8人机工程验收实战：从条款拆解到现场实测的完整指南

本周精选

防幻觉智能体架构：电源硬件设计中的大模型编排与工具化实践

OpenGL面试核心考点：渲染管线、矩阵变换与性能排查全解析

全国计算机二级C语言真题PDF高效刷题指南

本月热门

我发现了一个新思路：用 Remotion + Claude Code 像写代码一样自动化生成短视频

Windows下 Codex 中 Chrome 和 Computer Use 插件不可用问题排查及解决参考方式：TaoToken 统一 Key 配置与验证

2026 大模型集体涨价：用 Python 做企业 Token 成本测算与选型避坑（附配置）

读完文章，想聊聊您的网站？