参考网址： http://www.webgl3d.cn/ https://www.three3d.cn/
1、three.js 之 hello world
功能：立方体在三维空间的转动。 代码位置：demo_0_scene
目的：理解 场景 / 相机 / 渲染器 / 坐标系 / 几何体 / 材质 / 物体(网格) 的概念。
2、three.js 是什么，能做什么
three.js：一个基于JavaScript的WebGL引擎（说白了就是封装了WebGL的代码库），其库提供大量特性与API可以在浏览器上绘制3D场景。
用最简单的一句话概括：WebGL 和 Three.js 的关系，相当于 JavaScript 和 jQuery 的关系。
知识体系：几何体 / 材质 / 纹理 / 物体 / 外部模型的加载 / PBR材质与贴图 / 光源与阴影 / sprite / 射线 / 碰撞检测/ css2D / css3D / 动画 / 骨骼动画/tweenjs /粒子特效 / 物理引擎 / 后处理效果 / sharder / 数学的知识（向量，正弦余弦，高等数学的一些函数）/ ......
是否讲解： √ √ √ √ √ × × √ √ √ √ √ √ × × × × × × ×
公司可能用到的地方：
(1) 在公司官网上用3D效果展示产品。
(2) 公司门口的大数据看板用3D更震撼。
(3) 商家后台的数据统计用3D展示更形象。
(4) 网页/移动端 的3D游戏 /3D展厅。
比如：模拟现实的下雨/下雪。物体撞碎的粒子效果。飘扬的国旗。汹涌的海浪。
(5) 公司的宣传视频。
3、搭建3D展厅框架
Vite + Vue3 + Yarn + Js 代码位置：demo_10_vite
（1）用vite搭建开发环境
vite官网：https://vitejs.cn/
（2）部署到服务器上遇到的问题
解决方式：
4、three.js 的基础知识
（1）在本地运行官方示例 。 代码位置：demo_1_three.js_dev
(2) 给物体添加纹理（贴图片）。代码位置：demo_2_texture
(3) 使用射线选中物体。 代码位置：demo_3_ray
(4) 加载外部模型。 代码位置：demo_4_load_model
(5) 动画。 代码位置：demo_5_animate
(6) css2D。 代码位置：demo_6_css2d
(7) css3D。 代码位置：demo_7_css3d
(8) sprite。 代码位置：demo_8_sprite
(9) 盒子模型。 代码位置：demo_9_box
问题1：sprite和Mesh的区别？
问题2：在3D中，显示标签时，选择css2D，css3D，sprte？
5、3D展厅设计与实现
演示Demo：https://dayuqa.rongyi.com/hf/qa/test003/demo_3d_1/dist/
实现的功能有：1、点击空中的三个按钮观看机器人表演。
2、点击地面的三个宝箱有惊喜。
3、亭子/桌子/围墙 支持碰撞检测。 4、机器人可以通过台阶进入演讲台。 5、点击演讲台的图片可以切换到下一张。 6、传送门可以传送机器人。 7、视角切换可以点击。(1) 碰撞检测的设计与实现
(1) 碰撞检测 之 射线
(2) 碰撞检测 之 八叉树
(2) 虚拟摇杆的设计与实现
(3) 第一人称 和 第三人称的设计与实现
(4) 传送带的设计与实现
(5) 演讲台图片的切换
（6）使用射线计算台阶的高度
(7) 让滑动有阻尼的效果
6、解决的一些问题
(1) 手机滑动效果比较生硬。
(2) 虚拟摇杆 和 手机互动 不能同时操作（检测触摸多个点的问题）。
(3) IOS 点击 物体 不生效
(4) 模型没有阴影。
(5) 默认的场景，Mesh锯齿感很强。
(6) 控制animate函数内的调用频次。
(7) 摄像头围绕模型旋转。
(8) 轨道控制器OrbitControls 引起的冲突。
(9) 性能监视器 随时观察FPS的变化。
(10) 演讲台切换图片中 黑纹理的问题。
(11) 机器人动画控制循环调用引起的问题。
(12) 从场景中查找mesh的方法。
(13) 屏幕滑动只接收触摸点高度小于3/4的位置。
(14) 射线检测 与 移动 顺序的问题。
(15) 模型放大缩小的问题。
(16) 如何把射线画出来。
7、3D展厅性能优化
优化前的问题： 手机发烫，FPS较低。
(1) 删掉没用的模型和功能。 下雨功能删除后，性能提升很大。雨滴class 只new 不 循环调用也影响性能。
(2) 删掉没用的日志。 循环日志消耗性能也很大。
(3) 同时渲染css2d/css3d 导致render的渲染性能变低。
(4) 事件的合并。
(5) 区分PC/ Android/ IOS的事件，删除重复的事件。比如 click事件， 在android手机同时支持mouse事件和touch事件。
(6) 碰撞检测的数组 不要添加重复的Mesh。
(7) camera near 和 far参数的设置。
8、3D展厅待解决的问题与方案
(1) 在亭子下面，FPS降低的原因
(2) 演讲台首次点击加载慢的原因
(3) 超多模型的加载
(4) 手机浏览器 / 支付宝 打不开的问题
(5) 视角切换造成虚拟摇杆方向错乱的问题（滑动的方向）
(6) IOS 视频背景音乐 不播放 或 播放但弹出全屏的问题。
标签：demo,代码,three,js,Demo,展厅,3D From： https://www.cnblogs.com/maohuidong/p/17540363.html