Three.js圍繞一個球體旋轉一個立方體

Question

我想圍繞一個球體旋轉一個立方體，當我按空格鍵時，立方體開始圍繞球體旋轉就好，但它比我想要的要快得多，我寫了一個函數，它將使用「角度」作爲參數來計算旋轉。完全旋轉將要求角度從0到359（或1到360），但是當角度僅增加7度時，立方體完全圍繞球體旋轉。

代碼：（IM不含立方體的初始化和球齧合，就在函數）

 var rotationAngle = 0; 
     function rotate(angle) 
     { 
      if(angle == 0) 
      { 
       keu.position.x = whiteBall.position.x + 1; 
       keu.position.z = whiteBall.position.z; 
      } else if(angle > 0 && angle < 90) 
      { 
       keu.position.x = whiteBall.position.x + Math.cos(angle); 
       keu.position.z = whiteBall.position.z - Math.sin(angle); 
      } else if(angle == 90) 
      { 
       keu.position.x = whiteBall.position.x; 
       keu.position.z = whiteBall.position.z - 1; 
      } else if(angle > 90 && angle < 180) 
      { 
       angle -= 90; 
       keu.position.x = whiteBall.position.x - Math.sin(angle); 
       keu.position.z = whiteBall.position.z - Math.cos(angle); 
      } else if(angle == 180) 
      { 
       keu.position.x = whiteBall.position.x - 1; 
       keu.position.z = whiteBall.position.z; 
      } else if(angle > 180 && angle < 270) 
      { 
       angle -= 180; 
       keu.position.x = whiteBall.position.x - Math.cos(angle); 
       keu.position.z = whiteBall.position.z + Math.sin(angle); 
      } else if(angle == 270) 
      { 
       keu.position.x = whiteBall.position.x; 
       keu.position.z = whiteBall.position.z + 1; 
      }else if(angle > 270 && angle < 360) 
      { 
       angle -= 270; 
       keu.position.x = whiteBall.position.x + Math.sin(angle); 
       keu.position.z = whiteBall.position.z + Math.cos(angle); 
      } 
      console.log(angle); 
     } 

在上面的代碼

「whiteball是球體，而‘KEU’是立方體

在我的渲染功能，我必須下面的代碼以增加角度和應用旋轉：

  if(isKeyPressed) 
      { 
       if(rotationAngle < 360) 
       { 
        rotationAngle += 1; 
       } 
       if(rotationAngle == 360) 
        rotationAngle = 0; 
      } 
      rotate(rotationAngle); 

我不知道爲什麼只有7度的增加會導致立方體圍繞球體進行完整的旋轉，任何代碼片段/建議將不勝感激。立方體爲Math.sin(counter)和y位置Math.cos(counter)其中計數器是遞增在一些requestAnimationFrame環一些號碼，並且如果是空格鍵向下然後遞增計數器，並且如果達然後停止遞增它的

Answer 1

把X位置。您還可以通過將Math.sin（計數器）乘以該距離（以像素爲單位）來修改移動立方體所圍繞的中心點的距離。你肯定知道罪的範圍是從-1到1

因此，代碼會看起來像：

let isMoving = false; 
document.body.addEventListener('keydown', event => { 
    if (event.key === 'Space') { 
     isMoving = true; 
    } 
}); 
document.body.addEventListener('keyup', event => { 
    if (event.key === 'Space') { 
     isMoving = false; 
    } 
}); 

const X = ...; //your central point, X coordinate of the sphere 
const Y = ...// your central point, Y coordinate of the sphere 

const distance = 100; 
const speed = ...; // how fast do you want your cube to move around the sphere 
let counter = 0; 
let wholeCircle = false; // will be set to true after first round and stop further movement of the cube 
function render() { 
    if (isMoving) { 
     counter += speed; 
    } 

    cube.position.x = X + distance * Math.sin(counter); 
    cube.position.y = Y + distance * Math.cos(counter); 
} 

render(); 

這不是複製代碼，粘貼，你needto它調整到你的情況，變量名稱。這只是給你一個想法關於如何做這種運動。我沒有使用整個圓圈，你一定可以弄明白。