Three.js 基础入门--第16课：实战篇之人物操作案例

紫微前端

已于 2023-04-11 09:54:51 修改

阅读量711

点赞数

CC 4.0 BY-SA版权

分类专栏： three.js基础入门（案例代码及效果在最后一节课的底部）文章标签： three.js

于 2023-04-11 09:45:40 首次发布

本文链接：https://blog.csdn.net/liuhao9999/article/details/130076527

three.js基础入门（案例代码及效果在最后一节课的底部）专栏收录该内容

16 篇文章 ¥299.90 ¥399.90

订阅专栏

超级会员免费看

本文通过一个Three.js案例，展示了如何创建场景、添加人物模型与动画，包括人物跟随操作杆移动、跑步及攻击操作。通过加载模型、调整动画，实现了连环招效果。案例代码详细，适合初学者学习。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

下图是本文所分享实例最后的展示效果。本案例实现了人物跟随操作杆移动并跑步的动作，右边按钮可以实现攻击，短时间内连按可以实现不同的攻击动作。接下来我将带大家一步步实现这个案例。

场景的搭建

首先，我们需要把舞台搭建出来，先创建 Scene 场景。

创建 Scene

如下代码，我们创建了场景，并将背景设置为灰色。此外，还为场景设置了雾化效果，其中的三个参数分别表示雾的颜色、雾的开始距离、完全雾化距离相机的位置。

scene = new THREE.Scene();
scene.background = new THREE.Color(0xa0a0a0);
scene.fog = new THREE.Fog(0xa0a0a0, 1000, 11000);

创建 Camera

我们创建了一个与地面呈 45 度角并朝向原点的相机，代码如下：

camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 0.1, 20000);
camera.position.set(0, 800, -800);
camera.lookAt(new THREE.Vector3());

了解本专栏

超级会员免费看