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

Question

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

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

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

任何人都可以帮助我使 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;