Three.js 第一人称漫游控制教程

张

张建站

2026/6/27 22:14:02

10分钟阅读

第一人称漫游控制 ·Person Move· ▶ 在线运行案例案例合集三维可视化功能案例threehub.cn开源仓库github地址https://github.com/z2586300277/three-cesium-examples400个案例代码:网盘链接你将学到什么OrbitControls 相机轨道交互FBXLoader 加载 FBX 城市/角色模型requestAnimationFrame渲染循环与resize自适应效果说明本案例演示第一人称漫游控制效果基于 WebGL 实现「第一人称漫游控制」可视化效果附完整可运行源码核心用到 OrbitControls、FBXLoader。建议先打开文首在线案例查看动态画面再对照下方源码逐步理解。核心概念Scene / Camera / WebGLRenderer构成最小渲染闭环大场景可开logarithmicDepthBuffer缓解 Z-fighting。OrbitControls提供轨道旋转/缩放开启enableDamping后需在 animate 中controls.update()。阅读下方完整源码时建议从init/load/animate三条主线入手再深入 shader 与工具函数。实现步骤搭建灯光与环境如有requestAnimationFrame 循环 update render代码要点import * as THREE from threeimport { OrbitControls } from three/examples/jsm/controls/OrbitControls.js import { FBXLoader } from three/examples/jsm/loaders/FBXLoader.js import { PointerLockControls } from three/examples/jsm/controls/PointerLockControls.js import { GUI } from dat.guiconst box document.getElementById(box)const scene new THREE.Scene()const camera new THREE.PerspectiveCamera(50, box.clientWidth / box.clientHeight, 0.1, 100000) camera.position.set(0, 100, 400)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) controls.enableDamping truescene.add(new THREE.AmbientLight(0xffffff, 1))// 天空 const urls [0, 1, 2, 3, 4, 5].map(k (FILE_HOST files/sky/skyBox0/ (k 1) .png)); const textureCube new THREE.CubeTextureLoader().load(urls); scene.background textureCube; scene.backgroundBlurriness 0.5;// 地面 const groundGeometry new THREE.PlaneGeometry(10000, 10000); const map new THREE.TextureLoader().load(FILE_HOST images/channels/black.png) map.wrapS map.wrapT THREE.RepeatWrapping; map.repeat.set(100, 100); const groundMaterial new THREE.MeshStandardMaterial({ map, envMap: textureCube }); const groundMesh new THREE.Mesh(groundGeometry, groundMaterial); groundMesh.rotation.x -Math.PI / 2; scene.add(groundMesh);// 加载模型 fbx new FBXLoader().load(HOST /files/model/city.FBX, (object3d) { scene.add(object3d) object3d.scale.set(0.06, 0.06, 0.06) })// 创建第一人称漫游控制器 const pointLockControls new PointerLockControls(camera, box); pointLockControls.speed 2// 处理键盘事件以实现相机的移动 const keyboard {}; const moveForward () pointLockControls.moveForward(pointLockControls.speed) const moveBackward () pointLockControls.moveForward(-pointLockControls.speed) const moveLeft () pointLockControls.moveRight(-pointLockControls.speed) const moveRight () pointLockControls.moveRight(pointLockControls.speed) const moveUp () pointLockControls.getObject().position.y pointLockControls.speed const moveDown () pointLockControls.getObject().position.y - pointLockControls.speed// 第一人称 pointLockControls.pointLockRender () { if (keyboard[KeyW]) moveForward(); else if (keyboard[KeyA]) moveLeft(); else if (keyboard[KeyS]) moveBackward(); else if (keyboard[KeyD]) moveRight(); else if (keyboard[ArrowUp]) moveUp(); else if (keyboard[ArrowDown]) moveDown(); }// 键盘事件 const onKeyDown function (event) { event.preventDefault(); keyboard[event.code] true }// 键盘事件 const onKeyUp function (event) { event.preventDefault(); keyboard[event.code] false }// 锁定事件 pointLockControls.addEventListener(lock, () { window.addEventListener(keydown, onKeyDown) window.addEventListener(keyup, onKeyUp) })// 解锁事件 pointLockControls.addEventListener(unlock, () { window.removeEventListener(keydown, onKeyDown) window.removeEventListener(keyup, onKeyUp) })const gui new GUI() gui.add(pointLockControls, isLocked).onChange((v) v ? pointLockControls.lock() : pointLockControls.unlock()).name(漫游).listen() gui.add(pointLockControls, speed).name(漫游速度)animate() function animate() { requestAnimationFrame(animate) pointLockControls.isLocked ? pointLockControls.pointLockRender() : controls.update() renderer.render(scene, camera) }window.onresize () { renderer.setSize(box.clientWidth, box.clientHeight) camera.aspect box.clientWidth / box.clientHeight camera.updateProjectionMatrix() }GLOBAL_CONFIG.ElMessage(键盘事件WASD移动, esc退出)完整源码GitHub小结本文提供第一人称漫游控制完整 Three.js 源码与在线 Demo建议先运行案例再改 uniform/参数做二次实验更多 Three.js 实战案例见 three-cesium-examples 合集与 GitHub 开源仓库

C++STLmap高阶调优：从源码改造到分布式方案

在C中，std::map如同一颗闪耀的恒星，以其优雅的自动排序和高效的O(log n)查找俘获了无数开发者的心。然而，当数据洪流汹涌而来，高并发与海量吞吐的压力如黑洞般吞噬性能时，它的红黑树内核便显露疲态。作为一名深耕C多年…...

2026/6/27 22:11:17 阅读更多 →

如何快速下载网易云音乐双语歌词：LrcHelper完整使用指南

如何快速下载网易云音乐双语歌词：LrcHelper完整使用指南【免费下载链接】LrcHelper 从网易云音乐下载带翻译的歌词 Walkman 适配项目地址: https://gitcode.com/gh_mirrors/lr/LrcHelper LrcHelper是一款专为网易云音乐用户设计的免费歌词下载工具&#xf…...

2026/6/27 22:08:15 阅读更多 →

IB-Robot架构深度解析：如何打通LeRobot与ROS 2生态壁垒

IB-Robot架构深度解析：如何打通LeRobot与ROS 2生态壁垒【免费下载链接】IB_Robot Save the code of IB-Robot, an AI robot execution framework developed by openEuler Embedded for embodied intelligence scenarios. It includes references to the forked ver…...

2026/6/27 21:57:10 阅读更多 →

手撕CNN：从卷积计算到工程落地的全链路解析

1. 这不是“讲概念”的课，是带你亲手拆开CNN看齿轮怎么咬合你点开这篇，大概率不是为了背定义——可能刚被导师甩来一篇CVPR论文，满页的feature map、stride、padding看得头皮发麻；也可能在调一个图像分类模型，loss曲线…...

2026/6/25 10:56:32 阅读更多 →

PVZ Toolkit完整指南：植物大战僵尸终极修改器使用教程

PVZ Toolkit完整指南：植物大战僵尸终极修改器使用教程【免费下载链接】pvztoolkit 植物大战僵尸 PC 版综合修改器项目地址: https://gitcode.com/gh_mirrors/pv/pvztoolkit PVZ Toolkit是一款专为经典游戏植物大战僵尸设计的综合修改器，它为玩家…...

2026/6/25 6:32:44 阅读更多 →

嵌入式功能安全实践：NXP IEC60730B安全库核心测试与集成指南

1. 项目概述与功能安全背景在嵌入式系统开发领域，尤其是涉及家电、工业控制、汽车电子等安全关键型应用时，仅仅实现功能正确是远远不够的。系统必须在整个生命周期内，具备检测并响应内部硬件故障的能力，以防止因随机硬件失效导致…...

2026/6/27 2:51:13 阅读更多 →

XXMI启动器：6款热门二次元游戏模组管理的技术实现与效率革命

XXMI启动器：6款热门二次元游戏模组管理的技术实现与效率革命【免费下载链接】XXMI-Launcher Modding platform for GI, HSR, WW and ZZZ 项目地址: https://gitcode.com/gh_mirrors/xx/XXMI-Launcher XXMI启动器是一款专为二次元游戏模组管理设计的开源平台…...

2026/6/25 10:56:32 阅读更多 →