Three.js中的纹理加载进度显示

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加载器的例子中是如何做到的。

- user3704608

---

很遗憾的是，threejs不支持TextureLoader类的字节加载器。您可以在此示例代码中查看https://threejs.org/docs/?q=loader#api/en/loaders/TextureLoader - Cybersupernova

Answer 1

onLoad 回调函数将为加载管理器中的每个项目调用一次。因此，如果您加载一个纹理，则会调用一次。您可以在this fiddle中看到这一点。

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

loader.load(
    url,
    onLoad
);

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

- Wilt

---

嗨，我尝试了你的代码，但仍然存在相同的问题。 - user3704608

据我所见，他想要单个纹理的进度，LoadingManager 只在管理器中的每个单个项目完成后调用进度函数。 - 2pha

你的 jsfiddle 仍然存在相同的问题。console.log 只会在纹理加载完成后显示，而不是在实际加载过程中显示。最终我自己解决了这个问题。在我的场景中，我只在一个几何体（一个球体）上加载了一个纹理，所以我最终做的是使用 loading manager，在页面加载时显示一个加载 html 元素，并在纹理加载完成后通过 JavaScript 隐藏 loading 元素。 - user3704608

@Wilt，他们说得对，你的fiddle中没有报告单个文件传输的进度。尝试加载一个大文件，你会发现用户在完整的负载到达时会收到通知，但他们不会被告知每个文件的进度... - duhaime