Three.js で円柱を、始点と終点を指定して、描く。
Three.js を使って円柱を描きたいのだが、始点終点を指定する方法がなかったので、
自分で作りました。コードを載せておきます。
始点(x0,y0,z0)始点半径(r0)、終点(x1,y1,z1)終点半径(r1)
色(int)、端を閉じるか(boolean) で指定します。
function createCylinder(x0,y0,z0,r0, x1,y1,z1,r1, col, open)
{
var v = new THREE.Vector3(x0-x1, y0-y1, z0-z1);
var len = v.length();
var material = new THREE.MeshLambertMaterial({ color:col, ambient:col, opacity:1.0 });
var cylinder = new THREE.Mesh(new THREE.CylinderGeometry(r0, r1, len, 0, 0, open), material);
cylinder.overdraw = true;
if (len > 0.001) {
cylinder.rotation.z = Math.acos(v.y/len);
cylinder.rotation.y = 0.5*Math.PI + Math.atan2(v.x, v.z);
cylinder.eulerOrder = 'YZX';
}
cylinder.position.x = (x1+x0)/2;
cylinder.position.y = (y1+y0)/2;
cylinder.position.z = (z1+z0)/2;
return cylinder;
}
これを使ったサンプルページは、こちら
http://www.nariuchi.com/3d/indexj.html
Three.js での Material と、Light 指定
Three.js で、不透明で普通のオブジェクトを、表現したい場合に、どの
Material と、Light を使うのかが、不明であったが、今回解決した。
これまでは、THREE.MeshLamberMaterial をcolor指定のみで使っていた。
これだと、オブジェクトに黒い場所か、グレーの場所が出来てしまう。
ambient を指定し、ambientLigth も追加すれば、上手くいった。
サンプル画像
コード
var ambientLight = new THREE.AmbientLight(0x666666);
ThreeScene.add(ambientLight);
var material = new THREE.MeshLambertMaterial(
{color:0xff0000, ambient:0xff0000, opacity:1.0});
これを使ったWebGL/Three.js のページは、こちら
http://www.nariuchi.com/3d/indexj.html
多面体が出てきた
電子の動きをシミュレートしていたら、いろいろ多面体が出てきました。
アニメーションとして、まとめて、youtube に投稿しました。
https://www.youtube.com/watch?v=IbZ4XQlt-J8
結果をWebGL で表示するようにしました。
http://www.nariuchi.com/3d/indexj.html
多面体についてのブログも始めたので、いろいろ解説していきたいと思います。
上は、 電子数(頂点数)32の時の多面体。
五方十二面体との名前があるらしい。これまで、5種類の正多面体の名前しか知らなかったので、以外な発見となった。