Blender生成模型，threejs加载gltf

参考资料：threejs中文网

threejs qq交流群：814702116

Blender生成模型，threejs加载gltf

本节课做一个全流程演示，先用Blender绘制一个三维模型，接着导出gltf格式模型，最后threejs加载Blender导出的gltf模型。

1. Blender建模
2. Blender导出gltf模型
3. threejs加载gltf模型

Blender建模

为了节约时间，咱们就用Blender创建一个长方体意思下，大小位置和前面几节课长方体mesh一样。

尺寸长宽高都是100，然后材质设置青色0x00ffff,位置在坐标原点。

const geometry = new THREE.BoxGeometry(100, 100, 100); 
const material = new THREE.MeshBasicMaterial({
    color: 0x00ffff,
}); 
const mesh = new THREE.Mesh(geometry, material); 

Blender导出gltf模型

你可以用Blender导出你需要的格式，比如.stl、.fbx、.gltf格式文件，咱们这里选择gltf格式。

导出的gltf文件放到vue3项目的public文件即可。

导出gltf格式模型的时候，除了后缀名.gltf，也可以选择导出gltf的二进制格式.glb，你可以分别导出一个用来代码测试。

不过大部分时候，咱们一般选择二进制格式的.glb就行。

提醒：不同版本Blender导出界面可能会有差异，不过大体思路一样。

threejs加载gltf模型

下面在1.9小节代码基础上给大家演示，咱们把threejs代码创建的长方体网格模型删除掉，然后加载Blender导出的gltf或glb格式模型代替。

gltf加载器GLTFLoader.js

加载gltf格式的模型，需要借助threejs的扩展库gltf加载器GLTFLoader.js。

首先你可以找到npm安装模块的文件node_modules，然后找到**three/examples/jsm/loaders/**目录,你可以找到一个文件GLTFLoader.js。

引入gltf模型加载库GLTFLoader.js

import { GLTFLoader } from 'three/examples/jsm/loaders/GLTFLoader.js';

执行new GLTFLoader()就可以实例化一个gltf的加载器对象。

// 创建GLTF加载器对象
const loader = new GLTFLoader();

gltf加载器方法.load()

通过gltf加载器方法.load()就可以加载外部的gltf模型。

执行方法.load()会返回一个gltf对象，作为参数2函数的参数gltf包含了模型的多种数据，其中gltf.scene属性可以获取模型数据，获取模型数据需要通过add()方法，添加到场景中。

loader.load( './长方体.gltf', function ( gltf ) {
  console.log('gltf',gltf);
  // 把gltf.scene里面模型添加到场景scene中
  scene.add( gltf.scene );
})

.glb格式

const loader = new GLTFLoader()
// 加载public中的模型文件./长方体.glb
loader.load('./长方体.glb',function(gltf){
    console.log('gltf',gltf);
    //gltf.scene获取gltf文件包含的模型数据
    scene.add(gltf.scene);//gltf模型添加到三维场景中
})

注意上面路径引用的是public中文件