使用 Three.js 加载纹理的 onProgress

Question

您好，我在加载场景纹理时生成加载消息时遇到一些问题。onProgress console.log 消息仅在纹理完全下载时触发​​，而不是在下载过程中触发。

manager = new THREE.LoadingManager();

manager.onProgress = function () {
    console.log('loading');
};
manager.onLoad = function () {
    console.log('loaded');
};
manager.onError = function () {
    console.log('there has been an error');
};

var textureLoader = new THREE.TextureLoader( manager );
var planetTexture = textureLoader.load('/assets/images/planet/{{page.planet}}/{{page.planet}}.jpg');

我浏览了这些示例，但无法弄清楚他们在这个示例obj loader中是如何做到的

Answer 1

onLoad加载管理器中的每个项目都会调用一次回调。因此，如果您加载一个纹理，它就会调用一次。你可以在这个小提琴中看到这一点。

要使用回调，您可以在调用该load方法时将其作为第二个参数传递：

loader.load(
    url,
    onLoad
);

这意味着您无法看到单个图像的进度，而只能在使用同一加载管理器加载多个纹理时监视进度。