javascript - three.js Object3Dからバウンディングボックスを取得する方法はありますか？

Question

Three.jsとOBJLoader.jsを使用してOBJファイルを読み込んでいます。これにより、3Dモデルに期待するもの（位置ベクトル、上ベクトル...）を持つThree.Object3Dオブジェクトが返されます。

私が理解できないのは、そのバウンディングボックスを取得する方法です-これは可能ですか？

Answer 1

オブジェクトのすべての子を反復処理する必要はありません。ライブラリにはこれを行うメソッドがあります: THREE.Box3#setFromObject: docs を参照してください。たとえば、次のことができます。

var bbox = new THREE.Box3().setFromObject(obj);

すべての子を含むのバウンディング ボックスを取得し、obj移動、回転などを考慮します。

BoundingBoxヘルパーは、オブジェクトのバウンディング ボックスを計算するだけではなく、シーン内にバウンディング ボックスを描画することを目的としていることに注意してください。

Answer 2

オブジェクトがシーンに表示されるときのバウンディング ボックスの位置とサイズが必要な場合は、BoundingBoxHelper を試してください。

var helper = new THREE.BoundingBoxHelper(someObject3D, 0xff0000);
helper.update();
// If you want a visible bounding box
scene.add(helper);
// If you just want the numbers
console.log(helper.box.min);
console.log(helper.box.max);

ジオメトリの.boundingBoxは、親メッシュなどに適用される可能性のある移動、回転、またはスケーリングを考慮していないため、手動で調整するのは非常に難しいことがわかりましたが、ヘルパーが自動的に調整してくれます。

Answer 3

どの形状でも、そのジオメトリオブジェクトにはboundingBoxプロパティがあります。このプロパティはTHREE.Box3オブジェクトを保持します。このBox3オブジェクトは、2つのTHREE.Vector3オブジェクトとでmin構成されていますmax。

var geometry = new THREE.CylinderGeometry(...);
var material = new THREE.LineBasicMaterial(...);
var mesh = new THREE.Mesh(geometry, material);

var boundingBox = mesh.geometry.boundingBox.clone();
alert('bounding box coordinates: ' + 
    '(' + boundingBox.min.x + ', ' + boundingBox.min.y + ', ' + boundingBox.min.z + '), ' + 
    '(' + boundingBox.max.x + ', ' + boundingBox.max.y + ', ' + boundingBox.max.z + ')' );

JSONオブジェクトファイルからロードされるような、より複雑な形状の場合、バウンディングボックスプロパティはデフォルトで未定義です。明示的に計算する必要があります。

var loader = new THREE.ObjectLoader();
loader.load(imagePath, function(object){

    geometry = object.children[0].children[0].geometry;  // substitute the path to your geometry

    geometry.computeBoundingBox();  // otherwise geometry.boundingBox will be undefined

    var boundingBox = geometry.boundingBox.clone();
    alert('bounding box coordinates: ' + 
        '(' + boundingBox.min.x + ', ' + boundingBox.min.y + ', ' + boundingBox.min.z + '), ' + 
        '(' + boundingBox.max.x + ', ' + boundingBox.max.y + ', ' + boundingBox.max.z + ')' );
}