Skip to content

249. 综合实战:开放世界(技术总结)

Published:

上节总结了下整个开发流程和实现的效果。

这节从技术侧来总结一下:

ui 效果整体还是比较简单的:

image.png

人物、飞机、车、电脑等都是加载的模型。

加上了阴影增加真实感。

其余的自绘的物体也都是简单物体,比如立方体、圆柱体。

物理效果我们也都用的简单物体:

2026-01-11 21.21.02.gif

image.png

包括人物也是,都是用的 Box 立方体的物理刚体。

这样一般的物理效果是没问题。

但如果你想做的更精细,可以用 Blender 来画一下形状的集合体,在 threejs 里加载后用自定义形状画下物理刚体。

此外我们用斜坡的方式,来实现了上下楼梯:

image.png

这样实现是最简单的。

然后靠近车、靠近飞机、靠近电脑,都做了距离的检测:

image.png

都是用的距离公式。

靠近后按某个键来切换视角。

视角就是 camera 加在哪个物体下:

加在人物模型下就是跟随人物走,加在飞机上就是跟着飞机走、加在车上也是。

电脑比较特殊,我们是进入打电脑状态就 camera 放到全局,固定一个位置。

2025-12-20 19.13.38.gif

2026-01-03 00.27.25.gif

2026-01-11 23.30.18.gif

其实原理都一样的,一通百通。

电脑屏幕这个是用的 CSS3DRenderer。

因为它是用 div 实现的,会盖在其他 3D 物体上,所以我们只有进入打电脑模式才展示它。

人物行走的控制,就是骨骼动画的切换、相机方向的获取、以及人物位置的移动。

这个一般都是开启鼠标锁定模式,通过 mousemove 来改变方向。

跳跃也是位置的改变,只不过是上下位置:

2025-12-07 22.20.44.gif

因为我们只有行走的骨骼动画,所以不是那么真实。

如果你用的模型有跳跃的骨骼动画,可以在按 sapce 的时候播放一下,会更真实。

物理效果比较特殊的是这个铰链:

2026-01-18 21.25.25.gif

2026-01-18 21.27.35.gif

它就是门柱和门用铰链固定在一起,这样推动的时候门会转动。

这个项目主要是练习 cannon,做完这个之后你应该就知道如何实现各种物理效果了,原理是一样的,只不过物理刚体形状的不同。

当然,你可以继续往这个开放世界内加入一些内容,只要画出对应的 ui,然后加上对应的物理刚体和交互效果就可以了。

评论