Vue+Three.js实现人物奔跑3D场景
来源：互联网 2026-07-20 08:16:04基于Vue与Three.js构建人物奔跑场景：人物加载GLTF骨骼动画原地循环跑步，巨型草坪平面持续向后平移，营造无限奔跑错觉，并添加线性白雾增强空间层次，代码工程化实现。
实现效果说明
先来看看最终效果，心里有个底：
长期稳定更新的攒劲资源： >>>点此立即查看<<<
- 人物模型调用了内置的跑步骨骼动画，原地循环播放，动作流畅自然。
- 一个巨大的草坪平面持续向后平移，视觉上给人向前无限奔跑的错觉。
- 场景中添加了线性白雾，远处的草地逐渐雾化，消除了平面硬边界，让空间感更强。
- 从窗口自适应、光照阴影到纹理平铺、内存释放，全套工程化代码都安排上了。
演示动态图效果如下:
完整代码
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 前端技术学习演示，并未对模型本身做任何修改。
侠游戏发布此文仅为了传递信息，不代表侠游戏网站认同其观点或证实其描述
同类更新
更多
热游推荐
更多-
- DreamStudio
- Android/ | AI绘图
- 2026-06-30
-
-
- Playground AI
- Android/ | AI绘图
- 2026-06-30
-
- Adobe Firefly
- Android/ | AI绘图
- 2026-06-30
-
-
-
- Leonardo AI
- Android/ | AI绘图
- 2026-06-30
-
- Stable Diffusion
- Android/ | AI绘图
- 2026-06-30
