tree.jsのメッシュのpositionとはどこを表すのか

ソースコードはgithubで公開しています。

tree.jsで立方体を作る際に、幅・高さ・奥行きを決めるのですが、これらの数値はどこから測られるのか、よく分からなかったので確かめてみました。

座標をすべて0にして試してみる

10cmの立方体と、その立方体の高さを0にした床を用意。両方ともpositionはすべて0です。

// キューブ
var cubeGeometry = new THREE.BoxGeometry(10, 10, 10);
var cubeMaterial = new THREE.MeshBasicMaterial({
    color : 0x660000,
    wireframe : true
});
var cubeMesh = new THREE.Mesh(cubeGeometry, cubeMaterial);
cubeMesh.position.set(0, 5, 0);
scene.add(cubeMesh);

// 床      
var floorGeometry = new THREE.BoxGeometry(10, 0, 10);
var floorMaterial = new THREE.MeshBasicMaterial({
    color : 0xffffff
});
var floorMesh = new THREE.Mesh(floorGeometry, floorMaterial);
floorMesh.position.set(0, 0, 0);
scene.add(floorMesh);

 treejs_01_141011

床にはBoxGeometryを使用していますが、高さを0でも描画されます。さて、上記の結果を見てみると、2つのメッシュ(立方体と床)の描画位置は同じなのに、床が立方体の中心に描画されていますね。positionとは中心座標を表すことがわかりました。

床の上に立方体を置く

立方体の座標を、y方向に上げてみましょう。positionは中心座標なので立方体の高さの半分だけ上げます。

cubeMesh.position.set(0, 5, 0);

 treejs_02_141011

これで立方体を床の上に置くことができました。