立体といえば回転。回転といえば歯車。ということで歯車回してみました。(我ながらイミフ・・)
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」は相対座標であることを指しているようである。)
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);
}