javascript - 三个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