问题:
一切正常:我将FBX文件转换为/ GLTF /子文件夹中的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
错误:
我查看的内容:
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
编辑:
答案 0 :(得分:1)
要对此进行调试,您可以将模型拖到my debugging viewer中,然后会看到以下消息:
缺少纹理:M_Med_Soldier_Body_BLACKKNIGHT_n.tga
glTF和Web浏览器都不支持TGA纹理,因此引用它的事实是用于创建此文件的工具中的错误。我建议在FBX2glTF上提交错误。
但是,如果您在model文件夹中查找,您会看到已经存在与PNG相同的图像(也许是FBX2glTF对其进行了转换?)。如果在文本编辑器(我使用Sublime Text)中打开.gltf
文件并搜索“图像”,则会发现该TGA图像参考不正确。将其重命名为.png
,您会看到我认为是正确的结果: