加载3D模型并正确定位

Question

我正在使用GLTFLoaded加载各种3d模型，该模型工作正常。然后将所有加载的模型放置在场景内的平面上。问题在于所有模型都具有不同的比例+起始位置。

这是我用来加载模型的代码：

loadModel(modelName) {

    //https://threejs.org/docs/#examples/loaders/GLTFLoader
    return new Promise((resolve, reject) => {
      this.loader.load('data/models/' + modelName + '/scene.gltf', (gltf) => {

        let root = gltf.scene;
        let model = root.children[0]; // might not always be the case

        resolve(model);
      }, undefined, //progress cb
        (error) => {
          reject(error);
        });
    });
  }

这是我用来缩放模型的代码：

    let container = new THREE.Object3D();
    let subcontainer = new THREE.Object3D();
    let modelContainer = new THREE.Object3D();

    modelContainer.add(model);
    modelContainer.rotation.x = THREE.Math.degToRad(90);

    subcontainer.add(modelContainer);
    container.add(subcontainer);

    let bbox = new THREE.Box3().setFromObject(subcontainer);

    let max = Math.max(
      bbox.max.x - bbox.min.x, //gets width
      bbox.max.y - bbox.min.y, //gets height
      bbox.max.z - bbox.min.z // gets depth
    );

    let scale = scaleLinear()
      .domain([0, max])
      .range([0, 1])
      .clamp(true)

    let scaler = scale(1);

    subcontainer.scale.set(scaler, scaler, scaler);

首先，我将模型添加到3D Object (modelContainer)中，然后将其旋转90度。接下来，将modelContainer对象添加到另一个3D对象中，该对象用于获取boundingBox。我得到了这个边界框的最大值，并相应地缩放它。

可以缩放，下面的图像显示了一些示例：

现在，我希望模型的底部看起来像放在grid/plane上。关于如何实现这一目标的任何建议？