如何检查项目是否在three.js中加载到场景中?

时间:2016-02-01 07:19:10

标签: javascript 3d three.js loading

我使用THREE.js Loading Manager检查对象或纹理是否已加载。

var Mesh;
var TLoader = new THREE.TextureLoader(manager);

var manager = new THREE.LoadingManager();
manager.onProgress = function ( item, loaded, total ) {

    console.log( item, loaded, total );

};

manager.onLoad = function()
{

    console.log(Renderer.domElement.toDataURL());
}


 function renderModel(path,texture) {

            var Material = new THREE.MeshPhongMaterial({shading: THREE.SmoothShading});
            Material.side = THREE.DoubleSide;

            var Loader = new THREE.JSONLoader(manager);
            Loader.load(path,function(geometry){

                geometry.mergeVertices();
                geometry.computeFaceNormals();
                geometry.computeVertexNormals();

                TLoader.load(texture,function(texture){


                Mesh = new THREE.Mesh(geometry, Material);
                Mesh.material.map =texture;
                Scene.add(Mesh);


                });
            });
        }

我只是在循环中调用renderModel函数。 但是manager.onload函数的console.log(Renderer.domElement.toDataURL())输出只给出了一些3d模型的图像而不是场景中的所有模型

我只想在场景中渲染所有3D模型时获得'Renderer.domElement.toDataURL()'

现在只有2或3个模型的图像,但在场景中所有项目都已加载。

1 个答案:

答案 0 :(得分:1)

渲染器每帧渲染一个图像。完成所有对象的加载后,立即调用管理器的onLoad方法。因此,最后一个对象被添加到场景中,您可以检索图像数据,而无需为渲染器提供渲染新图像的机会。你需要等待一个新的框架。可能是timeout例如200毫秒将有所帮助。

修改

您也可以在render中调用onLoad方法,以便渲染器在您致电console.log之前绘制新图片。

manager.onLoad = function()
{
    Renderer.render( Scene, camera );
    console.log(Renderer.domElement.toDataURL());
}