共计 2075 个字符，预计需要花费 6 分钟才能阅读完成。
前言
加入了胖达老师的 threejs 直播课。有须要的视频私信取。
本篇文章为入门实践局部。
能够学到什么：
一、软能力
1. 零碎全流程了解 web3D 利用 / 数字孪生 / 元宇宙，程序开发与 3D 美术资源制作
2. 建设与 3D 美术团队良好沟通合作能力
3. 良好把控 3D 画面成果和性能均衡
4. 造就程序和美术联合思维，最简省的形式实现最好的成果
5. 相熟罕用 3D 软件，获得 web3D 程序员根本应用能力
6. 独立开发 Web3D 利用（程序、2D/3D 美术）
7. Three.js 和 3D 美术实战经验
二、硬件能力
1. Three.js 根底 API（本身想法通过 Three.js 失去简略实现）
2. 3D 美术工具的应用
3. 甜甜圈 3D 模型及调整
4. Three.js 掉落的甜甜圈案例
5. Blender 软件根底
6. 全流程演示从展厅图片建设展厅 3D 模型
7. PBR 材质介绍
8. 贴图解决，材质设置
9. 实现残缺展厅模型
10. 加载展厅模型
11. 角色模型
12. 角色骨骼动作
13. 角色动作合并
14. 角色动作管制
15. 环境照明
16. 自在展览的展厅
三、web3D 的次要展现形式
1. 浏览器间接渲染：电脑浏览器、挪动端浏览器（包含微信）以及微信小程序
2. 服务端渲染（服务端运行：成果好，然而经营老本高）将 3D 画面像素推流到前端 / 小程序展现
四、相干概念
-
数字孪生：三维实景模型 + 多系统监控 / 告警数据，实现近程监管（监控、治理）
-
AR：人进入虚拟世界
-
VR：虚构进入事实世界
五、浏览器运行 3D 的计划
-
ActiveX 插件：已过期
-
Flash：进行保护
-
webGL: 浏览器原生反对（ie11 根本反对）
-
webGPU：性能高，目前未失去操作系统和浏览器的广泛支持
六、可实现公布 webGL 到浏览器运行的计划（从重到轻）
##### unity 引擎：wasm、webGL；空包：20m+；不反对 ie11/ 低版本 chrome 及 firefox 及国产化
##### CocosCreator：webGL；空包：6m+；不反对 ie11/ 低版本 chrome 及 firefox
##### threejs: webGL; 库大小：1m-；开源；ie11 均反对
##### babylonjs：webGL；库大小：4m+；微软开元，中文材料绝对较少
Three.js
根底概念
根底场景三大件
- scene 场景 new THREE Scene():
- camera 相机 new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
- renderer 渲染器 new THREE.WebGLRenderer();
灯光
材质（重点）
- MeshBasicMaterial 根底材质（测试调试用的多）
-
MeshStandardMaterial PBR 材质（写实我的项目标配材质）
- PBR：Physically Based Rendering 基于物体渲染，能够模仿物理正确成果
罕用贴图：
- Albedo：漫反射（diffuse）
- MetaIness：金属度（像金属还是像塑料）
- Roughness：粗糙度（润滑外表还是毛糙外表）
- Normal：模仿凹凸成果
- AO：灵通贴图（模仿接触暗影，加强真实感）
几何体
创立几何体三部曲：
const geometry = new THREE.BoxGeometry(1,1,1);
const material = new THREE.MeshBasicMaterial({color:0x00ff00});
const cube = new THREE.Mesh(geometry, material);
scene.add(cube)
帧循环：
- setInterVal: requestAnimationFrame API 之前帧循环驱动形式
- requestAnimationFrame：requestAnimationFrame 有很多的长处，很重要的一点是当用户切换到其余的标签页时，会暂停调用，不会节约处理器资源
加载 gltf/glb 模型：GLTFLoader
new GLTFLoader().load('../resources/models/donuts.glb', (gltf) = >{scene.add(gltf.scene);
})
加载环境光 HDR 图片：RGBELoader
new RGBELoader().load('resources/sky.hdr', function(texture) {
texture.mapping = THREE.EquirectangularReflectionMapping;
scene.enviroment = texture;
renderer.outputEncoding = THREE.sRGBEncoding;
renderer.render(scene, camera);
})
Texture 罕用映射形式：
模型获取
www.sketchfab.com
blender 视图基本操作
写在最初
仅仅是笔记。瑕疵很多，更多的用于记录，更多的常识还要看大帅和胖达老师。如果你也对技术感兴趣，那就退出猿创营 (v:dashuailaoyuan)，一起交流学习。
正文完
