three.js加载的stl模型的坐标位置(postion)与boundingbox计算的位置不一致怎么办?

问题原因

在处理Three.js中加载的STL模型时，如果发现模型的坐标位置（通过模型的 position 属性获取）与通过其 BoundingBox 计算出的位置不一致，这通常是因为模型的原点（原始中心点）和它的几何中心不同步造成的。

问题解决

为了解决这个问题，您可以通过以下步骤来调整模型的位置，使其与 BoundingBox 计算的位置一致：

1.加载模型：首先加载STL模型。
2.计算BoundingBox：使用 Box3 对象来计算模型的 BoundingBox。
3.调整模型原点：基于 BoundingBox 的中心点调整模型的原点。这通常涉及将模型的几何体（Geometry）平移到新的中心点。
4.设置模型位置：根据需要设置模型的 position 属性。

下面是一个简化的示例代码，展示了如何根据 BoundingBox 调整模型的原点：

import * as THREE from 'three';
import { STLLoader } from 'three/examples/jsm/loaders/STLLoader.js';

const loader = new STLLoader();
loader.load('path/to/your/model.stl', function (geometry) {
    // 创建材质
    const material = new THREE.MeshPhongMaterial({ color: 0x00ff00 });


    // 创建网格（Mesh）
    const mesh = new THREE.Mesh(geometry, material);

    // 计算BoundingBox
    const boundingBox = new THREE.Box3().setFromObject(mesh);

    // 获取BoundingBox的中心
    const center = new THREE.Vector3();
    boundingBox.getCenter(center);

    // 调整几何体的原点
    geometry.translate(-center.x, -center.y, -center.z);

    // 将网格添加到场景中...
});

这段代码首先加载STL模型，计算其 BoundingBox，然后根据 BoundingBox 的中心点调整模型的几何原点。这样，模型的 position 属性设置的位置就会与 BoundingBox 计算出的位置一致。

运用在项目中

const modelCenter = new THREE.Vector3();//计算局部坐标中心点
mesh.geometry.computeBoundingBox();//该行与下面这行是计算模型的中心点
mesh.geometry.boundingBox.getCenter(modelCenter);
mesh.geometry.translate(-modelCenter.x, -modelCenter.y, -modelCenter.z);
//此时,模型的position和bounding坐标都是(0,0,0),就一致了

mesh.position.copy(modelCenter);//然后你在将模型的position移动到modelCenter的位置,即可!

• 解析:
  • 1. 计算stl模型的BoundingBox的中心坐标

const modelCenter = new THREE.Vector3();//计算局部坐标中心点
mesh.geometry.computeBoundingBox();//该行与下面这行是计算模型的中心点
mesh.geometry.boundingBox.getCenter(modelCenter);

• 2. BoundingBox中心坐标减去stl模型的BoundingBox的中心坐标

mesh.geometry.translate(-modelCenter.x, -modelCenter.y, -modelCenter.z);

此时,模型的位置便位于(0,0,0)

• 3. postion加上stl模型的BoundingBox的中心坐标

mesh.position.copy(modelCenter);//然后你在将模型的position移动到modelCenter的位置,即可!