将项目放在圆圈边缘 javascript

Question

我正在努力寻找将 n 项放置到圆圈边缘的正确公式。我看过很多示例，但无法让这些公式在我的代码中发挥作用。我还在 cos, sin, tan 上观看了几个视频，但这并没有帮助我获得我想要的正确公式。我的数学很烂，而且我也是 js 的新手，所以这是痛苦的两倍。

这是我的代码

for (let i=0;i<15;i++) {
  cube = new THREE.Mesh(cubeGeo, cubeMat);
  scene.add(cube);
    
   let angle = 2.1 * Math.cos(Math.PI/90);
   let x = 10 + Math.cos(angle) * 2 * (i - 1);
   let y =  10 + Math.sin(angle) * 2 * (i - 1);
    
    gsap.timeline({repeat: -1, yoyo:true})
    .to(cube.position, {duration:2, x: x, y: y});
  }

我想让所有 15 个项目都从中间开始，然后在动画期间均匀分布在一个圆圈中。上面的公式是我在网上找到的公式的科学怪人，试图实现我的目标。

提前致谢。

Answer 1

尝试以下方法（我还没有测试过）...内联注释提供了三角函数的一些基本解释...

此外，我对THREE.js的理解是，立方体将在位置 (0,0,0) 处初始化。下面的代码配置为立方体将在 XY 平面中展开到半径 100。

let n = 15;
let maxRadius = 100;

for (let i = 0; i < n; i++) {
  cube = new THREE.Mesh(cubeGeo, cubeMat);
  scene.add(cube);
    
  // Size of each slice is '360 / n' degrees or in radians '2 * Math.PI / n'...
  let angle = i * ( 2 * Math.PI / n );

  // Calculate 'x' distance as 'radius * cos ( angle )' and 'y' distance using 'sin'...
  let x = ( maxRadius ) * Math.cos( angle );
  let y = ( maxRadius ) * Math.sin( angle );
    
  gsap.timeline({repeat: -1, yoyo:true})
    .to(cube.position, {duration:2, x: x, y: y});
}

将项目放在圆圈边缘 javascript

Placing items on a circles edge javascript

javascript

trigonometry

three.js