如何在后台加载新的 material.map.image.src 然后渲染答案

【问题标题】：How can I load new material.map.image.src in background and then render如何在后台加载新的 material.map.image.src 然后渲染
【发布时间】：2015-09-19 19:09:22
【问题描述】：

我试图在与鼠标交互时动态更改 material.map.image.src，但每次设置新图像时，图像加载时场景都会抖动。为了在最坏的情况下显示问题，我已将更改与 onMouseMove 事件联系起来。

这里有一个工作紧张的例子：Example

我在 onMouseMove 事件中执行此操作，这可能是错误的方法，而且我的代码很粗糙，因为我尝试学习 javascript 以使用 three.js：monkey see, monkey do style。

谁能帮我让 intersects[i].object.material.map.image.src = "/images/maisy.jpg"; 在后台工作...？ p>

function onMouseMove(e) {
        e.preventDefault();
        mouse.x = (event.clientX / window.innerWidth) * 2 - 1;
        mouse.y = -(event.clientY / window.innerHeight) * 2 + 1;
        raycaster.setFromCamera(mouse, camera);
        var intersects = raycaster.intersectObjects(scene.children);

        for (var i = 0; i < intersects.length; i++) {
            intersects[i].object.material.map.image.src = "/images/maisy.jpg";
            exit; // ensures foreground object is adjusted and not all behind it.
        }
    }

这对你们来说可能很明显，但我花了一些时间才走到这一步，现在我很难过。

非常感谢所有阅读的人，

詹姆斯

【问题讨论】：

标签： javascript image three.js render on-the-fly

【解决方案1】：

在你的初始化代码的某个地方你会做：

maisyTex = THREE.ImageUtils.loadTexture( "images/maisy.jpg" );

maisyTex 是一个全局变量。然后在你的代码中你会这样做：

intersects[i].object.material.map = maisyTex;

【讨论】：

谢谢@gaitat，这完全回答了我的问题。我可能应该补充说，这是一个演示问题，我的生产版本需要根据对象用户数据属性从数千个文件中加载图像。因为我无法将它们全部预先初始化。我想我会有同样的问题。我希望使用一个函数来后台加载图像，然后只有在回调告诉我我有一个加载的图像之后才渲染。这听起来像是正确的方法吗？
异步加载（这里就是这种情况）与您的情况下的后台进程相同。但是有成千上万的图像，要避免打嗝并不容易。此外，我会使用 setTimout() 函数每隔几秒加载一次图像。
我在@Gaitat 时断时续地工作了好几个星期，你让我直接回到了正轨。非常感谢！！！