three js rotating objects around a sphere

Question

So I have been working with threejs recently and ran into some issues when trying to rotate a globe with mini spheres on the surface of the globe.

https://github.com/rohanbhangui/globe-webgl <-- my code can be found here

this is a temp link but for those who want to see my stuff in action: https://cucmfjedgt.localtunnel.me

So what is suppose to happen:

• user can rotate the globe with their mouse and the group which holds the globe and everything in the scene rotates according to the mouse movement
• when a user clicks on a green blob a conditional part of the mouseup event is fired and the globe (along with the green blobs) will rotate such that the clicked green blob will now be in the center of the screen

I have tried nearly everything (except for the solution of course :) )

your help is much appreciated. (Please bear with my code I know its messy)

Answer 1

I guess you work with latitude, attitude points. I calculte the phi, theta as follow:

var phi = (90 - varible1) * Math.PI / 180;
    var theta = (-variable2) * Math.PI / 180;
    var RandomHeightOfLine = 1.5 // Or greater then your point distance to origin

As Vector =

new THREE.Vector3(RandomHeightOfLine * Math.sin(phi) * Math.cos(theta), RandomHeightOfLine * Math.cos(phi), RandomHeightOfLine * Math.sin(phi) * Math.sin(theta)));

As Point =

var x = RandomHeightOfLine * Math.sin(phi) * Math.cos(theta);
var y = RandomHeightOfLine * Math.cos(phi);
var z = RandomHeightOfLine * Math.sin(phi) * Math.sin(theta);
controls.target.set( x, y, z );

If you want to move the camera also I'd suggest to calculate x2,y2,z2 with greater RandomHeightOfLine.

Further more if you want smooth move I suggest you to use TWEEN.

                var t;
                var t2;
                var t3; //Put as Global or use Array, because GC likes to remove Tween objects.
                function tweenCamera(position, target, time){
                    console.log("tween");
                    updateTween = true;
                    beforeTweenPos = camera.position.clone();
                    beforeTweenTarg = controls.target.clone();
                    t = new TWEEN.Tween( camera.position ).to( {
                        x: position.x,
                        y: position.y,
                        z: position.z}, time )
                    .easing( TWEEN.Easing.Quadratic.In).start();
                    t2 = new TWEEN.Tween( camera.up ).to( {
                        x: 0,
                        y: 1,
                        z: 0}, time )
                    .easing( TWEEN.Easing.Quadratic.In).start();
                    t3 = new TWEEN.Tween( controls.target ).to( {
                        x: target.x,
                        y: target.y,
                        z: target.z}, time )
                    .easing( TWEEN.Easing.Quadratic.In)
                    .onComplete(function () {
                        updateTween = false;
                        console.log("Turning off Update Tween");
                        t = null;
                        t2 = null;
                        t3 = null;
                    }, this).start();

                    //camera.up = new THREE.Vector3(0,0,1); //  If you don't want animation for this. And remove t3. 
                }

Also your animation update you should put:

...
                            lastTimeMsec    = lastTimeMsec || nowMsec-1000/60;
                            deltaMsec   = Math.min(200, nowMsec - lastTimeMsec);
                            lastTimeMsec    = nowMsec;
                                if(updateTween)
                                {
                                    TWEEN.update(lastTimeMsec); //Comment
                                } else 
                                {
                                    TWEEN.removeAll();
                                }
...

Tween JS: http://www.createjs.com/tweenjs

Answer 2

Hey you already did that in your code, I just copy from your creation, see your example here

http://www.nhutrinh.com/threejs/

if(intersects.length >= 3)
    {
      for(var i = 0; i < vlist.length; i++)
      {
        if(vlist[i][0].position === intersects[0].object.position)
        {
          console.log("that point exists! code for rotating to green blob goes below");
             targetRotationY = targetRotationYOnMouseDown + ( mouse.y - mouseYOnMouseDown ) * 0.01 *75/targetDistance;
             targetRotationX = targetRotationXOnMouseDown + ( mouse.x - mouseXOnMouseDown ) * 0.01 *75/targetDistance;
          break;
        }
      }
    }