参考网址: 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、点击地面的三个宝箱有惊喜。
(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 视频背景音乐 不播放 或 播放但弹出全屏的问题。