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

Question

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

这里是一个有效的紧张示例：Example

我在 onMouseMove 事件中这样做，这可能是错误的方法，我的代码很粗糙，因为我试图学习 javascript 以便使用 three.js：猴子看，猴子做风格。

任何人都可以帮助我使 intersects[i].object.material.map.image.src = "/images/maisy.jpg"; 在后台工作.. .?

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.
        }
    }

这对你们来说可能是显而易见的，但我花了一些时间才走到这一步，现在我被难住了。

非常感谢所有阅读的人，

詹姆斯

Answer 1

在初始化代码的某处你会做：

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

其中maisyTex是一个全局变量。然后在您的代码中，您只需执行以下操作：

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

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

How can I load new material.map.image.src in background and then render

javascript

image

render

on-the-fly

three.js