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

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

three.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);

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

床の上に立方体を置く

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

// 立方体の中心座標の変更
cubeMesh.position.set(0, 5, 0);

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