Vue+Three.js实现人物奔跑3D场景

实现效果说明

先来看看最终效果，心里有个底：

1. 人物模型调用了内置的跑步骨骼动画，原地循环播放，动作流畅自然。
2. 一个巨大的草坪平面持续向后平移，视觉上给人向前无限奔跑的错觉。
3. 场景中添加了线性白雾，远处的草地逐渐雾化，消除了平面硬边界，让空间感更强。
4. 从窗口自适应、光照阴影到纹理平铺、内存释放，全套工程化代码都安排上了。

演示动态图效果如下:

完整代码

1. template 结构：

 复制代码<template>
  <div class="three-container" ref="content" id="three">div>
template>

2. script 代码：

 复制代码

3. css样式代码:

 复制代码.three-container {
    width: 100%;
    height: 100%;
    position: relative;
    overflow: hidden;
}

三大核心实现原理拆解

原理说穿了其实很简单，无非是骨骼动画、相对运动和雾化这几个老套路，但组合起来效果出奇的好。

1. 人物原地跑步：GLTF 骨骼动画驱动

先用 GLTFLoader 把模型文件拉进来，然后通过 THREE.AnimationMixer 这个动画混合器，去解析模型内部自带的那些动画片段。接着用 clipAction() 方法把跑步动作单独拎出来，调用 play() 让它循环播放。人物坐标全程固定不动，所以看起来就是原地跑动，非常自然。

2. 无限滚动草地：相对运动视觉欺骗

核心思路其实特别简单：人物不动，地面一直往后移。人的眼睛很容易被这种相对运动骗过去，以为自己在向前跑。

• 先造一个超大尺寸的平面当作地面，尺寸够大，短距离移动就不会露出边界。
• 在渲染循环里，每帧都去修改地面的 position.z，让它向后偏移。
• 当地面偏移量到了阈值 -500 的时候，直接把它位置重置回 0，这样无缝循环，就实现了无限跑道的感觉。
• 草地纹理用了 RepeatWrapping 重复平铺，保证那么大一片地面纹理不会拉伸变形。

3. 场景雾化景深：线性雾增强真实感

通过 THREE.Fog 给场景加上一层线性白雾，效果立竿见影。

• 参数说明：new THREE.Fog(雾颜色, 近裁剪距离, 远裁剪距离)。
• 距离小于 280：完全无雾，近处的草地清晰可见。
• 距离 280 到 1050 之间：雾气逐渐变浓，画面开始柔化。
• 距离超过 1050：完全被白雾覆盖，远处的边界直接消失，平面生硬的边缘被弱化，空间层次感一下子就上来了。

模型说明

本文演示所用的 3D 模型来源于网络，版权归原作者所有。本文仅做 Three.js 前端技术学习演示，并未对模型本身做任何修改。