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()例如，一旦您的所有 Assets 都已加载，请使用该方法。

您的场景示例:

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);
}