javascript - three.js 如何检查项目是否加载到场景中？

Question

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

Answer 1

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

编辑

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

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