一、元宇宙入门

元宇宙的概念译自英语名词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 );
  1. 增加模型
    加载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);    });
  1. 最终成果

五、总结

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