три js вращающихся объектов вокруг сферы

Так что я недавно работал с тремя jjs и сталкивался с некоторыми проблемами при попытке вращать земной шар с мини-шарами на поверхности земного шара.три js вращающихся объектов вокруг сферы

https://github.com/rohanbhangui/globe-webgl < - мой код можно найти здесь

это ссылка темп, но для тех, кто хочет видеть мои вещи в действии: https://cucmfjedgt.localtunnel.me

Так что предположим, что произойдет:

пользователь может вращать земной шар с помощью мыши и группы, которая держит земной шар, и все в сцене вращается в соответствии с движением мыши
, когда пользователь нажимает на зеленый блок, активируется условная часть события mouseup, и глобус (вместе с зелеными капли) будет вращаться так, что щелчок зеленой капли теперь будет находиться в центре экрана.

Я пробовал почти все (за исключением решения, конечно :) :)

Ваша помощь очень ценится. (Пожалуйста, имейте с моим кодом, я знаю его грязный)

источник

2015-02-25 Rohan Bhangui

Я вижу ваш код работает, по крайней мере в Firefox, вы можете объяснить более –

так в основном, как я уже говорил , Я хочу, чтобы шар вращался так, что, когда я нажимаю зеленые капли, щелчок, который кликнут, центрируется –

А, так что вы можете захотеть получить координаты зеленого пятна, а затем повернуть большой глобус так, чтобы зеленый капля находится в центре экран? –

Эй, ты уже сделал, что в вашем коде, я просто скопировать из вашего творения, увидеть ваш пример здесь

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

источник

2015-02-25 03:29:48

он, кажется, не вращается должным образом, так как он не собирается в центр, который является моей проблемой –

Я думаю, вы работать с широтой, точками отношения. Я calculte Фи, тета- следующим образом:

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

Если вы хотите переместить камеру и я хотел бы предложить, чтобы рассчитать x2, y2, z2 с большим значением RandomHeightOfLine.

Дальше, если вы хотите плавного перемещения, я предлагаю вам использовать 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

источник

2015-08-25 09:50:26

три js вращающихся объектов вокруг сферы

ответ

Смежные вопросы