three 导出器 - 技术栈

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);