Three.jsの例、webgl_trails.htmlを見る
camera.position.set( 100000, 0, 3200 );
は
camera.position.x = 100000;
camera.position.y = 0;
camera.position.z = 3200;
と同じ。x、y、zの全部を指定する場合はsetを使うとスマート。
粒子の追加はこんな感じ：
var geometry = new THREE.Geometry();
var vertex = new THREE.Vector3();
vertex.x = 50;
geometry.vertices.push( vertex );
geometry.colors.push( new THREE.Color( 0xff0080 ) );
var material = new THREE.ParticleBasicMaterial( { size: 1, vertexColors: THREE. VertexColors, depthTest: false, opacity: 0.5, sizeAttenuation: false } );
var mesh = new THREE.ParticleSystem( geometry, material );
scene.add( mesh );
geometryとmaterialを決めてParticleSystemに放りこむ。
camera.lookAt( scene.position );
で常にsceneの位置を見るようにしてるから、粒子の軌跡が曲がってるようになる。
次にcanvas_geometry_hierarchy.htmlで3Dオブジェクトの配置を見る。
こんな感じでgroupにまとめられる：
var geometry = new THREE.CubeGeometry( 100, 100, 100 );
var material = new THREE.MeshNormalMaterial();
group = new THREE.Object3D();
var mesh = new THREE.Mesh( geometry, material );
mesh.position.y = 200;
mesh.rotation.x = Math.PI / 4;
mesh.matrixAutoUpdate = false;
mesh.updateMatrix();
group.add( mesh );
scene.add( group );
groupでまとめることができるから、パーツごとにまとめたものを最後にsceneに追加すればいいのかな。
ドキュメントを見る。
updateMatrixはローカルの変形をアップロードするって言っている。
matrixAutoUpdateはそれを自動でさせるかどうかを決めるんだな。
今日の最後にcanvas_geometry_panorama.htmlを見る。
この例はパノラマ写真を見るときや、3D空間の無限遠方にあるような背景にいいね。
2012/07/15 21:10