Web3D-从0开始学习Threejs+Blender实现甜甜圈掉落效果| 大帅老猿threejs特训

前言

最近大帅邀请胖达老师带来了元宇宙实战特训，具体讲解了如何使用Blender进行3D建模、添加动画以及如何在Threejs中展示、控制3D模型，让我特别感慨，原来一些看似复杂的3D项目可以如此简单的实现。

Web3D 简介

Web3D的主要展示方式:

1. 浏览器直接渲染：电脑浏览器、移动端浏览器（包括微信浏览器） 微信小程序；
2. 服务端渲染（服务端运行，效果好，运营成本高）；将3D画面像素推流到前端浏览器/小程序展示；

3D近几年流行的相关概念：

1. 数字孪生：三维实景模型 + 多系统监控/告警数据，实现远程监管（监控、管理）;
2. VR：把人装进虚拟环境
3. AR：把虚拟装进现实

浏览器运行3D的方案

ActiveX插件： IE、Chrome老版本、Firefox老版本，已过时；

Flash： 时代王者，官方已停止维护；

WebGL： 浏览器原生支持（IE11基本支持，其它浏览器基本都支持）

WebGPU: 性能高，目前还未得到操作系统和浏览器的广泛支持；

可实现发布WebGL到浏览器运行的方案（从重到轻）：

Unity引擎： wasm webgl 空包：20m+ （不支持ie11低版本chrome及Firefox及国产化）

CocosCreator： webgl 空包：6m+ （不支持ie11及低版本chrome及firefox）

threejs: webgl 库大小：1m- （开源，IE11均支持）

ba