three.js GLTFLoader加载外部三维模型

zj靖

已于 2024-08-15 16:24:20 修改

阅读量3.3k

点赞数 17

分类专栏： three.js 文章标签： javascript three.js reactjs

于 2024-08-15 16:23:56 首次发布

本文链接：https://blog.csdn.net/weixin_44242600/article/details/141225031

版权

在场景、光源、相机、渲染器这些基础都奠定好了之后，也了解了通过three.js的几何体相关API创建简单的立方体、球体等模型，不过复杂的模型，比如一辆轿车、一栋房子、一个仓库，一般需要通过3D建模软件来实现。现在我们来了解用GLTFLoader来加载外部的模型。
在这里插入图片描述

GLTF格式简介

GLTF格式是新2015发布的三维模型格式，随着物联网、WebGL、5G的进一步发展，会有越来越多的互联网项目Web端引入3D元素，你可以把GLTF格式的三维模型理解为.jpg、.png格式的图片一样，现在的网站，图片基本是标配，对于以后的网站来说如果需要展示一个场景，使用3D来替换图片表达也是很正常的事情。图片有很多格式，对于三维模型自然也是如此，Web开发的时候图片会有常用格式，对于Web3D开发也一样，肯定会根据需要选择一个常见的大家都熟悉的格式，随时时间的发展，GLTF必然称为一个极为重要的标准格式。

gltf包含内容

glTF（gl传输格式）是一种开放格式的规范（open format specification），用于更高效地传输、加载3D内容。该类文件以JSON（.gltf）格式或二进制（.glb）格式提供，外部文件存储贴图（.jpg、.png）和额外的二进制数据（.bin）。一个glTF组件几乎包含所有的三维模型相关信息的数据，可传输一个或多个场景，包括网格、材质、贴图、蒙皮、骨架、变形目标、动画、灯光以及摄像机。

GLTFLoader

three.js GLTFLoader是一个用于加载和解析GLTF格式3D模型文件的工具，‌它是three.js库的一部分，‌基于WebGL技术。‌
通过使用GLTFLoader，‌开发人员可以快速构建出复杂的3D场景，‌并实现交互和动画效果，‌进一步增强场景的真实感和交互性。

引入`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()`

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

.load( url, onLoad, onProgress, onError)

url：包含有.gltf .glb文件路径URL的字符串。
onLoad：加载成功完成后将会被调用的函数。返回一个gltf对象，该gltf对象包含.scene、.cameras、.animations和.asset。
onProgress：加载正在进行过程中会被调用的函数。其参数将会是XMLHttpRequest实例，包含有总字节数.total与已加载的字节数.loaded。
onError：若在加载过程发生错误，将被调用的函数。该函数接收error来作为参数。

gltf参数内容：
在这里插入图片描述

loader.load(
    'gltf模型.gltf', 
    (gltf)=> {
   
        // 加载成功的回调函数
        console.log('gltf对象场景属性',gltf.scene);
        // 返回的场景对象gltf.scene插入到threejs场景中
        scene.add( gltf.scene );
    },
    (xhr) => {
   
        // 加载过程中的回调函数
    },
    (error) => {
   
       // 加载错误回调函数
    }
);

onload函数返回参数`gltf.scene`

gltf的场景属性gltf.scene，该属性包含的是模型信息，比如几何体BufferGometry、材质Material、网格模型Mesh。

通过浏览器控制打印gltf.scene可以看出。

模型父对象节点可以用Object3D对象表示，也可以用组对象Group表示。
通过.children属性可以查看一个父对象模型的的所有子对象。
通过.name属性可以查看模型节点的名称。

`.getObjectByName()`根据`.name`获取模型节点

three.js加载外部模型，外部模型的名称体现为three.js对象的.name属性,three.js可以通过.getObjectByName()方法，把模型节点的名字.name作为函数参数，快速查找某个模型对象。

// 返回名.name为"HandL"对应的对象
const obj = gltf.scene.getObjectByName("HandL");
console.log('obj', obj); // 控制台查看返回结果
console.log('obj.children', obj.children); 
// obj.children的所有子对象都是Mesh，改变Mesh对应颜色
obj.children.forEach(function (mesh) {
   
    mesh.material.color.set(0xffff00);
}