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它调整到你的情况，变量名称。这只是给你一个想法关于如何做这种运动。我没有使用整个圆圈，你一定可以弄明白。