如何在反应三纤维中得到物体的大小

Question

我想根据另一个对象的大小调整react three fiber中的某个对象的尺寸。我已经使用STL加载程序加载了这两个对象，并想使用它们。

const geomUpper = useLoader(STLLoader, upperUrl)
const geomLower = useLoader(STLLoader, lowerUrl)

然后我想用geomUpper的大小来调整geomLower的大小，但我不知道如何获得geomUper的大小。有办法知道它的尺寸吗？

Answer 1

更新

在效果挂钩内部，您可以获得geomUpper的大小并使用它缩放geomLower。

function Scene() {
const geomUpper = useLoader( STLLoader, '/upper.stl' );
const geomLower = useLoader( STLLoader, '/lower.stl' );
useEffect(() => {
if ( ! geomUpper.boundingSphere ) {
geomUpper.computeBoundingSphere();
}
console.log( 'geomUpper radius', 
geomUpper.boundingSphere.radius );
if( ! geomLower.boundingSphere ) {
geomLower.computeBoundingSphere();
}
console.log( 'geomLower radius', 
geomLower.boundingSphere.radius );
const scale = geomUpper.boundingSphere.radius / 
geomLower.boundingSphere.radius;
geomLower.scale( scale, scale, scale );
console.log( 'geomLower radius (after scaling)', 
geomLower.boundingSphere.radius );
})
return (
<Suspense>
<mesh geometry={geomUpper} />
<mesh geometry={geomLower} />
</Suspense>
)
}

我在这里使用boundingShere的半径作为大小的代理，但这只是为了简洁。您可以使用boundingBox的x、y和z维度，并使用更高级的逻辑来满足您的需求。我的console.log()调用只是健全性检查，可以删除。

---

原始答案(不适用于React Three Fiber，但应适用于香草Three.js(

如果geomUpper的位置在其网格内，则此操作应该有效。

// create a Box3 to hold the dimensions
// initialize it to a zero-size box at geomUpper's position
const bbox = new THREE.Box3(geomUpper.position, geomUpper.position);
// expand the box to include geomUpper's children
// expandByObject mutates bbox
bbox.expandByObject(geomUpper);
// get the size of bbox
let size = new THREE.Vector3();
bbox.getSize(size);

Answer 2

另一种可能更简单的方法是计算对象的边界框并获取大小。

// Compute the bounding box
const bbox = new THREE.Box3().setFromObject(objectRef.current)
// Init your size variable
const bboxSize = new THREE.Vector3(bbox)
// Get the size
bbox.getSize(bboxSize)
// Now use bboxSize (x,y,z)