Web3D 从入门到跑路 · 3D 初体验 javascript

3D初体验 本文整理自老冯于凹凸 2022 年技术分享，带领大家从案例、应用、技术生态出发，让大家了解一下 3D 在 Web 端的现状。

Hey 3D what's up，最近在Web圈混得怎样

在“元宇宙”概念越来越火热的背景下，我们准备了一系列的 3D 元宇宙公开课及教学文章，教大家如何从 0 到 1 快速搭建一个3D项目，从中可以学习到 WebGL 底层原理、图形学、热门引擎的使用方法等。在入门前，我们先从案例、应用、技术生态出发，让大家了解一下 3D 在 Web 端的现状。

一、案例展示 1.1 组成部分
【Web3D 从入门到跑路 · 3D 初体验】先从一个基础的 DEMO 出发，一个基础的 3D 一般会有以下模块组成：
（1）渲染打开一个 3D 页面，首先会下载模型文件，然后渲染到页面中

文章图片

（2）动画逐帧渲染动画

文章图片

（3）事件绑定通过 js 的事件绑定，触发对应的渲染。比如点击地面人物移动

（4）场景切换众所周知，游戏里有很多场景，比如游戏加载、游戏开始、游戏结束，就是三个不同的场景。如图就是从主玩法到编辑场景

文章图片

1.2 完整案例
（1）PC 端下面来看一些有趣的例子，先从 PC 端开始

文章图片

这是一名开发者博客，他从开始场景切换成主场景，然后渲染一些树、车 3D 模型，用键盘控制模型的方向，碰撞后将模型旋转，并同时播放对应的音频等。
点击体验一下 https://bruno-simon.com/

文章图片

这是 playcanvas 官网上的宝马 demo，它渲染了动画，点击下面的图片，可以更换这个模型的纹理。
点击体验一下 https://playcanv.as/p/RqJJ9oU9
（2）H5 端再看看移动端的案例

文章图片

上面的赛车游戏，也是从开始场景切到主玩法，之后通过下方的 touch bar 对车/地图的进行位移和其他物体碰撞后，检测触发加速等事件。
扫码或点击体验一下 Mercedes-EQ Formula E Team - Speedboard Game

文章图片

然后是大家熟知的例子，神庙逃亡，也可以看到很明显的场景切换、碰撞检测等。
扫码或点击体验一下 Play Temple Run 2 on Poki

二、应用场景再来看看 3D 在国内一些正式的应用场景。
2.1 App 端

文章图片

比如 VR 看房，VR 线上看房可以没有导购员的干扰，节省带看成本，用户操作上也为该房产留下了大量的数据留存；

文章图片

还有如果在一些购物 App 上看鞋，它会有鞋 3D 模型预览，以及 AR 试穿，可以看清鞋子的细节以及个人试穿后的样子。
2.2 H5 端
一些互动小游戏中，也有 3D 的部分

文章图片

微信小游戏中，也有 3D 的小游戏

文章图片

三、技术生态 3.1 游戏引擎的定义
首先，想要“快速”实现一个 3D 游戏，需要 3D 的游戏引擎，那么到底什么是游戏引擎呢？
（1）已编写好的可编辑电脑游戏系统
（2）交互式实时图像应用程序的核心组件
（3）能容易和快速地做出游戏程式

3.2 游戏引擎的组成
大多数游戏引擎包含以下系统：
（1）渲染引擎
即“渲染器”，绘制图像，并向外部表达图像的系统，含二维图像引擎和三维图像引擎
（2）物理引擎
通过为刚性物体赋予真实的物理属性的方式来计算运动、旋转和碰撞反映
（3）脚本引擎
提供脚本接口，让开发者通过脚本设计游戏，使游戏的开发更加灵活
（4）网络引擎
数据交换的模块，在开发多人在线游戏时使用
（5）人工智能
代替游戏开发中部分劳动密集型内容的生成，如道路检测

3.3 如何选择合适的游戏引擎
如何选择适合游戏引擎，我们一般从以下三个方面考虑：
（1）入门

开发语言
学习资源与技术支持能力
工作流支持力度

如果是刚入门的先要考虑是否是自己熟悉的开发语言，考察该引擎的官方的资源文档、团队的问题修复能力、社区活跃度，以及引擎的工作流支持力度，如是否有 playground 等。
（2）参考

商业化成熟案例
应用广度

从参考实例上考虑，该引擎是否有现实的有名的项目正在使用，使用的广度；
（3）设计

设计理念
性能

从设计上面考虑，引擎的设计理念是否容易理解、方便第三方介入接入。以及需要结合项目的规模及功能要求，需要选择符合要求的性能优化、内存管理、资源管理的引擎。

3.4 技术栈
选取了 Github 上 star 数最多的游戏引擎，选几个来分析一下其优点及不足：
（1）Three.js Three.js 是最流行的 JavaScript 库之一，用于使用 WebGL 在 Web 浏览器中创建和动画化 3D 计算机图形。
A. 优点：

易于学习：非常容易上手，同样适合新手
大型社区：示例多，用户多，社区丰富
好的文档：强大的文档通常是一个强大的库的一个很好的指标，而 Three.js 具有出色的文档
性能优势：出色的性能，能很好地执行复杂的渲染功能
PBR渲染：具有内置的 PBR 渲染，这使得渲染图形更加准确

B. 不足：

不算是游戏引擎：渲染以外的功能很少
面向新手：由于 API 面向新手，因此隐藏了许多高级功能

（2）Babylon.js Babylon.js 是一个强大的、简单的、开放的游戏和渲染引擎。
A. 优点：

出色的测试工具：Playground 是在进行全面开发之前对事物进行测试的出色工具，并且具有出色的启动文档
强大的社区支持：社区活跃和丰富
更新迭代频繁：该框架拥有频繁更新的代码库，并且第三方工具正在积极开发中
PBR 渲染：对 PBR 渲染的支持非常出色
大牌支持：Babylon 得到 Adobe，Microsoft 等大型品牌的使用和支持
问题修复：BUG 修复很快，问题很快能得到解决

B. 不足：

成熟度：2013 年的第一个版本，与许多竞争对手相比，它还算年轻；
文档：API 文档部分参数字段描述不够清晰；
规模：不适合较小的项目

（3）Aframe

使用简单，声明性 HTML：A-Frame 只需插入
实体组件体系结构：A-Frame 是 Three.js 之上的强大框架，为 Three.js 提供了声明性，可组合且可重用的实体组件结构
性能：一个框架是在 Three.js 之上的一个瘦框架
跨平台，有视觉检查器，功能丰富
设计理：由于设计理念与其他引擎不同，接入第三方物理引擎的时候，不太方便做适配

（4）Playcanvas 侧重于游戏引擎而不是渲染引擎，是一款优秀的全功能游戏引擎。但是私有项目收费，没有碰撞偏移，缺少示例。
（5）Whs

使用简单，集成 Three.js 渲染引擎，rendering 渲染自动化，加速 3D 场景原型制作，based 基于组件的场景图
即使使用 Worker（多线程），也可以轻松集成任何高性能物理
基于 ES2015+，pack Webpack 友好

（6）其他 A. Egret 白鹭、LayaAir
还有国内的一些引擎，当我们用中文搜索“游戏引擎”，一般都会推荐白鹭、LayaAir 这两个，它们的优点就是有专门的企业进行开发和维护，也可以花钱让其做定制化需求，并且支持多端开发。
白鹭的话比较偏向于 2D，3D 是近几年开始在 2D 基础上迭代的。而 Laya 比较多的人用来做微信小游戏。不足的是，他们的社区不够活跃，文档更新不及时，对于开发者来说，开发体验不是非常友好。
B. oasis
去年淘宝开源 oasis，用于支付宝的蚂蚁庄园以及其他的一些互动游戏。现在已经有 3500 个 star 了，从它的官方文档上看，使用方式与 three 类似，API 比较简单，也具有基础的物理相关示例，还是比较实用小型、功能小的项目的。
7. 小程序如果想要兼容微信小程序端，微信官方有Adapter的示例: Adapter | 微信开放文档
有以下开源仓库，可供大家参考一下：