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

[Tim]

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?

[mjurczyk]

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.)

So:

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

plane.getWorldDirection(planeDirection);
camera.getWorldDirection(cameraDirection);

const dotCameraPlane = planeDirection.dot(cameraDirection);

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

  planeIsLoadingTexture = true;
}

[Tim]

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

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 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();

        group.getWorldDirection(planeDirection);
        camera.getWorldDirection(cameraDirection);

        const dotCameraPlane = planeDirection.dot(cameraDirection);

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

        }

}