How to rotate threejs sphere on clicking points to come forward, smoothly

Questions
, , ,
1

I’ve got latitudes/longtitude/position x, y, z for each box. And I got this to understand if the box is clicked or not. But I’m having trouble rotating this sphere to make clicked box positioned on center. (So what I want to do is click the box, and then sphere rotates to show this clicked box on center front position of this sphere. Like Gl.js)


window.addEventListener('click', boxClick, false);

var raycaster2 = new THREE.Raycaster();
var mouse2 = new THREE.Vector2();

function boxClick(event) {
    event.preventDefault();
    mouse.x = ((event.clientX - innerWidth / 2) / innerWidth) * 2
    mouse.y = -(event.clientY / innerHeight) * 2 + 1
    mouse2.x = ((event.clientX - renderer.domElement.clientWidth / 2) / renderer.domElement.clientWidth) * 2
    mouse2.y = -(event.clientY / renderer.domElement.clientHeight) * 2 + 1;
    raycaster2.setFromCamera(mouse2, camera);
    var intersects1 = raycaster2.intersectObjects(AIEd.children);

    for (let i = 0; i < intersects1.length; i++) {

        const box = intersects1[i].object
        console.log(box)

    }
}

Right now I’m just console logging the box to make sure if click is working. (And it is working.)

Could anyone give me some advice on how to use group rotation smoothly to position I want?

2

Are you sure you want to rotate the sphere, or are you possibly thinking of orbiting the camera around the sphere, for the desired effect?

I’d assume, you are using OrbitControls() already to look at the sphere from different angles, aren’t you? Mixing both approaches would imo needlessly complicate things, so please indicate which way you want to go forward.