キューブがドラッグでぐるぐる回るcanvas_geometry_cube.htmlでお勉強

var materials = [];
for ( var i = 0; i < 6; i ++ ) {
 materials.push( new THREE.MeshBasicMaterial( { color: Math.random() * 0xffffff } ) );
}
cube = new THREE.Mesh( new THREE.CubeGeometry( 200, 200, 200, 1, 1, 1, materials ), new THREE.MeshFaceMaterial() );
cube.position.y = 150;
scene.add( cube );
6つのMeshBasicMaterialでできた配列materialsでcubeを構成。

cube.position.yで設置位置を決める。xやzについても同様にできる。

次にcanvas_geometry_earth.htmlを見てみる。
球体の扱い方についての例。
例をブラウザで見ると地球そのものw 
mesh = new THREE.Mesh( new THREE.SphereGeometry( 200, 20, 20 ), new THREE.MeshBasicMaterial( { map: THREE.ImageUtils.loadTexture( 'textures/land_ocean_ice_cloud_2048.jpg' ), overdraw: true } ) );
scene.add( mesh );
new THREE.SphereGeometry( 200, 20, 20 ) の2・3番目の引数はメッシュの細かさに関係する。
これらの数値が低いととても球体とは思えない姿にw
だからといって高すぎても無駄に処理させるだけ…
この例ではそれぞれ20が適切だった。

overdrawをfalseにすると球体を構成してるメッシュが見えてしまう。
デフォルト値がfalseだから、忘れずにtrueにする。

テクスチャのファイル名が単にearthでない。
実際にこのファイルを見ると普通のjpegで、あるのは陸と海と氷と雲。
なぜこんな名前なのか納得したw

Three.js、簡単でおもしろいね！
2012/07/14 11:32
タグ