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

本文介绍了使用 GLTFLoader 时出现 {“isTrusted":true} 错误的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

问题:

一切正常:我在/GLTF/子文件夹中将 FBX 文件转换为 GLTF.

遗憾的是，某些转换后的文件中缺少一些几何图形，因此我尝试再次转换我的 FBX 文件，这次转换为/TEST/.

突然，模型无法加载，并且来自我的 console.log 语句:

console.log('发生错误:'+JSON.stringify(error));

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

发生错误:{"isTrusted":true}

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

console.log( '发生错误:'+JSON.stringify(error, ["message", "arguments", "type", "name"]) );

我仍然遇到同样的错误:

发生错误:{"isTrusted":true}发生错误:{"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>//更多代码<脚本>//实例化一个加载器var loader = new THREE.GLTFLoader();//可选:提供一个 DRACOLoader 实例来解码压缩的网格数据三.DRACOLoader.setDecoderPath('../public/js/3DVisualizer/');THREE.DRACOLoader.setDecoderConfig( { type: 'js' } );loader.setDRACOLoader(new THREE.DRACOLoader());//加载 glTF 资源loader.load(//资源地址'../public/3D/TEST2/'+name+'.glb',//加载资源时调用功能(gltf){场景.添加( gltf.scene );gltf.animations;//数组gltf.scene;//三.场景gltf.scenes;//数组gltf.cameras;//数组gltf.资产;//目的gltf.scene.traverse(功能(节点){如果(节点实例THREE.Mesh){frontObject = 节点；node.geometry.computeFaceNormals();node.geometry.computeVertexNormals();}});if (name.includes("...")) {backObject = gltf.scene;}别的 {frontObject = gltf.scene;}控制台日志(加载")frontObject.scale.set(45, 45, 45);backObject.scale.set(45, 45, 45);让 box = new THREE.Box3().setFromObject(frontObject);让球体 = box.getBoundingSphere();让 centerPoint = sphere.center;console.log("中心点 X:" + centerPoint.x);console.log("中心点 Y:" + centerPoint.y);console.log("中心点 Z:" + centerPoint.z);中心点.y = 150;var newCoordinate = shotRay(centerPoint, frontObject);console.log("新点 X:" + newCoordinate.x);console.log("新点 Y:" + newCoordinate.y);console.log("新点 Z:" + newCoordinate.z);backObject.position.set(newCoordinate.x, newCoordinate.y, (newCoordinate.z - 0));},//在加载过程中调用函数 ( xhr ) {},//加载出错时调用功能(错误){console.log('发生错误:'+JSON.stringify(error));console.log( '发生错误:'+JSON.stringify(error, ["message", "arguments", "type", "name"]));});

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

我看到了什么:

解决方案

要对此进行调试，您可以将模型拖入

QUESTION:

Everything was working fine: I converted my FBX files to GLTF inside my /GLTF/ subfolder.

Sadly, some geometry was missing from some of the converted files, so I tried to convert again my FBX files, this time to /TEST/.

Suddenly, the models don't load and from my console.log statement:

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

I get this strange useless error:

An error happened: {"isTrusted":true}

So I try to convert my FBX files to .glb instead, this time to /TEST2/ and add an additional console.log statement:

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

I still get the same error:

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

Loading the first converted gltf files still works (those from /GLTF/), but as mentioned, some seem to have improperly converted: some of their geometry is missing.

What are those errors and how can I make my models load ?

CODE:

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

NPM PACKAGE I USED TO CONVERT FROM FBX TO GLTF:

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

ERROR:

WHAT I LOOKED AT:

Log shows Error object: {"isTrusted":true} instead of actual error data

.NET Cors isTrusted: true error with Angular 5 app

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

EDIT:

解决方案

To debug this, you can drag the model into my debugging viewer and you'll see this message:

Neither glTF nor web browsers support TGA textures, so the fact that it's referenced is a bug in the tool used to create this file. I'd recommend filing a bug on FBX2glTF.

However, if you look in the model folder, you'll see that same image is already there as a PNG (perhaps FBX2glTF converted it?). If you open the .gltf file in a text editor (I used Sublime Text) and search for "images", you'll find that incorrect TGA image reference. Rename it to .png and you'll see what I assume is the correct result:

这篇关于使用 GLTFLoader 时出现 {“isTrusted":true} 错误的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！