Rotating Plane, how to change texture depending on rotation and viewing angle

Hey all,

I’ve got a “cube” made out of 5 planes. This plane group rotates on the x axis automatically. And on the Y axis based on the page scroll position.

What I wish to accomplish is the following. Say I use these planes as an image carousel. And I have 8 slides. Every time the next side of the plane comes in view, I want to change/preload the next texture on the other side.

So, at the start of the render is slide 0 of the texture array. then it rotates the back side into view and that side now has texture 1 of the array. It keeps rotating to the front again and now this side has texture 2 of the texture array.

When I only have one rotation axis I would change the texture based on the known group.rotation.x position. But now we have two axis. What would be the best way to change the texture?

You can embrace the math and let it help you in it’s own mysterious ways - dot product of two vectors pointing in the same-ish direction is > 0, dot product of vectors pointing away from one another is < 0 (parallel is 0 ofc.)


const planeDirection = new Vector3();
const cameraDirection = new Vector3();


const dotCameraPlane =;

if (dotCameraPlane > 0.0 && !planeIsLoadingTexture) {
  // NOTE Plane is looking away from the camera, trigger new texture loading
  loadNewTexture().then(() => planeIsLoadingTexture = false);

  planeIsLoadingTexture = true;

Hey @mjurczyk . Thanks! That’s a whole new concept for me :slight_smile:

It almost worked. Say it takes the group 1000 steps to rotate 180 degrees.
Than it ran the code a 1000 times and and a 1000 times not :slight_smile: So it only ran one side and on that side it ran all the time. BUT! Thanks to your help I was able to piece it together. I’ve added a counter to keep track of the current slide.

    let toggle = false;
    let counter = 0;
    let slidesAmount = 6;

    function animate() {

        const planeDirection = new Vector3();
        const cameraDirection = new Vector3();


        const dotCameraPlane =;

        if ((dotCameraPlane > 0.0) === toggle) {
            toggle = !toggle;
            // do changing the slide code here
            counter = counter < slidesAmount ? counter + 1 : 0;