将我的 FBX 文件转换为 .gltf 后，模型非常小，为啥？

Posted 2023-03-23

【中文标题】将我的 FBX 文件转换为 .gltf 后，模型非常小，为啥？

【英文标题】：After converting my FBX file to a .gltf, the model is incredibly small, why?将我的 FBX 文件转换为 .gltf 后，模型非常小，为什么？

【发布时间】：2019-01-17 23:53:03

【问题描述】：

问题：

将我的 FBX 文件转换为 .gltf 后，模型非常小，为什么？

我尝试使用frontObject.scale.set( 1000, 1000, 1000 ); 缩放模型，但出现以下错误：

TypeError: Cannot read property 'set' of undefined

此外，在

function ( xhr ) 
                    progressBar.style.display = "block";
                    progressBar.style.width = ( xhr.loaded / xhr.total * 100 ) + '%';
                    loadingText.innerhtml = 'Loading... '+xhr.loaded+"/"+xhr.total;
                    // For some reason, xhr.total = 0, so I can't use it
                    setTimeout(function () 
                        frontObject.scale.set( 1000, 1000, 1000 );
                    , 3000);
                ,

xhr.total 总是等于 0，xhr.loaded 等于一个大得离谱的数字。

我所做的只是将我的文件从 .fbx 转换为 .gltf 并将纹理的大小从 2048x2048 更改为 1024x1024。

这是我现在看到的截图：

以前，模型会占据整个垂直高度。

---

代码：

if ( ! Detector.webgl ) Detector.addGetWebGLMessage();

var container, stats, controls;
var camera, scene, renderer, light;

var clock = new THREE.Clock();

var frontObject;

init();
animate();

function init() 

    container = document.createElement( 'div' );
    document.body.appendChild( container );

    camera = new THREE.PerspectiveCamera( 45, window.innerWidth / window.innerHeight, 1, 2000 );
    camera.position.set( 100, 200, 300 );
    camera.lookAt(new THREE.Vector3(0,0,0));

    controls = new THREE.OrbitControls( camera );
    controls.target.set( 0, 100, 0 );
    controls.update();

    scene = new THREE.Scene();
    scene.background = new THREE.Color( 0xa0a0a0 );
    scene.fog = new THREE.Fog( 0xa0a0a0, 200, 1000 );

    light = new THREE.HemisphereLight( 0xffffff, 0x444444 );
    light.position.set( 0, 200, 0 );
    scene.add( light );

    light = new THREE.DirectionalLight( 0xffffff );
    light.position.set( 0, 200, 100 );
    light.castShadow = true;
    light.shadow.camera.top = 180;
    light.shadow.camera.bottom = -100;
    light.shadow.camera.left = -120;
    light.shadow.camera.right = 120;
    scene.add( light );

    light = new THREE.DirectionalLight( 0xffffff );
    light.position.set( 0, 0, -50 );
    light.castShadow = true;
    light.shadow.camera.top = 180;
    light.shadow.camera.bottom = -100;
    light.shadow.camera.left = -120;
    light.shadow.camera.right = 120;
    scene.add( light );

    // scene.add( new THREE.CameraHelper( light.shadow.camera ) );

    // ground
    var mesh = new THREE.Mesh( new THREE.PlaneBufferGeometry( 2000, 2000 ), new THREE.MeshPhongMaterial(  color: 0x999999, depthWrite: false  ) );
    mesh.rotation.x = - Math.PI / 2;
    mesh.receiveShadow = true;
    scene.add( mesh );

    var grid = new THREE.GridHelper( 2000, 20, 0x000000, 0x000000 );
    grid.material.opacity = 0.2;
    grid.material.transparent = true;
    scene.add( grid );

    load();

    renderer = new THREE.WebGLRenderer(  antialias: true  );
    renderer.setPixelRatio( window.devicePixelRatio );
    renderer.setSize( window.innerWidth, window.innerHeight );
    renderer.shadowMap.enabled = true;
    container.appendChild( renderer.domElement );
    renderer.setSize( window.innerWidth, window.innerHeight );



    function load() 

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

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

        // Load a glTF resource
        loader.load(
            // resource URL
            '../path/file.gltf',
            // 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
                frontObject = gltf.asset;

            ,
            // called while loading is progressing
            function ( xhr ) 
                progressBar.style.display = "block";
                progressBar.style.width = ( xhr.loaded / xhr.total * 100 ) + '%';
                loadingText.innerHTML = 'Loading... '+xhr.loaded+"/"+xhr.total;
                // For some reason, xhr.total = 0, so I can't use it
                setTimeout(function () 
                    frontObject.scale.set( 1000, 1000, 1000 );
                , 3000);
            ,
            // called when loading has errors
            function ( error ) 

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

            
        );
    


function animate() 

    requestAnimationFrame( animate );

    if ( mixers.length > 0 ) 

        for ( var i = 0; i < mixers.length; i ++ ) 

            mixers[ i ].update( clock.getDelta() );

        

    

    renderer.render( scene, camera );

---

小提琴：

https://jsfiddle.net/Username100/y54kpe1h/64 我能够以正确的尺寸加载模型！但是似乎默认加载管理器错误地指示所有内容都已加载，这怎么可能？

【参考方案1】：

有时在 GLTF 文件中，对象的最终大小由应用变换的父节点决定。

在你的代码中，我不确定

  gltf.asset; // Object
  frontObject = gltf.asset;

真的是你的对象。

真实对象是gltf.scene 的子对象，可以使用gltf.scene.traverse 或.getObjectByName( 找到

我修复了你的光线投射问题：

https://jsfiddle.net/manthrax/8evurmyx/44/

【讨论】：

我不知道该怎么做？我试过：gltf.scene.traverse(function(node)if(node instanceof THREE.Mesh)frontObject = node;);

我应该尝试什么？

我能够加载模型！但似乎默认加载管理器错误地指示所有内容都已加载，这怎么可能？ jsfiddle.net/Username100/y54kpe1h/64

加载管理器由于错误而提前触发。加载器本身的 onLoad 方法应该没问题。见：github.com/mrdoob/three.js/issues/14256

对，就是上面报告的错误。目前唯一可靠的指标是 loader 的 onLoad 参数，即loader.load( url, function (gltf) console.log(gltf.scene); ).