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

Question

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

当我试图旋转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，现在运行良好。

为什么有人会创建一个带有随机翻译的对象，我是无法理解的。

Answer 2

当从一个CAD应用程序导出到另一个应用程序时，可能会发生类似这些随机转换的事情。当我将架构设计从Fusion 360导出到Cinema 4d，然后从那里导出到Blender，以便将其导出为一个gltf文件时，我就遇到了这种情况。

由于单元不匹配，该模型还有另一个比例因子，为了再次获得所需的大小，我将其缩小。然后，模型的一部分出现在错误的位置，所以我不得不将它们转换到所需的点。虽然这在CAD应用程序中看起来不错，但是这些缩放和旋转将保存在gltf文件中，并且可能由three.js以不同的方式处理，从而导致您所遇到的错误。

避免这种情况的方法有：

如果可能的话，

1. 避免在您的资产生产管道中使用几种不同的应用程序和文件格式。
2. (如果不是1)，则负责导出和导入设置，特别是。规模因素和单位。检查导入的模型的大小，例如与Blender's标准多维数据集进行比较。
3. 试图保持一致的单元工作流。导出到three.js时，请记住，three.js中的一个单元等于一米(SI系统)，从设计开始就使用相同的单位和比例因子。
4. 在处理第三方资产时:首先，检查它们的单位、比例因子、定位和(不相关但也很重要)上轴。

。