I’m encountering a problem while animating my 3D model using GSAP and Three.js. Specifically, the issue occurs when I pan the model – the camera doesn’t move to the intended target position correctly.

I’m trying to replicate the functionality seen on the Canadian Dairy Farm website Canadian Dairy Farm. On that site, when you interact with the model by panning or rotating and then click a button, the camera smoothly transitions to the correct coordinates associated with that button.

I’d greatly appreciate any assistance in resolving this issue. If anyone has experience with similar implementations or can offer guidance, I’m open to connecting through any preferred communication medium to discuss this further.

Thank you in advance for your help!

I’ve experimented with various approaches to implement a specific functionality in my 3D city model. The core issue is as follows:

When I pan across the city model and then click a floating button to animate the camera to a specific location, the movement doesn’t work as intended. However, if I don’t pan initially and just click the button, the animation functions correctly. This issue does not happen for rotation.

I’m seeking a solution that preserves the panning functionality while ensuring that the camera animates to the correct position regardless of the initial pan state. Any insights or potential solutions would be greatly appreciated.

I’ve included the code snippet below for your review. Please take a look and provide any assistance you can. The buttonData array contains objects that define interactive buttons in the 3D environment. Each object includes the button’s position and specifies where the camera should focus when the button is clicked. This array is used to control camera animation in the 3D scene.

const buttonData = [
    {
        position: new THREE.Vector3(7, 1, 5.5),
        targetPosition: new THREE.Vector3(8.5, 0.8, 6),
        title: "Construction of Large diameter Tunnels using Segmental linings",
        bsTarget: "#segmentalLiningCanvas",
        class: "segmental-lining-icon",
    },//Other button data similar as this one
];

buttonData.forEach((data) => {
    // ... (button creation code)

    btn.addEventListener("click", (event) => {
        event.preventDefault();
        event.stopPropagation();

        // ... (other button click handling code)

        hideAllButtonsExcept(cPointBtn);

        controls.minDistance = (data.bsTarget === "#augerCanvas") ? 3 :
                               (data.bsTarget === "#rehabCanvas") ? 0 :
                               (data.bsTarget === "#microtunnelingCanvas") ? 6.4 : 7;

        gsap.to(camera.position, {
            duration: 4,
            x: data.targetPosition.x,
            y: data.targetPosition.y,
            z: data.targetPosition.z,
            ease: "power2.inOut",
            onUpdate: () => {
                const targetPosition = new THREE.Vector3(data.targetPosition.x, data.targetPosition.y, data.targetPosition.z);
                camera.lookAt(targetPosition);
            },
            onComplete: () => {
                restartAnimations();
            },
        });
    });
});

function resetCameraPosition() {
    gsap.to(camera.position, {
        duration: 2,
        x: targetPosition.x,
        y: targetPosition.y,
        z: targetPosition.z,
        ease: "power2.inOut",
        onUpdate: () => {
            camera.lookAt(scene.position);
            controls.update();
        },
        onComplete: () => {
            controls.minDistance = 7;
            controls.maxDistance = 12;
            controls.update();
            restartAnimations();
            setTimeout(showAllButtons, 100);
        }
    });
}