「three.js」でつくるお手軽3Dマンガ作成ソフト - 後編

集中線は球を利用して作成します。どう利用するかというと、球を細長くしたものを1本の線と見立てて、その線を放射状に配置して集中線とします。ここで球を使うのは、ペンの入りと抜きを再現するためです。 「three.js」には、球を作るジオメトリ「SphereGeometry」が存在します。このジオメトリで作った球の「scale.x」「scale.z」を小さくして、「scale.y」を大きくすることで、線状に変形させます。描画位置は「Math.cos」「Math.sin」を使って求めます。後は、放射状になるように回転させれば完成です。 ポイントは、集中線はオブジェクトが多いので、グループに登録してまとめて扱えるようにすることです。すると、後で集中線の位置を移動したり、角度を変えたりする際に、グループの属性を変更するだけでよくなります。中の線を1本ずつ変更するのは大変です。グループ化をうまく使い、階