上节总结了下整个开发流程和实现的效果。
这节从技术侧来总结一下:
ui 效果整体还是比较简单的:

人物、飞机、车、电脑等都是加载的模型。
加上了阴影增加真实感。
其余的自绘的物体也都是简单物体,比如立方体、圆柱体。
物理效果我们也都用的简单物体:


包括人物也是,都是用的 Box 立方体的物理刚体。
这样一般的物理效果是没问题。
但如果你想做的更精细,可以用 Blender 来画一下形状的集合体,在 threejs 里加载后用自定义形状画下物理刚体。
此外我们用斜坡的方式,来实现了上下楼梯:

这样实现是最简单的。
然后靠近车、靠近飞机、靠近电脑,都做了距离的检测:

都是用的距离公式。
靠近后按某个键来切换视角。
视角就是 camera 加在哪个物体下:
加在人物模型下就是跟随人物走,加在飞机上就是跟着飞机走、加在车上也是。
电脑比较特殊,我们是进入打电脑状态就 camera 放到全局,固定一个位置。



其实原理都一样的,一通百通。
电脑屏幕这个是用的 CSS3DRenderer。
因为它是用 div 实现的,会盖在其他 3D 物体上,所以我们只有进入打电脑模式才展示它。
人物行走的控制,就是骨骼动画的切换、相机方向的获取、以及人物位置的移动。
这个一般都是开启鼠标锁定模式,通过 mousemove 来改变方向。
跳跃也是位置的改变,只不过是上下位置:

因为我们只有行走的骨骼动画,所以不是那么真实。
如果你用的模型有跳跃的骨骼动画,可以在按 sapce 的时候播放一下,会更真实。
物理效果比较特殊的是这个铰链:


它就是门柱和门用铰链固定在一起,这样推动的时候门会转动。
这个项目主要是练习 cannon,做完这个之后你应该就知道如何实现各种物理效果了,原理是一样的,只不过物理刚体形状的不同。
当然,你可以继续往这个开放世界内加入一些内容,只要画出对应的 ui,然后加上对应的物理刚体和交互效果就可以了。