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然后渲染

1 个答案: