导出A-Frame场景至GLB后模型损坏问题求助

问题描述 #

将包含3D模型的A-Frame场景导出为GLB文件时，导出流程可正常执行，但生成的GLB文件中的模型出现损坏，显示形态错乱。

A-Frame场景代码 #

<a-scene id="scene" embedded renderer="logarithmicDepthBuffer: true; antialias: true;" vr-mode-ui="enabled: false" gltf-model="dracoDecoderPath: https://www.gstatic.com/draco/v1/decoders/;" inspector keyboard-shortcuts screenshot device-orientation-permission-ui>    
    <a-node class="no-export" id="sceneLoader"></a-node>    
    <a-entity class="no-export" id="mainPlane">        
        <a-entity class="no-export" id="cr_animation"></a-entity>        
        <a-entity class="no-export clickable" cursor-listener geometry="primitive: plane" position="1 0 0" scale="0.9 0.9 0.9" rotation="-90 0 0" material="color: #FFFFFFB5; opacity: 0.8; transparent: true"></a-entity>        
        <a-entity class="no-export clickable" cursor-listener geometry="primitive: plane" position="0 0 0" scale="0.9 0.9 0.9" rotation="-90 0 0" material="color: #FFFFFFB5; opacity: 0.8; transparent: true"></a-entity>        
        <a-entity class="no-export clickable" cursor-listener geometry="primitive: plane" position="-1 0 0" scale="0.9 0.9 0.9" rotation="-90 0 0" material="color: #FFFFFFB5; opacity: 0.8; transparent: true"></a-entity>        
        <a-entity class="no-export clickable" cursor-listener geometry="primitive: plane" position="1 0 -1" scale="0.9 0.9 0.9" rotation="-90 0 0" material="color: #FFFFFFB5; opacity: 0.8; transparent: true"></a-entity>        
        <a-entity class="no-export clickable" cursor-listener geometry="primitive: plane" position="0 0 -1" scale="0.9 0.9 0.9" rotation="-90 0 0" material="color: #FFFFFFB5; opacity: 0.8; transparent: true"></a-entity>        
        <a-entity class="no-export clickable" cursor-listener geometry="primitive: plane" position="-1 0 -1" scale="0.9 0.9 0.9" rotation="-90 0 0" material="color: #FFFFFFB5; opacity: 0.8; transparent: true"></a-entity>        
        <a-entity class="no-export clickable" cursor-listener geometry="primitive: plane" position="1 0 -2" scale="0.9 0.9 0.9" rotation="-90 0 0" material="color: #FFFFFFB5; opacity: 0.8; transparent: true"></a-entity>        
        <a-entity class="no-export clickable" cursor-listener geometry="primitive: plane" position="0 0 -2" scale="0.9 0.9 0.9" rotation="-90 0 0" material="color: #FFFFFFB5; opacity: 0.8; transparent: true"></a-entity>        
        <a-entity class="no-export clickable" cursor-listener geometry="primitive: plane" position="-1 0 -2" scale="0.9 0.9 0.9" rotation="-90 0 0" material="color: #FFFFFFB5; opacity: 0.8; transparent: true"></a-entity>        
        <a-entity class="no-export" id="capsulemodel4365">            
            <a-entity class="export" id="model4365" gltf-model="https://s3.us-east-1.amazonaws.com/dev-cityar-storage/assets/web-app-object/GingerBread_Man_new2_2023-12-02-001020_jfen.glb" shadow="cast: true;" animation-mixer=""></a-entity>        
        </a-entity>        
        <a-entity class="no-export" id="capsulemodel4377">            
            <a-entity class="export" id="model4377" gltf-model="https://s3.us-east-1.amazonaws.com/dev-cityar-storage/assets/web-app-object/cr_meerkat_model_2023-06-15-141803_iqyy.glb" shadow="cast: true;" animation-mixer=""></a-entity>        
        </a-entity>    
    </a-entity>    
    <a-light class="no-export" id="dirLight" light="castShadow: true; shadowRadius: 3" type="directional" intensity="0.25" position="0.15 6 -1"></a-light>    
    <a-light class="no-export" light="castShadow: false;" type="directional" intensity="0.75" position="-3 3 5"></a-light>    
    <a-light class="no-export" light="castShadow: false;" type="directional" intensity="0.75" position="3 3 5"></a-light>    
    <a-light class="no-export" light="castShadow: false;" type="directional" intensity="0.25" position="-3 3 -5"></a-light>    
    <a-light class="no-export" light="castShadow: false;" type="directional" intensity="0.25" position="3 3 -5"></a-light>    
    <a-entity class="no-export" camera="fov: 85" position="0 2.25 2" rotation="-15 0 0" look-controls="enabled: false">        
        <a-entity class="no-export" cursor="rayOrigin: mouse;" raycaster="objects: .clickable;"></a-entity>    
    </a-entity>
</a-scene>

原场景效果 #

导出代码 #

import { GLTFExporter } from 'https://threejs.org/examples/jsm/exporters/GLTFExporter.js';
document.addEventListener("DOMContentLoaded", () => {    
    const btn = document.createElement('button');    
    btn.textContent = 'Download .glb';    
    document.body.appendChild(btn);    
    btn.onclick = download;    
    function download() {        
        const scene = document.getElementById("scene").object3D;        
        console.log("Scene before export:", scene);        
        const objectsToExport = [];        
        scene.traverse(child => {            
            console.log("child name:", child.name, child.type);            
            if (child.el && child.el.classList && !child.el.classList.contains('no-export') ) {                
                console.log("child name:", child.name);                
                console.log("child:", child);                
                const mesh = child.el.object3DMap.mesh;                
                let capsuleModel = child;                
                const capsule = document.getElementById('capsule' + child.el.id);                
                if(capsule){                    
                    capsuleModel = capsule.object3D;                
                }                
                if (mesh) {                    
                    mesh.position.copy(capsuleModel.position);                    
                    mesh.rotation.copy(child.rotation);                    
                    mesh.scale.copy(child.scale);                    
                    mesh.updateMatrix();                    
                    objectsToExport.push(mesh);                
                } else {                    
                    console.warn("Mesh not found for child:", child);                
                }            
            } else {                
                console.log("Skipping non-exportable child:", child);            
            }        
        });        
        console.log("Objects to export:", objectsToExport);        
        const originalChildren = scene.children.slice();        
        scene.children = objectsToExport;        
        console.log("Scene after setting export objects:", scene.children);        
        const exporter = new GLTFExporter();        
        exporter.parse(scene, result => {            
            console.log("Export successful. Restoring original scene children.");            
            saveArrayBuffer(result, 'scene.glb');            
            scene.children = originalChildren;            
            console.log("Scene restored to original children:", scene.children);        
        }, error => {            
            console.error('An error happened during export:', error);            
            scene.children = originalChildren;            
            console.log("Scene restored to original children after error:", scene.children);        
        }, { binary: true });    
    }    
    function saveArrayBuffer(buffer, filename) {        
        save(new Blob([buffer], { type: 'application/octet-stream' }), filename);    
    }    
    const link = document.createElement('a');    
    link.style.display = 'none';    
    document.body.appendChild(link);    
    function save(blob, filename) {        
        link.href = URL.createObjectURL(blob);        
        link.download = filename;        
        link.click();    
    }
});

导出后效果 #

问题原因分析 #

1. 层级变换处理错误：直接修改单个mesh的位置、旋转、缩放，未考虑模型所在父节点（capsulemodelXXX）的层级变换，导致模型世界坐标计算错误，导出后形态错乱。
2. 模型对象选取不全：仅提取child.el.object3DMap.mesh，而GLTF模型是包含多网格、骨骼、材质的层级结构，仅导出单个网格会丢失大部分模型数据，导致损坏。
3. 原场景修改风险：直接替换原场景的children数组，破坏了场景的临时状态，可能导致导出时模型数据未被正确读取。

解决思路 #

1. 使用临时场景导出，避免修改原场景 #

创建独立的Three.js临时场景，将要导出的对象克隆后添加到临时场景中执行导出，原场景完全不受影响。

2. 正确处理模型层级与变换 #

针对带export类的模型实体，获取其完整的object3D（包含整个GLTF层级），克隆后应用父节点的世界矩阵，确保变换正确：

// 修改download函数核心逻辑
function download() {        
    const scene = document.getElementById("scene").object3D;
    // 创建临时场景
    const tempScene = new THREE.Scene();
    scene.traverse(child => {            
        if (child.el && child.el.classList.contains('export')) {                
            // 克隆整个模型对象树
            const clonedModel = child.object3D.clone(true);
            // 应用父节点的世界变换
            const capsule = document.getElementById('capsule' + child.el.id);
            if (capsule) {
                const capsuleMatrix = capsule.object3D.matrixWorld;
                clonedModel.applyMatrix4(capsuleMatrix);
            }
            // 添加到临时场景
            tempScene.add(clonedModel);
        }        
    });
    // 导出临时场景
    const exporter = new GLTFExporter();        
    exporter.parse(tempScene, result => {            
        saveArrayBuffer(result, 'scene.glb');        
    }, error => {            
        console.error('导出错误:', error);        
    }, { binary: true });    
}

3. 确保模型完全加载与解码 #

原场景使用Draco压缩的GLTF，需监听model-loaded事件，确认所有模型加载完成后再允许导出：

// 在DOMContentLoaded中添加模型加载监听
let modelsLoaded = 0;
const totalModels = document.querySelectorAll('.export').length;
const btn = document.createElement('button');
btn.textContent = 'Download .glb';
btn.disabled = true; // 初始禁用按钮
document.body.appendChild(btn);

document.querySelectorAll('.export').forEach(el => {
    el.addEventListener('model-loaded', () => {
        modelsLoaded++;
        if (modelsLoaded === totalModels) {
            btn.disabled = false; // 加载完成后启用导出按钮
        }
    });
});

btn.onclick = download;

内容的提问来源于stack exchange，提问作者Gabriel Henrique Fachini