three.jsで作成したジオメトリの大きさと角度を変更した後の頂点座標を取得したい

Question

three.jsで作成したジオメトリの大きさと角度を変更した後の頂点座標を取得したいです。しかし、変更前の座標しか取得できません。どのようにしたら良いのでしょうか？

const geometry = new THREE.BoxGeometry( 100, 100, 100 );
const material = new THREE.MeshBasicMaterial( {color: 0xFF0000} );
const mesh= new THREE.Mesh( geometry, material );
mesh.position.set(0, 100, 0);
mesh.scale.set(100, 100, 100);
//大きさなどを変更する前と変わらない
console.log(mesh.geometry.vertices);
//実際には表示させないのでaddしていません。

Answer 1

大抵の3DMeshのスケールやら位置などは直接動かしてるわけではなくMatrixを利用して算出してるはずなので、matrixを利用して出さないといけないはずです。

	const geometry = new THREE.BoxGeometry( 100, 100, 100 );
	const material = new THREE.MeshBasicMaterial( {color: 0xFF0000} );
	const mesh= new THREE.Mesh( geometry, material );
	mesh.position.set(0, 100, 0);
	mesh.scale.set(100, 100, 100);
	//大きさなどを変更する前と変わらない
	mesh.updateMatrix();
	mesh.geometry.vertices.forEach(function(v) {
		console.log(v.applyMatrix4(mesh.matrix));
	});

結果

p {x: 5000, y: 5100, z: 5000}
threejs.html:18 p {x: 5000, y: 5100, z: -5000}
threejs.html:18 p {x: 5000, y: -4900, z: 5000}
threejs.html:18 p {x: 5000, y: -4900, z: -5000}
threejs.html:18 p {x: -5000, y: 5100, z: -5000}
threejs.html:18 p {x: -5000, y: 5100, z: 5000}
threejs.html:18 p {x: -5000, y: -4900, z: -5000}
threejs.html:18 p {x: -5000, y: -4900, z: 5000}

こんな感じかな

Comments

[Qooooooo]

大変助かりました！ありがとうございます！