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

Javascript 如何在后台加载新的material.map.image.src,然后进行渲染,javascript,image,three.js,render,on-the-fly,Javascript,Image,Three.js,Render,On The Fly,我试图在与鼠标交互时动态更改material.map.image.src,但每次设置新图像时,图像加载时场景都会抖动。为了在最坏的情况下显示问题,我将更改链接到onMouseMove事件 下面是一个工作紧张的示例: 我在onMouseMove事件中这样做,这可能是错误的方法,我的代码很粗糙,因为我试图学习javascript以使用三个.js:monkey-see,monkey-do-style 有人能帮我把[i].object.material.map.image.src=“/images/ma

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

下面是一个工作紧张的示例:

我在onMouseMove事件中这样做,这可能是错误的方法,我的代码很粗糙,因为我试图学习javascript以使用三个.js:monkey-see,monkey-do-style

有人能帮我把[i].object.material.map.image.src=“/images/maisy.jpg”与[i]相交吗在后台工作

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.
        }
    }
移动鼠标的功能(e){ e、 预防默认值(); mouse.x=(event.clientX/window.innerWidth)*2-1; mouse.y=-(event.clientY/window.innerHeight)*2+1; raycaster.setFromCamera(鼠标、相机); var intersects=raycaster.intersectObjects(scene.children); 对于(变量i=0;i 这对你们大家来说可能是显而易见的,但我花了一些时间才走到这一步,现在我被难倒了

提前向所有阅读的人表示感谢


James

在初始化代码中的某个地方,您可以执行以下操作:

maisyTex = THREE.ImageUtils.loadTexture( "images/maisy.jpg" );
maisyTex
作为全局变量。然后在代码中,您只需执行以下操作:

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

在初始化代码中的某个地方,您可以执行以下操作:

maisyTex = THREE.ImageUtils.loadTexture( "images/maisy.jpg" );
maisyTex
作为全局变量。然后在代码中,您只需执行以下操作:

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

谢谢@gaitat,这正好回答了我的问题。我可能应该补充说,这是一个演示来显示问题,我的产品版本需要根据对象用户数据属性从数千个文件加载图像。因为我不能预先初始化它们。我想我也会有同样的问题。我希望使用一个函数来后台加载图像,然后只有在回调告诉我加载了图像后才进行渲染。这听起来像是正确的方法吗?异步加载(这里就是这种情况)与在您的案例中使流程后台化是一样的。但是有成千上万的图片,要避免打嗝是不容易的。另外,我会使用setTimout()函数,每隔几秒钟加载一次图像。我已经在@Gaitat上断断续续地做了几周了,你让我直接回到了正轨。非常感谢!!!谢谢@gaitat,这正好回答了我的问题。我可能应该补充说,这是一个演示来显示问题,我的产品版本需要根据对象用户数据属性从数千个文件加载图像。因为我不能预先初始化它们。我想我也会有同样的问题。我希望使用一个函数来后台加载图像,然后只有在回调告诉我加载了图像后才进行渲染。这听起来像是正确的方法吗?异步加载(这里就是这种情况)与在您的案例中使流程后台化是一样的。但是有成千上万的图片,要避免打嗝是不容易的。另外,我会使用setTimout()函数,每隔几秒钟加载一次图像。我已经在@Gaitat上断断续续地做了几周了,你让我直接回到了正轨。非常感谢!!!