Three.js、今日はラインの勉強
canvas_lines.htmlを見る。
var geometry = new THREE.Geometry();
for ( var i = 0; i < 100; i ++ ) {
particle = new THREE.Particle( material );
// --- 省略 ---
scene.add( particle );
geometry.vertices.push( particle.position );
}
var line = new THREE.Line( geometry, new THREE.LineBasicMaterial( { color: 0xffffff, opacity: 0.5 } ) );
scene.add( line );
geometry.verticesが頂点の寄せ集め。
このgeometryをLineに放りこめば勝手にラインが引けるw
次にcanvas_lines_sphere.htmlを見る。
var geometry = new THREE.Geometry();
var vertex = new THREE.Vector3( Math.random() * 2 - 1, Math.random() * 2 - 1, Math.random() * 2 - 1 );
vertex.normalize();
vertex.multiplyScalar( 450 );
geometry.vertices.push( vertex );
var vertex2 = vertex.clone();
vertex2.multiplyScalar( Math.random() * 0.3 + 1 );
geometry.vertices.push( vertex2 );
var line = new THREE.Line( geometry, new THREE.LineBasicMaterial( { color: 0xffffff, opacity: Math.random() } ) );
scene.add( line );
vertexで直線の端を、vertex2がもう一方の端を意味する。
normalizeはvertexを単位ベクトルにする。
それから450のスカラー倍すれば半径450の球面上のどこかを示すことになる。
球の中央から放射上に延びた直線にするため、vertexのcloneを作って、それをスカラー倍してる。
2012/07/17 22:42