三个 js 围绕球体旋转物体

Question

所以我最近一直在使用threejs，并在尝试旋转地球表面上带有迷你球体的地球时遇到了一些问题。

https://github.com/rohanbhangui/globe-webgl

这是一个临时链接，但对于那些想要看到我的东西的人来说：https://cucmfjedgt.localtunnel.me

那么假设会发生什么：

• 用户可以用他们的鼠标和持有地球的组旋转地球，场景中的一切都根据鼠标的移动而旋转
• 当用户单击绿色 blob 时，mouseup 事件的条件部分会被触发，并且地球（连同绿色 blob）将旋转，这样单击的绿色 blob 现在将位于屏幕中心

我几乎尝试了所有方法（当然解决方案除外 :)）

非常感谢您的帮助。 （请耐心等待我的代码，我知道它很乱）

Answer 1

我猜你使用的是纬度，态度点。我计算 phi，theta 如下：

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

作为向量 =

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

作为点 =

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 );

如果您还想移动相机，我建议使用更大的 RandomHeightOfLine 计算 x2,y2,z2。

如果你想要平滑移动，我建议你使用 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. 
                }

您还应该添加动画更新：

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

补间JS：http://www.createjs.com/tweenjs

Answer 2

嘿，你已经在你的代码中这样做了，我只是从你的创作中复制过来，在这里查看你的示例

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;
        }
      }
    }