javascript - Three.js 使用 GLTF Loader 加载对象后访问该对象

Question

在带有 GLTF 加载器的 Three.js 中，有没有办法访问对象以在加载后执行转换

这样做似乎不起作用

gltf.scene.position.set(10,10,10)

代码:

function loadObject(){
    var loader = new THREE.GLTFLoader();

    loader.load('test.gltf',
        function ( gltf ) {
            scene.add( gltf.scene );

        },
        function ( xhr ) {
            //console.log( ( xhr.loaded / xhr.total * 100 ) + '% loaded' );
        },
        function ( error ) {
            //console.log( 'An error happened' );
        }
    );
}

loadObject()

// Translate
gltf.scene.position.set(10,10,10)

Answer 1

是的，有。这一切都与范围界定以及在整个应用程序中提供可用的变量有关。

检查此示例的来源 - https://threejs.org/examples/webgl_loader_gltf.html

查看变量是如何声明的，然后在整个代码中使用(第 54,55 行)。

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

您还需要记住，gltf 模型数据在加载后才可用，因此您还需要集成一种方法来处理该数据。我预计当您尝试设置 gltf 模型的位置时，它尚未加载。

LoadingManager 是管理此问题的好方法 - https://threejs.org/docs/#api/en/loaders/managers/LoadingManager

例如，一旦所有资源加载完毕，您就可以执行 init() 方法。

您的场景示例:

var model;

function loadObject(){
    var loader = new THREE.GLTFLoader();

    loader.load('test.gltf',
        function ( gltf ) {

            model = gltf;
            scene.add( model );

            init();

        },
        function ( xhr ) {
            //console.log( ( xhr.loaded / xhr.total * 100 ) + '% loaded' );
        },
        function ( error ) {
            //console.log( 'An error happened' );
        }
    );
}

loadObject()

function init() {
    // Translate
    model.scene.position.set(10,10,10);
}