使用 GLTFLoader 时出现 {"isTrusted":true} 错误

Question

问题：

一切正常：我将 /GLTF/ 子文件夹中的 FBX 文件转换为 GLTF。

遗憾的是，一些转换后的文件中缺少一些几何图形，所以我尝试再次转换我的 FBX 文件，这次是 /TEST/。

突然间，模型无法加载，根据我的 console.log 声明：

console.log( 'An error happened: '+JSON.stringify(error) );

我收到这个奇怪的无用错误：

An error happened: {"isTrusted":true}

所以我尝试将我的 FBX 文件转换为 .glb，这次转换为 /TEST2/ 并添加一个额外的 console.log 语句：

console.log( 'An error happened: '+JSON.stringify(error, ["message", "arguments", "type", "name"]) );

我仍然得到同样的错误：

An error happened: {"isTrusted":true}
An error happened: {"type":"error"}

加载第一个转换的 gltf 文件仍然有效（来自 /GLTF/ 的文件），但如前所述，有些似乎转换不当：它们的某些几何图形丢失。

那些错误是什么？我怎样才能加载我的模型？

代码：

<script src="../public/js/3DVisualizer/three.js"></script>
<script src="../public/js/3DVisualizer/inflate.min.js"></script>
<script src="../public/js/3DVisualizer/GLTFLoader.js"></script>
<script src="../public/js/3DVisualizer/DracoLoader.js"></script>

<script src="../public/js/3DVisualizer/OrbitControls.js"></script>
<script src="../public/js/3DVisualizer/Detector.js"></script>
<script src="../public/js/3DVisualizer/stats.min.js"></script>

<script src="../public/js/3DVisualizer/TGALoader.js"></script>

//SOME MORE CODE

<script>

// Instantiate a loader
var loader = new THREE.GLTFLoader();

// Optional: Provide a DRACOLoader instance to decode compressed mesh data
THREE.DRACOLoader.setDecoderPath( '../public/js/3DVisualizer/' );
THREE.DRACOLoader.setDecoderConfig( { type: 'js' } );
loader.setDRACOLoader( new THREE.DRACOLoader() );

// Load a glTF resource
    loader.load(
        // resource URL
        '../public/3D/TEST2/'+name+'.glb',
        // called when the resource is loaded
        function ( gltf ) {

            scene.add( gltf.scene );

            gltf.animations; // Array<THREE.AnimationClip>
            gltf.scene; // THREE.Scene
            gltf.scenes; // Array<THREE.Scene>
            gltf.cameras; // Array<THREE.Camera>
            gltf.asset; // Object

            gltf.scene.traverse(function(node) {
                if (node instanceof THREE.Mesh) {
                    frontObject = node;
                    node.geometry.computeFaceNormals();
                    node.geometry.computeVertexNormals();
                }
            });

            if (name.includes("...")) {
                backObject = gltf.scene;
            }
            else {
                frontObject = gltf.scene;
            }

            console.log("LOADED")

            frontObject.scale.set(45, 45, 45);
            backObject.scale.set(45, 45, 45);


            let box = new THREE.Box3().setFromObject(frontObject);
            let sphere = box.getBoundingSphere();
            let centerPoint = sphere.center;

            console.log("CENTER POINT X: " + centerPoint.x);
            console.log("CENTER POINT Y: " + centerPoint.y);
            console.log("CENTER POINT Z: " + centerPoint.z);

            centerPoint.y = 150;

            var newCoordinate = shootRay(centerPoint, frontObject);

            console.log("NEW POINT X: " + newCoordinate.x);
            console.log("NEW POINT Y: " + newCoordinate.y);
            console.log("NEW POINT Z: " + newCoordinate.z);

            backObject.position.set(newCoordinate.x, newCoordinate.y, (newCoordinate.z - 0));

        },
        // called while loading is progressing
        function ( xhr ) {

        },
        // called when loading has errors
        function ( error ) {
            console.log( 'An error happened: '+JSON.stringify(error) );
            console.log( 'An error happened: '+JSON.stringify(error, ["message", "arguments", "type", "name"]) );

        }
    );

    </script>

我用来从 FBX 转换为 GLTF 的 NPM 包：

https://www.npmjs.com/package/fbx2gltf

错误：

我看到了什么：

.NET Cors isTrusted: true error with Angular 5 app

{"isTrusted":true} exception in core.umd.js

编辑：

Answer 1

要调试它，您可以将模型拖到 my debugging viewer 中，您会看到此消息：

Missing texture: M_Med_Soldier_Body_BLACKKNIGHT_n.tga

glTF 和网络浏览器都不支持 TGA 纹理，因此引用它的事实是用于创建此文件的工具中的错误。我建议在 FBX2glTF 上提交错误。

但是，如果您查看模型文件夹，您会看到相同的图像已经作为 PNG 存在（也许 FBX2glTF 转换了它？）。如果您在文本编辑器（我使用的是 Sublime Text）中打开 .gltf 文件并搜索 "images"，您会发现不正确的 TGA 图像引用。将其重命名为 .png，您将看到我假设的正确结果：

使用 GLTFLoader 时出现 {"isTrusted":true} 错误

Getting an {"isTrusted":true} error when using GLTFLoader

javascript

node.js

three.js

gltf