史上最详细的在three.js导出gltf,glb,obj,stl格式的模型文件

最新推荐文章于 2025-05-03 22:02:48 发布
最新推荐文章于 2025-05-03 22:02:48 发布
阅读量742 收藏 6
点赞数 11
分类专栏： 前端 文章标签： javascript 前端 three GLTF webgl
本文为博主原创文章，转载请注明出处。
本文链接：https://blog.csdn.net/csdn_yudong/article/details/146340499
版权

史上最详细的在three.js导出gltf,glb,obj,stl格式的模型文件

前言

关于实现这个功能，Three 中提供了 GLTFExporter，OBJExporter 导出器。

但是这两个类的使用方法，跟你的Three版本有很大的关系。不同的版本，实现方式是不一样的，代码上会有区别。所以，继续往下看时，请务必先确认你当前的Three版本。

【更新】2025-03-18：请把你的three.js版本打在评论里。

GLTF

import * as THREE from 'three';

// 下面这个导入的路径看你的文件路径关系，不要搞错了（我这里是使用第一种）
import { GLTFExporter } from 'three/examples/jsm/exporters/GLTFExporter.js';
// import { GLTFExporter } from 'three/addons/exporters/GLTFExporter.js';

// 创建你的模型
let myModel = new THREE.Mesh(
	new THREE.SphereGeometry(20, 10, 10),
    new THREE.MeshStandardMaterial({
		color: 0xffff00,
	    metalness: 0.5,
	    roughness: 1.0,
	    flatShading: true
	})
);
myModel.position.set( 0, 0, 0 );
myModel.name = 'my-Sphere';
scene.add(myModel)

// 导出器
const exporter = new GLTFExporter();
// 配置选项（可选）
const options = {
  binary: false,       // 导出为 .gltf
  trs: false,         // 不使用位移/旋转/缩放节点
  onlyVisible: true,  // 仅导出可见对象
  includeCustomExtensions: true
};
 // 执行导出
exporter.parse(myModel, (result) => {
	const output = JSON.stringify( result, null, 2 );
	// 保存文件
	const blob = new Blob([output], { type: 'text/plain' });
    const link = document.createElement('a');
    link.href = URL.createObjectURL(blob);
    link.download = 'mymodel.gltf';
    link.click();
}, (error) => {
	console.log( 'An error happened during parsing', error );
}, options);

【需要注意的是】这里的 exporter.parse() 方法，接受4个参数。不要错了！

glb

import * as THREE from 'three';

// 下面这个导入的路径看你的文件路径关系，不要搞错了（我这里是使用第一种）
import { GLTFExporter } from 'three/examples/jsm/exporters/GLTFExporter.js';
// import { GLTFExporter } from 'three/addons/exporters/GLTFExporter.js';

// 创建你的模型
let myModel = new THREE.Mesh(
	new THREE.SphereGeometry(20, 10, 10),
    new THREE.MeshStandardMaterial({
		color: 0xffff00,
	    metalness: 0.5,
	    roughness: 1.0,
	    flatShading: true
	})
);
myModel.position.set( 0, 0, 0 );
myModel.name = 'my-Sphere';
scene.add(myModel)

const exporter = new GLTFExporter();
// 配置选项（可选）
const options = {
  binary: true,       // 导出为 .glb
  trs: false,         // 不使用位移/旋转/缩放节点
  onlyVisible: true,  // 仅导出可见对象
  includeCustomExtensions: true
};
 // 执行导出
exporter.parse(myModel, (result) => {
	// 这里用 type: 'model/gltf-binary' , 或者 type: 'application/octet-stream' 都是可以的，问题不大。（关于这两者更详细的解释说明，我放到了文章最后）
	const blob = new Blob([result], { type: 'model/gltf-binary' });
    const link = document.createElement('a');
    link.href = URL.createObjectURL(blob);
    link.download = 'mymodel.glb';
    link.click();
}, (error) => {
	console.log( 'An error happened during parsing', error );
}, options);

可以使用一套公用代码来生成 glb / gltf：

import * as THREE from 'three';

// 下面这个导入的路径看你的文件路径关系，不要搞错了（我这里是使用第一种）
import { GLTFExporter } from 'three/examples/jsm/exporters/GLTFExporter.js';
// import { GLTFExporter } from 'three/addons/exporters/GLTFExporter.js';

// 创建你的模型
let myModel = new THREE.Mesh(
	new THREE.SphereGeometry(20, 10, 10),
    new THREE.MeshStandardMaterial({
		color: 0xffff00,
	    metalness: 0.5,
	    roughness: 1.0,
	    flatShading: true
	})
);
myModel.position.set( 0, 0, 0 );
myModel.name = 'my-Sphere';
scene.add(myModel)

let param = {
  binary: true
}

const exporter = new GLTFExporter();
// 配置选项（可选）
const options = {
  binary: param.binary,       // 导出为 .glb 或 .gltf
  trs: false,         // 不使用位移/旋转/缩放节点
  onlyVisible: true,  // 仅导出可见对象
  includeCustomExtensions: true
};
 // 执行导出
exporter.parse(myModel, (result) => {
	if ( result instanceof ArrayBuffer ) {
		const blob = new Blob( [ result ], { type: 'model/gltf-binary' } );
		const link = document.createElement('a');
	    link.href = URL.createObjectURL(blob);
	    link.download = 'mymodel.glb';
	    link.click();
	} else {
		const output = JSON.stringify( result, null, 2 );
		const blob = new Blob( [ output ], { type: 'text/plain' } );
		const link = document.createElement('a');
	    link.href = URL.createObjectURL(blob);
	    link.download = 'mymodel.gltf';
	    link.click();
	}
}, (error) => {
	console.log( 'An error happened during parsing', error );
}, options);

【需要注意的是】这里的 exporter.parse() 方法，接受4个参数。不要错了！

obj

import * as THREE from 'three';

// 下面这个导入的路径看你的文件路径关系，不要搞错了（我这里是使用第一种）
import { OBJExporter } from 'three/examples/jsm/exporters/OBJExporter.js';
import { OBJExporter } from 'three/addons/exporters/OBJExporter.js';

// 创建你的模型
let myModel = new THREE.Mesh(
	new THREE.SphereGeometry(20, 10, 10),
    new THREE.MeshStandardMaterial({
		color: 0xffff00,
	    metalness: 0.5,
	    roughness: 1.0,
	    flatShading: true
	})
);
myModel.position.set( 0, 0, 0 );
myModel.name = 'my-Sphere';
scene.add(myModel)

const exporter = new OBJExporter();
const result = exporter.parse(myModel); // 直接返回字符串
// 保存文件
const blob = new Blob([result], { type: 'text/plain' });
const link = document.createElement('a');
link.href = URL.createObjectURL(blob);
link.download = 'mymodel.obj';
link.click();

STL

import * as THREE from 'three';

// 下面这个导入的路径看你的文件路径关系，不要搞错了（我这里是使用第一种）
import { STLExporter } from 'three/examples/jsm/exporters/STLExporter.js';
import { STLExporter } from 'three/addons/exporters/STLExporter.js';

// 创建你的模型
let myModel = new THREE.Mesh(
	new THREE.SphereGeometry(20, 10, 10),
    new THREE.MeshStandardMaterial({
		color: 0xffff00,
	    metalness: 0.5,
	    roughness: 1.0,
	    flatShading: true
	})
);
const exporter = new STLExporter();
const result = exporter.parse(myModel , { binary: true }); // 导出二进制格式

const blob = new Blob([result], { type: 'application/octet-stream' });
const link = document.createElement('a');
link.href = URL.createObjectURL(blob);
link.download = 'mymodel.stl';
link.click();

写在最后

1、关于下载 glb 文件时，type 用 model/gltf-binary 还是 application/octet-stream 的说明：

  • application/octet-stream‌ 表示通用的二进制流数据，适用于所有未知或未注册的二进制文件‌。适用场景‌：无特定格式要求时使用，浏览器不会尝试解析文件内容，直接触发下载‌。‌
  • model/gltf-binary‌：根据 Khronos Group 对 GLB 格式的规范，.glb 的官方 MIME 类型为 model/gltf-binary，明确标识文件为二进制格式的 glTF 数据‌。部分工具或框架（如 Babylon.js、A-Frame）会根据此类型自动识别文件格式，提升兼容性‌。

2、Three.js 官网示例选择 application/octet-stream 的原因：

  • 跨版本兼容性‌
    Three.js 早期版本未强制要求严格符合 GLB 规范，使用通用类型可避免因 MIME 类型限制导致的下载失败‌。

  • 简化代码逻辑‌
    官网示例以功能实现为目标，application/octet-stream 能直接兼容所有场景，无需考虑外部工具对 MIME 类型的依赖‌。

3、建议选择 model/gltf-binary 的场景：

  • 与其他工具集成时‌
    若导出的 .glb 文件需要导入到 Unity、Blender 或 Web 3D 框架中，使用规范类型可避免解析错误‌。
  • 遵循最新规范时‌
    2023 年后，主流 3D 工具已普遍支持 model/gltf-binary 类型，符合行业标准‌。

—————————— 【正文完】——————————

前端学习交流群，想进来面基的，可以加Q群： 832485817，685486827；

写在最后： 约定优于配置 —— 软件开发的简约原则

——————————【完】——————————

我的：
个人网站： https://neveryu.github.io/neveryu/
Github： https://github.com/Neveryu
微信： 421354532

更多学习资源请关注我的微信…好吗

免费3D/GIS/BIM模型格式转换器，导出格式包括：gltf/glb、标准3Dtiles、fbx、obj
05-23
葛兰岱尔模型格式转换器支持导入的3D/BIM/GIS软件或模型格式包括： BIM格式：Revit、Bentley、Tekla、Sketchup、Rhino3D、Nwc/Nwd； 3D格式：Siemens Nx（UG）、Creo（proE）、CatiaV5、Solidworks、Inventor、stp/step、fbx 流程工业：PDMS、SP3D； GIS格式：Osgb（倾斜摄影模型）、tif、shp、Las（点云）； 葛兰岱尔模型格式转换器可导出格式包括：gltf/glb、标准3Dtiles、fbx、obj。 可满足Unity3D、Unreal（UE）、Cesium、ThreeJS等开源3D/BIM/GIS平台数字孪生应用格式要求。 格式转换只是基础，葛兰岱尔模型格式转换器还能对3D/BIM模型中的标准管线构件进行自动减面，降低3D/BIM模型三角面片数量；将3D/BIM构件ID输出到转换格式（fbx、gltf/glb、3dtiles、obj）几何数据中，并实现与输出为DB数据文件的3D/BIM源模型结构/属性数据一一对应。
Three.js 实现导出模型文件（.glb,.gltf）功能 GLTFExporter
qq_41566285的博客
11-01 1233
1、由于3d建模师使用的是3dsmax建模，所以有些材质转换为gltf、glb后材质参数会丢失。比如最常见的就是对象的金属度、粗糙度这俩材质需要代码里重新调整。2、基于模型我们可能添加一些其他对象，比如为模型增加线框等。如果在每次加载模型后再进行添加线框程序，那么加载模型会变得比较慢。效果：加载速度很快（1秒左右），之前在加载模型后开始运行创建线框的程序，但是加载渲染速度比较慢（大约3秒）总结：通过导出我们可以将运行满意的模型导出去，这样再次加载进来就会节省很多运算，并且加载速度也会变快！
基于Vue + Three.js实现预览3D模型文件（glb，gltf 等后缀文件）
xzy__007的博客
11-28 1195
【代码】基于Vue + Three.js实现预览3D模型文件（glb，gltf 等后缀文件）
three.js尝试渲染gbl模型成功！（三）
monkey7
04-09 1073
gltf文件全称Graphics Language Transmission Forma（图形语言传输格式），是一种三维模型格式，用于传输和加载3D场景和模型；glTF（GL传输格式）是Khronos的一个开放项目，它为3D资产提供了一种通用的、可扩展的格式，这种格式既高效又与现代web技术高度互操作。gltf文件核心是JSON文件，一个gltf文件可传输一个或多个场景， 包括网格、材质、贴图、蒙皮、骨架、变形目标、动画、灯光以及摄像机等信息。这里先尝试glb （别问为啥 问就是找的教程里用的这格式 ）
ThreeJS导出三维模型、导入三维模型、导入三维动画DEMO
12-07
ThreeJS导出三维模型、导入三维模型、导入三维动画
【Three.js】导出.GLTF和.GLB格式模型
u013541148的博客
10-08 5762
glTF是一种用于有效传输和加载3D内容的开放格式规范。以JSON (.gltf)或二进制(.glb)格式提供。外部文件存储纹理(.jpg， .png)和额外的二进制数据(.bin)。一个glTF可以保存一个或多个场景，包括网格、材质、纹理、皮肤、骨骼、变形目标、动画、灯光和/或相机。
threejs导出glb模型
learn_12的博客
08-09 561
null)) //如果是mesh必须有贴图!原文链接：https://blog.csdn.net/learn_12/article/details/132185122。// 重置物体的位置。// 重置物体的旋转。// 应用变换矩阵到场景中的物体(防止物体位置不在正确位置)
three.js导入导出模型
猿脑2.0的博客
11-15 644
然而，Three.js 本身并不直接提供导入和导出模型的完整解决方案，但它可以与其他库和工具结合使用来实现这些功能。一种常见的方法是使用three.js的Object3D.toJSON()方法将场景中的数据序列化为 JSON 格式，然后使用其他工具（如three-to-gltf）将这些数据转换为.gltf或.glb格式。对于更复杂的导出需求，你可能需要使用专业的 3D 建模软件（如 Blender）或其他 3D 内容创建工具，这些工具通常提供了更强大和灵活的导出选项。// 创建场景、相机和渲染器。
3d模型转换为gltf：将3d模型（STLIGESSTEPOBJFBX）转换为gltf和压缩
02-01
该项目的主要原因是，我遇到了需要在Web上显示STEP和IGES模型的情况，但是市场上的web3d类库不支持这种格式，并且用户直接上传的STL文件会显示出来。会消耗大量带宽或CDN流量，将其转换为压缩的gltf会更合适。 演示...
ThreeJS加载glb模型实用案例
01-26
ThreeJS加载glb模型实用案例，抽取官网的例子。
ThreeJS：obj格式的模型展示js
07-05
在Three.js里，obj格式的模型展示js函数封装，以供学习和交流。
three.js加载gltf模型
09-17
three.js加载gltf模型的完整demo，使用vue开发的，比较简单，便于理解
threejs给模型添加外部轮廓demo
04-10
Three.js支持多种3D格式，如OBJ、FBX、GLTF等，你可以使用对应的加载器（如OBJLoader、GLTFLoader等）将模型导入到场景中。 2. **创建轮廓几何体**：一旦模型加载完成，你需要创建一个与原始模型相似但稍大的几何体...
Three.js支持模型格式区别、建议
最新发布
在全栈和前端徘徊的程序员
05-03 1115
目标推荐格式工具链建议Web 项目展示.glbBlender 导出 + Three.js 加载游戏资产开发.fbx→ 转.glb快速原型验证.objMeshLab / Blender 编辑3D 打印预览.stlCura / Simplify3D 导入查看动画展示.glb.gltfBlender 动画导出 + Three.js 播放。
ThreeJS导出三维模型、导入三维模型、导入三维动画
xyphf的博客
12-07 7525
模型文件加载 实际开发中，大多数项目，通常是3D美术设计师或建筑、机械等行业工程师提供的由3dmx、blender、substence、Solidworks等软件创建好的三维模型文件。 本章节第一小节以Threejs引擎自身为例，讲解Threejs模型导入导出，对Threejs模型文件本身进行了讲解，让你明白你加载的三维模型文件里面都是包含什么内容。 通过Three.js模型数据导入导出过程的学习，可以让你对Threejs解析加载外部模型的过程更为了解。 Threejs导出模型信息 你可以通过下面代码
Three.js导出gltf模型
地理信息技术杂谈 博客，欢迎技术交流
04-11 3240
Three.js支持将场景导出成gltf（glb）格式三维模型，以文件的形式进行存储，下面以代码的形式说明，如何将场景导出模型。 初始化场景 初始化一个Three.js场景，这个场景不需要显示，也能够将模型进行导出，简单代码如下： initthreescene() { this.scene = new THREE.Scene(); this.scene.background = new THREE.Color(0xcfcfcf); this.rendererScene(
Three.js保存导出.ply、.obj、.GLTF等格式三维模型
u014291990的博客
11-09 5749
Three.js保存导出.ply、.obj、.GLTF等格式三维模型 本文转载地址:我的个人技术博客 无论Three.js加载的任意格式三维模型，还是通过Threejs的API创建的一个三维模型，都可以导出为一个文件保存三维场景的数据。 你可以自定义提取保存Three.js中任何的三维场景信息，比如Threejs中的光源数据保存，threejs中的几何体顶点数据提取保存，你也可以按照一定的标准导出...
分别详细介绍ply、stl、obj、off、gltf、glb格式的mesh
05-27
1. Ply格式的mesh Ply格式是一种通用的3D模型文件格式，可以存储点云、网格和曲面等各种类型的3D数据。Ply文件通常包含顶点信息、面信息、法线信息、纹理坐标信息和颜色信息等。Ply文件可以通过Ply解析器来加载和处理。 2. STL格式的mesh STL格式是一种简单的3D模型文件格式，通常用于存储三角形网格数据。STL文件包含了每个三角形的三个顶点坐标和法线向量信息。STL文件可以通过STL解析器来加载和处理。 3. OBJ格式的mesh OBJ格式是一种通用的3D模型文件格式，它可以存储多边形网格、曲面和点云等各种类型的3D数据。OBJ文件通常包含顶点信息、面信息、纹理坐标信息和法线信息等。OBJ文件可以通过OBJ解析器来加载和处理。 4. OFF格式的mesh OFF格式是一种简单的3D模型文件格式，通常用于存储多边形网格数据。OFF文件包含了每个顶点的坐标信息和每个面的顶点索引信息。OFF文件可以通过OFF解析器来加载和处理。 5. glTF格式的mesh glTF格式是一种新兴的3D模型文件格式，它使用JSON作为数据格式，可以存储多种类型的3D数据，例如网格、材质、动画和场景等。glTF文件可以通过glTF解析器来加载和处理。 6. glb格式的mesh glb格式是一种二进制的glTF格式，它将glTF文件打包成一个二进制文件，可以更快地加载和渲染3D模型。glb文件可以通过glTF解析器来加载和处理。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值