将项目放置在圆形边缘javascript

编程问答 2022-06-08

问题描述

我正在努力寻找正确的公式来将n项放置到圆形边缘上。我看过很多示例，但是无法在我的代码中使用公式。我还观看了cos,sin,tan上的几个视频，但这并不能帮助我获得所需的正确公式。我很喜欢数学，对js也很陌生，所以这是痛苦的两倍。@H_404_5@

这是我的代码@H_404_5@ 

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个项目都从中间开始，然后在动画过程中均匀地分布成一个圆圈。上面的公式是我在网上发现的试图达到我的目标的公式的科学怪人。@H_404_5@

谢谢。@H_404_5@

解决方法

尝试以下操作（我尚未测试过）...内联注释提供了三角学的一些基本说明...

此外，我对THREE.js的理解是，该多维数据集将在位置（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});
}
javascriptthree.jstrigonometry