如何在Three.js与Threebox中获取模型尺寸适配旋转环大小

核心问题是单位转换：Threebox使用Mapbox的空间单位，而模型本身的尺寸以米为单位，通过Threebox提供的unitsPerMeter属性可以完成两者的转换，从而精准计算出适配模型的ringSize。

步骤说明 #

1. 提取模型平面边界尺寸
   直接使用Threebox返回的boundingBox.box属性（已按米为单位计算），获取模型在X、Y平面的半宽：

   • X方向半宽：(boundingBox.box.max.x - boundingBox.box.min.x) / 2
   • Y方向半宽：(boundingBox.box.max.y - boundingBox.box.min.y) / 2

2. 计算覆盖模型的参考半径
   为了让旋转环能覆盖模型整个平面范围，优先计算平面对角线的半长（避免环过小无法覆盖模型角落）：

   const halfWidthX = (model.boundingBox.box.max.x - model.boundingBox.box.min.x) / 2;
   const halfWidthY = (model.boundingBox.box.max.y - model.boundingBox.box.min.y) / 2;
   const diagonalHalfLength = Math.sqrt(Math.pow(halfWidthX, 2) + Math.pow(halfWidthY, 2));
   

3. 转换为Threebox空间单位并添加余量
   用unitsPerMeter将米转换为Threebox单位，再乘以1.3~1.5的余量系数（让环略大于模型，提升交互体验）：

   const unitsPerMeter = model.unitsPerMeter;
   const ringSize = diagonalHalfLength * unitsPerMeter * 1.3;
   

完整代码示例 #

// 从Threebox模型实例中获取属性
const model = yourThreeboxModel; // 替换为你的模型对象
const modelBounds = model.boundingBox.box;
const unitsPerMeter = model.unitsPerMeter;

// 计算适配的环半径
const halfWidthX = (modelBounds.max.x - modelBounds.min.x) / 2;
const halfWidthY = (modelBounds.max.y - modelBounds.min.y) / 2;
const diagonalHalfLength = Math.sqrt(Math.pow(halfWidthX, 2) + Math.pow(halfWidthY, 2));
const ringSize = diagonalHalfLength * unitsPerMeter * 1.3;

// 创建旋转环
let geom = new THREE.TorusGeometry(ringSize, 0.01, 30, 25);
let material = new THREE.MeshStandardMaterial({ color: 0xffc000, side: THREE.DoubleSide });
let mesh = new THREE.Mesh(geom, material);

为什么直接用Three.js Box3获取的尺寸无效？ #

你通过new THREE.Box3().setFromObject(object)得到的是模型原始文件的尺寸（未经过Threebox的单位转换），Threebox在加载模型时会自动根据unitsPerMeter对模型进行缩放，所以直接使用该值无法匹配Threebox的空间坐标系。

内容的提问来源于stack exchange，提问作者Axekan