While experimenting with mouse interactions, I encountered a problem where my scene would jitter every time I changed the material.map.image.src dynamically. To showcase this issue, I have connected the image change to the onMouseMove event.
You can view the jittery example here: Example
I attempted to handle this in the onMouseMove event, although I acknowledge that this may not be the best approach. My code is quite basic as I am still learning JavaScript for use with three.js through trial and error.
I am seeking assistance to successfully execute intersects[i].object.material.map.image.src = "/images/maisy.jpg"; in the background... Can anyone guide me on achieving this?
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.
}
}
Although it might seem straightforward to you, I have faced some challenges reaching this point, and currently feel stuck.
I appreciate your help in advance,
James