I managed to create a cube using the canvas renderer with r59 of Three.js, and it has different textures on different sides, which renders fine. I can also animate this cube's position and rotation without any issues.
Now, here's what I'm trying to achieve: A) The cube should initially have an image texture on its front side. B) I need to move the cube out of the camera's view. C) Change the image texture on the cube. D) Move the cube back to its original position to make it visible again.
Steps A, B, and D are working as expected. However, I'm encountering a problem when I try to implement step C. The relevant code parts are highlighted below...
<body>
<script src="build/three.min.js"></script>
<script src="js/libs/tween.min.js"></script>
<script>
// all the necessary code and initialization
// code snippets to create cube and textures
// code snippets for animating the cube
// function to change texture
</script>
</body>
Within my project, I am performing various tweening operations (moving and rotating multiple objects) and calling the texture change function from there...
When I remove the line...
cubeMesh.material = MatCollection[currentMat];
from the function, everything works perfectly. The cube moves in and out of view but always displays the same texture.
What adjustments should I make to fix this issue?
I appreciate your insights and suggestions.
Oliver