我使用THREE.js加载管理器来检查对象或纹理是否已加载。

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个模型的图像正在获取,但是在场景中所有项目都已加载。

最佳答案

渲染器每帧渲染一个图像。完成所有对象的加载后,将立即调用管理器的onLoad方法。因此,最后一个对象被添加到场景中,并且您在不使渲染器有机会渲染新图像的情况下检索图像数据。您需要等待新的帧。也许timeout与200毫秒会有所帮助。

编辑

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

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

09-10 21:20