Three.js在使用GLTF Loader加载对象后访问对象

时间:2018-10-24 14:17:49

标签: javascript three.js

在带有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)

1 个答案:

答案 0 :(得分: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);
}