关于前端:Threejs和Blender入门元宇宙-大帅老猿threejs特训

一、元宇宙入门

元宇宙的概念译自英语名词 metaverse。其前缀“meta”有“元”之义，词根“verse”代表宇宙（universe），二者组合起来为“超过宇宙”，意即元宇宙，是利用互联网、软件、区块链等多种技术将事实与虚拟世界交融。苹果、微软、Facebook 和华为等高科技公司都对元宇宙进行不同的诠释，让咱们感到有点神秘又有一点含糊，学习胖达老师和大帅老师的组织 Web3D 实训，学习了从 Three.js 和 Blender 的角度来入门元宇宙。
胖达老师的培训视频见 B 站地址 https://space.bilibili.com/35…

二、Three.js 和 Blender 简介

Three.js 是基于原生 WebGL 封装运行的三维引擎，就是应用 javascript 来实现 3D 成果。为了真正可能让场景借助 three.js 来进行显示，须要场景、相机和渲染器几个对象，这样就能透过摄像机渲染出场景。Three.js 官网地址：https://threejs.org/。

Blender 能够运行于不同的平台，而且装置后占很少空间（相较于其它同类型软件）。尽管它常常不反对阐明文档或示例公布，但其领有极丰盛的性能，而且绝大部分是高端模块塑造软件。Blender 官网网址：https://www.blender.org/

三、用 Blender 建模

首次应用 Blender 感觉有点晕，在 3D 坐标系绘制图像，跟着胖达老师用 Blender 做展厅，在应用 Blender 过程中发现 Blender 做 3D 图像太不便了，相熟快捷键后做 3D 图像效率特地高。罕用的快捷键有：

• A 全选
• AA 勾销全选（按两次 A）
• Shift +D 复制物体（右键或者 ESC 勾销挪动）
• Shift+ 鼠标中键盘 挪动视角
• 鼠标滚轮 推拉视角
• 鼠标中键按住 旋转视角
• G grab 挪动
• S scale 缩放

• R rotate 旋转

  建模后的图像如下：

而后，应用“文件”-“导出”的性能，将模型导出为 glTF 文件。如果须要其余 Blender 模型，能够在 https://sketchfab.com/ 查找收费的模型应用。

四、用 Three.js 实现 3D 动态效果

1. Three.js 的场景三要素
   场景（scene）、相机（camera）和渲染器（renderer）是 three.js 显示的三要素。

const scene = new THREE.Scene();  // 创立场景
const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);  // 创立相机
const renderer = new THREE.WebGLRenderer();   // 创立渲染器
renderer.setSize(window.innerWidth, window.innerHeight);  // 设置渲染器尺寸
document.body.appendChild(renderer.domElement);  

2. 增加模型
   加载 glf/glb 模型

new GLTFLoader().load('../resources/models/donuts.glb', (gltf) => {scene.add(gltf.scene); 
}

加载环境光 HDR

new RGBELoader().load('../resources/sky.hdr', function (texture) {
    texture.mapping = THREE.EquirectangularReflectionMapping;
    scene.environment = texture;
    renderer.outputEncoding = THREE.sRGBEncoding;
    renderer.render(scene, camera);
    });

3. 最终成果

五、总结

通过三天的学习，初步理解 Three.js 和 Blender 的弱小性能，间隔纯熟应用还有很长的路要走，感激胖达老师在微信群里的急躁领导。