【three.js】如何加载外部gltf模型

目录

一、引入GLTFLoader.js

二、gltf加载器new GLTFLoader()

三、gltf加载器方法.load()

四、纹理贴图颜色偏差解决

---

一、引入GLTFLoader.js

你在three.js官方文件的**examples/jsm/子文件loaders/**目录下，可以找到一个文件GLTFLoader.js，这个文件就是three.js的一个扩展库，专门用来加载gltf格式模型加载器。

// 引入gltf模型加载库GLTFLoader.js
import { GLTFLoader } from 'three/addons/loaders/GLTFLoader.js';

二、gltf加载器new GLTFLoader()

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

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

三、gltf加载器方法.load()

loader.load( './工厂.gltf', function ( gltf ) {
    // 返回的场景对象gltf.scene插入到threejs场景中
    scene.add( gltf.scene );
})