前言
加入了胖达老师的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)，一起交流学习。