Three.js和Blender入门元宇宙 | 大帅老猿threejs特训

一、元宇宙入门

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

二、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的强大功能，距离熟练使用还有很长的路要走，感谢胖达老师在微信群里的耐心指导。