LoginSignup
30
40

More than 3 years have passed since last update.

three.jsで歯車回してみた

Last updated at Posted at 2020-11-23

立体といえば回転。回転といえば歯車。ということで歯車回してみました。(我ながらイミフ・・)

See the Pen Gears by kob58im (@kob58im) on CodePen.

ハマった点

arcの仕様がちょっとややこしい。

公式のドキュメントより抜粋:

.arc ( x : Float, y : Float, radius : Float, startAngle : Float, endAngle : Float, clockwise : Boolean ) : this
x, y -- The center of the arc offset from the last call.
radius -- The radius of the arc.
startAngle -- The start angle in radians.
endAngle -- The end angle in radians.
clockwise -- Sweep the arc clockwise. Defaults to false.

直前にarcで移動した先の座標から、円の中心点(今回は原点(0,0))に移動するように、パラメータx,yを指定する必要がある。
(ドキュメントに記載されている「offset from the last call」は相対座標であることを指しているようである。)

image.png

歯車の座標生成部分の抜粋(実コードから少しだけ簡略化してます)

let arcShape = new THREE.Shape();
let t = 2*Math.PI/a.tooths;
let dx1=0;
let dy1=0;
arcShape.moveTo( 0, 0 );
for(let i=0;i<a.tooths;i++) {
  let dx2 = -a.r3*Math.cos((i+a.duty)*t);
  let dy2 = -a.r3*Math.sin((i+a.duty)*t);
  arcShape.arc( dx1, dy1, a.r3, (i       )*t, (i+a.duty)*t, false );
  arcShape.arc( dx2, dy2, a.r2, (i+a.duty)*t, (i+     1)*t, false );
  dx1 = -a.r2*Math.cos((i+1)*t);
  dy1 = -a.r2*Math.sin((i+1)*t);
}

参考

30
40
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
30
40