javascript - Three.js - GLTF 模型位置不是从原点开始

Question

当我尝试用 0,0,0 位置加载 glTF 模型时，它远离原点。

当我尝试旋转 glTF 模型时，它围绕原点旋转(用蓝点标记)而不是从它的中心旋转。

我认为这是某种关键问题？

我该如何解决这个问题？

var tree;
function loadGLTFCharacter(path, position){
    // Load a glTF resource
    loader.load(
        // resource URL
        path,
        // called when the resource is loaded
        function ( gltf ) {
            gltf.scene.traverse( function( node ) {

                if ( node.isMesh ) {
                    node.castShadow = true;
                    node.receiveShadow = true;
                }

            } );
            gltf.scene.position.set(position.x, position.y, position.z);
            tree = gltf.scene;
            scene.add( tree );
            
            gltf.animations; // Array<THREE.AnimationClip>
            gltf.scene; // THREE.Group
            gltf.scenes; // Array<THREE.Group>
            gltf.cameras; // Array<THREE.Camera>
            gltf.asset; // Object

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

            console.log( ( xhr.loaded / xhr.total * 100 ) + '% loaded' );

        },
        // called when loading has errors
        function ( error ) {

            console.log( 'An error happened' );

        }
    );
}

loadGLTFCharacter('models/characters/tree_detailed.gltf', {x:0,y:0.2,z:0});

Answer 1

我在文本编辑器中打开了.gltf文件，结果有一部分:

"nodes": [
{
  "mesh": 0,
  "scale": [
    0.25,
    0.25,
    0.25
  ],
  "translation": [
    6.49107456,
    1.60296546E-31,
    -1.89133477
  ],
  "name": "tree_detailed"
}
],

我将 translation 部分中的数字替换为 0, 0, 0，现在可以正常工作了。

我不明白为什么有人会创建一个带有随机翻译的对象