Hello everyone,
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 Discovery | Dairy Farmers of Canada). 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 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 through css2drenderer and css2dobject)
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);
}
});
}