Three.js:缩放对象的边界球

Question

我有一组3D形状(金字塔，立方体，八面体，棱镜等)，我需要围绕它们每个建立描述的球体。使用几何很容易做到这一点。boundingSphere，因为它具有所描述的球体的半径。但是如果我缩放一个物体边界球不会被更新。是否有可能更新边界球相对于比例?使用Three.js 0.129.

const { position } = entity.object3D;
const mesh = entity.getObject3D('mesh') as THREE.Mesh;
mesh.geometry.computeBoundingSphere();
const { radius } = mesh.geometry.boundingSphere;
createSphere(radius, position);

Answer 1

geometry.boundingSphere属性表示几何图形。从技术上讲，你可以有两个不同比例的网格共享相同的几何形状，所以你会想要保持几何形状的原始边界球，然后为每个网格单独计算一个新的边界球。

缩放边界球的一个问题是，您可以分别缩放x,y和z中的网格，甚至在给定负缩放值的情况下反转顶点位置值。不相等的尺度值会导致它更像一个球体，而不是一个球体，这对你的数学没有帮助。

你可以做的是为你的网格重新计算一个边界球，给定它更新的世界变换矩阵。我建议使用世界矩阵，因为你的网格的其他祖先也可能以不可预测的方式影响尺度。

// Given:
// (THREE.Mesh) yourMesh
// Copy the geometry 
let geoClone = yourMesh.geometry.clone() // really bad for memory, but it's simple/easy
// Apply the world transformation to the copy (updates vertex positions)
geoClone.applyMatrix4( yourMesh.matrixWorld )
// Convert the vertices into Vector3s (also bad for memeory)
let vertices = []
let pos = geoClone.attributes.position.array
for( let i = 0, l = pos.length; i < l; i += 3 ){
vertices.push( new THREE.Vector3( pos[i], pos[i+1], pos[i+2] ) )
}
// Create and set your mesh's bounding sphere
yourMesh.userData.boundingSphereWorld = new THREE.Sphere()
yourMesh.userData.boundingSphereWorld.setFromPoints( vertices )

这将为你的网格创建一个与世界对齐的边界球。如果您想要一个基于局部转换的矩阵，您可以使用本地yourMesh.matrix矩阵来遵循相同的思路。只要知道你的球体的中心将基于你的网格的局部变换/旋转，而不仅仅是它的尺度。