ThreeJS Globe Camera and OrbitControls issues on rotate

Question

I'm working a 3D Globe to display some lovely fruits from all over the world. It's working nice but I have two main issues i can't resolve.

• The first one is about the rotation of my pins. I'd like them to be in front of the camera but still kinda oriented to the center of the globe with my lookAt in the addPin function. I don't know exactly which parameter should I tweak to have the desired result.

• The second one is an issue with OrbitControls and the camera which are conflicting. When I use my prev/next/random buttons they switch properly to a pin, bringing it in front of the camera. But when I start to play with the globe with OrbitControls and later use the controls they are all messed up in calculation. The orbitControls is moving the camera and in my function rotateGlobe I'm rotating my globeGroup which result in a strange conflict.

If a crazy webGL wizard comes around I would LOVE some help about those issues. Thanks a lot in advance !

Here's the link to the repo : https://github.com/Rakido/final-inte It's without package to integrate it later on Shopify, you can launch it with a simple http-server command line.

Thanks a lot ❤️

EDIT :

I kinda of manage the desired effect for the second issue. Here's the code I added in the rotateGlobe function. But it's glitchy when the camera is moving through the globe sometimes. How to handle properly the position to not have the glitch ?

const fruitIndex = fruits.indexOf(fruit) + 1;
const selectedPin = globeGroup.children[fruitIndex];
const pinPosition = new THREE.Vector3();
selectedPin.getWorldPosition(pinPosition); // Obtient la position mondiale du pin
const r_cam = camera.position.length(); // Utiliser la distance actuelle de la caméra
const phi = Math.acos(pinPosition.y / pinPosition.length());
const theta = Math.atan2(pinPosition.z, pinPosition.x);
const x_cam = r_cam * Math.sin(phi) * Math.cos(theta);
const y_cam = r_cam * Math.cos(phi);
const z_cam = r_cam * Math.sin(phi) * Math.sin(theta);
camera.lookAt(pinPosition);

gsap.to(camera.position, {
    x: x_cam,
    y: y_cam,
    z: z_cam,
    duration: 1,
    ease: "power4.inOut"
});