DRACOExporter是 Three.js 中用于将 3D 模型压缩为 DRACO 格式的工具。DRACO 是一种高效的几何数据压缩算法,可以显著减小 3D 模型文件的大小,特别适用于大型模型的 Web 应用。
EXRExporter是 Three.js 中的一个导出工具,用于将场景的渲染结果导出为.exr格式的图像。EXR(OpenEXR)是一种高动态范围(HDR)图像格式,通常用于图形渲染、视觉效果和游戏开发中,尤其适合存储高质量的光照信息和颜色深度。
GLTFExporter是 Three.js 提供的导出工具,用于将 Three.js 中的 3D 模型导出为 GLTF(GL Transmission Format)格式。GLTF 是一种开放的、基于 JSON 的格式,广泛用于 3D Web 应用,尤其是 WebGL 和其他 Web 标准中,因其文件小、易于传输,且支持丰富的 3D 数据结构。
OBJExporter是 Three.js 中的一个导出工具,用于将 Three.js 中的 3D 对象导出为.obj格式。.obj是一种非常流行的 3D 模型格式,广泛应用于许多 3D 编辑器和渲染软件中。它通常用于存储几何信息(如顶点、法线、纹理坐标等),并支持导出多边形网格和附加的材质文件。
PLYExporter是 Three.js 中用于将 3D 对象导出为 PLY(Polygon File Format 或 Stanford Triangle Format)格式的工具。PLY 格式通常用于存储 3D 网格数据,并且广泛应用于点云数据的存储和交换。它支持顶点、面、颜色、法线等信息。STLExporter 是 Three.js 提供的一个工具,用于将 3D 对象导出为 STL(Stereolithography) 格式。STL 是一种广泛使用的 3D 打印和计算机辅助设计(CAD)格式,常用于保存 3D 网格的几何形状,但它不包含颜色、纹理或其他属性。
DRACOExporter 有一个方法
js
DRACOExporter()
// 方法
parse ( object : Mesh | object : Points, options : Object ) : Int8Array
object | object --- 要编码的网格或点。
options --- 可选的导出选项
decodeSpeed - int. 指示如何根据解码速度调整编码器(0 提供更好的速度,但质量最差)。默认值为 5。
encodeSpeed - int. 指示如何调整编码器参数(0 提供更好的速度,但质量最差)。默认值为 5。
encoderMethod - int. 顺序(很少压缩)或破边。Edgebreaker 以确定性、螺旋状的方式遍历网格的三角形,这提供了这种数据格式的大部分优点。默认值为 DRACOExporter.MESH_EDGEBREAKER_ENCODING。
quantization - Array of int. 指示按照顺序(POSITION、NORMAL、COLOR、TEX_COORD、GENERIC)存储在 draco 文件中的每种数据类型的精度。默认为 [ 16, 8, 8, 8, 8 ]
exportUvs - bool. 布尔值。默认为 true。
exportNormals - bool. 布尔值。默认为 true。
exportColor - bool. 布尔值。默认为 false。
// 创建一个 BoxGeometry 并导出为 Draco 格式
const exporter = new THREE.DRACOExporter();
const geometry = new THREE.BoxGeometry(1, 1, 1);
exporter.parse(geometry, function(result) {
// 将压缩的 Draco 数据保存为文件
const blob = new Blob([result], { type: 'application/octet-stream' });
const url = URL.createObjectURL(blob);
const link = document.createElement('a');
link.href = url;
link.download = 'box-model.drc';
link.click();
URL.revokeObjectURL(url);
});
EXRExporter 有两个方法
js
.parse ( renderer : WebGLRenderer, renderTarget : WebGLRenderTarget, [param:Object options] ) : null
renderTarget --- 包含用于导出 EXR 图像的数据的 WebGLRenderTarget。
options --- 导出选项
type - 内部 EXR 数据的输出数据类型。可用选项:
THREE.HalfFloatType // default option
THREE.FloatType
compression - 内部压缩算法。可用选项:
NO_COMPRESSION
ZIP_COMPRESSION // default option
ZIPS_COMPRESSION
从输入的渲染目标生成一个 .exr 输出。
.parse ( dataTexture : DataTexture, options : Object ) : null
dataTexture --- 包含用于导出 EXR 图像的数据的 DataTexture。
options --- 导出选项(详情见上文)。
从输入的数据纹理生成一个 .exr 输出。
const exporter = new THREE.EXRExporter();
const scene = new THREE.Scene();
const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
const renderer = new THREE.WebGLRenderer();
const renderTarget = new THREE.WebGLRenderTarget(window.innerWidth, window.innerHeight, {
format: THREE.RGBAFormat,
type: THREE.FloatType
});
// 渲染场景到 renderTarget
renderer.setRenderTarget(renderTarget);
renderer.render(scene, camera);
renderer.setRenderTarget(null);
// 使用 EXRExporter 导出
exporter.parse(renderTarget, function(result) {
// result 是一个包含 EXR 格式图像数据的 Blob
const blob = new Blob([result], { type: 'image/x-exr' });
const url = URL.createObjectURL(blob);
const link = document.createElement('a');
link.href = url;
link.download = 'scene.exr';
link.click();
URL.revokeObjectURL(url);
});
GLTFExporter 有一个方法
js
parse ( input : Object3D, onCompleted : Function, onError : Function, options : Object ) : undefined
input --- 要导出的场景或对象。有效选项:
导出场景
exporter.parse( scene1, ... )
exporter.parse( [ scene1, scene2 ], ... )
导出对象(它将创建一个新场景来保存所有对象)
exporter.parse( object1, ... )
exporter.parse( [ object1, object2 ], ... )
混合场景和对象(它将像平常一样导出场景,但会创建一个新场景来保存所有单个对象)。
exporter.parse( [ scene1, object1, object2, scene2 ], ... )
onCompleted --- 导出完成时将被调用。参数将是生成的 glTF JSON 或二进制 ArrayBuffer。
onError --- 如果在 gltf 生成过程中出现任何错误,将被调用。
options --- 导出选项
trs - bool. 导出每个节点的位置、旋转和缩放而不是矩阵。默认为 false。
onlyVisible - bool. 仅导出可见对象。默认为 true。
binary - bool. 以二进制 (.glb) 格式导出,返回 ArrayBuffer。默认为 false。
maxTextureSize - int. 将图像最大尺寸(宽度和高度)限制为给定值。默认为无穷大。
animations - Array<AnimationClip>. 要包含在导出中的动画列表。
includeCustomExtensions - bool. 导出在对象属性上定义的自定义 glTF 扩展(userData.gltfExtensions)。默认为 false。
从输入(场景或对象)生成一个 .gltf(JSON)或 .glb(二进制)输出。
const exporter = new THREE.GLTFExporter();
// 创建一个简单的场景和几何体
const scene = new THREE.Scene();
const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
const renderer = new THREE.WebGLRenderer();
// 添加一个立方体
const geometry = new THREE.BoxGeometry();
const material = new THREE.MeshBasicMaterial({ color: 0x00ff00 });
const cube = new THREE.Mesh(geometry, material);
scene.add(cube);
// 渲染并导出
exporter.parse(scene, function(result) {
// 结果是一个 JSON 对象,包含导出的 GLTF 数据
console.log(result);
// 转换成 Blob 并下载
const blob = new Blob([JSON.stringify(result)], { type: 'application/json' });
const url = URL.createObjectURL(blob);
const link = document.createElement('a');
link.href = url;
link.download = 'model.glb'; // 可以选择下载为 .glb 格式
link.click();
URL.revokeObjectURL(url);
}, {
binary: true // 使用二进制格式,生成 .glb 文件
});
OBJExporter 有一个方法
js
parse ( object : Object3D ) : String
object --- 要导出的 Object3D。
生成包含 OBJ 数据的字符串。
// 创建 OBJExporter 实例
const exporter = new THREE.OBJExporter();
// 导出单个 3D 对象(例如 `cube`)
const objData = exporter.parse(cube); // 传递单个对象而不是场景
console.log(objData); // 输出 OBJ 格式的字符串
// 将导出的 OBJ 数据保存为文件
const blob = new Blob([objData], { type: 'text/plain' });
const url = URL.createObjectURL(blob);
const link = document.createElement('a');
link.href = url;
link.download = 'cube.obj';
link.click();
URL.revokeObjectURL(url);
PLYExporter 有一个方法
js
.parse ( input : Object3D, onDone : Function, options : Object ) : Object
input --- Object3D
onDone --- 将在导出完成时调用。参数将是生成的 ply ascii 或二进制 ArrayBuffer。
options --- 导出选项
excludeAttributes - array. 要从导出的 PLY 文件中显式排除哪些属性。有效值为 'color'、'normal'、'uv' 和 'index'。如果排除三角形索引,则导出点云。默认是一个空数组。
binary - bool. 以二进制格式导出,返回 ArrayBuffer。默认为 false。
从输入对象生成 PLY 文件数据作为字符串或 ArrayBuffer(ASCII 或二进制)输出。返回的数据与传递给 "onCompleted" 函数的数据相同。如果对象由多个子元素和几何体组成,它们将在文件中合并为一个单独的网格
// 创建 PLYExporter 实例
const exporter = new THREE.PLYExporter();
// 导出为 PLY 格式
const plyData = exporter.parse(cube); // 传递单个对象而不是整个场景
// 保存为 PLY 文件
const blob = new Blob([plyData], { type: 'application/octet-stream' });
const url = URL.createObjectURL(blob);
const link = document.createElement('a');
link.href = url;
link.download = 'cube.ply';
link.click();
URL.revokeObjectURL(url);
STLExporter 有一个方法
js
parse ( scene : Object3D, options : Object ) : Object
scene --- 场景、网格或其他包含要编码的网格的基于 Object3D 的类。
options --- 可选的导出选项
binary - bool. 返回 ASCII 编码字符串或二进制数据缓冲区。默认为 false。
// 创建 STLExporter 实例
const exporter = new THREE.STLExporter();
// 导出立方体为 STL 格式
const stlData = exporter.parse(cube);
// 保存为 STL 文件
const blob = new Blob([stlData], { type: 'application/octet-stream' });
const url = URL.createObjectURL(blob);
const link = document.createElement('a');
link.href = url;
link.download = 'cube.stl';
link.click();
URL.revokeObjectURL(url);