Three.js基础入门介绍——Three.js学习四【模型导入】

最新推荐文章于 2025-06-08 17:09:38 发布

置顶

小猪猪哟

最新推荐文章于 2025-06-08 17:09:38 发布

阅读量2.6k

点赞数 64

CC 4.0 BY-SA版权

分类专栏： Three.js 文章标签：前端

本文链接：https://blog.csdn.net/I_loveCong/article/details/135230914

本文详细介绍了如何在Three.js中使用GLTFLoader加载和导入3D模型，包括模型文件获取、设置加载路径、加载操作和光照处理等关键步骤。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

模型导入

通过Three.js的材质和几何体，我们可以很方便的创建基础3D模型，但涉及到复杂模型时，一般是由专业建模工具生成模型文件再导入的方式将模型引入到我们的3D场景中进行使用

Three.js加载器

Three.js提供多种加载器以支持市面上多种格式的3D文件导入操作

加载器	支持文件格式
3DMLoader	.3dm
DRACOLoader	.drc
FontLoader	.json
GLTFLoader	glTF（gl传输格式）是一种开放格式的规范（open format specification），用于更高效地传输、加载3D内容。该类文件以JSON（.gltf）格式或二进制（.glb）格式提供，外部文件存储贴图（.jpg、.png）和额外的二进制数据（.bin）
KTX2Loader	.ktx2
LDrawLoader	LDraw资源（一个文本文件，通常扩展名为.ldr、.dat或.txt）可以只描述单个构造件或整个模型。
MMDLoader	MMDLoader从MMD资源（例如PMD（.pmd）、PMX（.pmx）、VMD（,vmd）和VPD（.vpd）文件）中创建Three.js物体（对象）
MTLLoader	.mlt或.mlt与.obj的配套文件
OBJLoader	.obj
PCDLoader	.pcd
PDBLoader	.pdb
PRWMLoader	.prwm
SVGLoader	.svg
TGALoader	.tga

3D模型文件获取与导入流程

模型获取：
通过建模工具或者模型素材网站获取，学习用的话官网的模型也是可以使用的，在官方示例文件夹中有很多模型文件目录：three.js-master\examples\models
模型导入：
模型导入的要素

模型文件

模型加载器

模型导入的流程

引入加载器并实例化

使用加载器导入模型文件

模型导入的操作

本文将以典型 GLTF 加载器（GLTFLoader）为例进行模型导入操作，模型使用的是官方示例中的Soldier模型，文件位置：three.js-master\examples\models\gltf\Soldier.glb
为了方便操作我们将文件拷出来放在static\3dmod\gltf文件夹下，static与three.js-master同级

代码基于文章《Three.js基础入门介绍——Three.js学习三【借助控制器操作相机】》的基础上进行修改，文件结构如下
在这里插入图片描述

index.html

//1、引入加载器并实例化
	import {
   
    GLTFLoader } from "./three.js-master/examples/jsm/loaders/GLTFLoader.js";
	const gltfLoader = new GLTFLoader();

加载器方法官方文档链接：https://threejs.org/docs/index.html?q=loader#examples/zh/loaders/GLTFLoader

这里用了一个Loader（实现加载器的基类）公有方法.setPath ( path : String ) : this设置资源基本路径，不用的话也可以直接在.load方法第一个url参数中写完整路径。加载器解析基于glTF的ArrayBuffer或JSON字符串，并在完成后触发onLoad回调。onLoad的参数将是一个包含有已加载部分的Object：.scene、 .scenes、 .cameras、 .animations 和 .asset。

.load ( url : String, onLoad : Function, onProgress : Function, onError : Function ) : undefined

url — 包含有.gltf/.glb文件路径/URL的字符串。

onLoad — 加载成功完成后将会被调用的函数。该函数接收parse所返回的已加载的JSON响应。

onProgress — （可选）加载正在进行过程中会被调用的函数。其参数将会是XMLHttpRequest实例，包含有总字节数.total与已加载的字节数.loaded。

onError — （可选）若在加载过程发生错误，将被调用的函数。该函数接收error来作为参数。

开始从url加载，并使用解析过的响应内容调用回调函数。

//2、使用加载器导入模型文件，这里注意，需要用在scene创建后
gltfLoader.setPath('./static/3dmod/gltf/')
                .load('Soldier.glb', function (gltf) {
   
   
                    console.log("gltf",gltf)
                    gltf.scene.scale.set(1, 1, 1)
                    gltf.scene.traverse(function (child) {
   
   
            			if (child instanceof THREE.Mesh) {
   
   
            				child.castShadow = true; //阴影
            				child