threejs加载模型,实现模型自适应大小

三维模型的自适应大小可以通过以下几个步骤来实现：

1.加载模型并将其添加到场景中。

2.创建一个 THREE.Box3() 对象，使用 setFromObject() 方法将其设置为模型的边界盒。

3.获取边界盒的尺寸。

4.计算出最大的尺寸值，即在三个轴向上的最大值。

5.计算出每一个轴需要缩放的比例。

6.将每一个轴的缩放比例应用到模型的 scale 属性。

// 创建GLB模型
    loadGlb () {
      const objDataUrl = 'model.glb'
      const loader = new GLTFLoader()
      loader.load(objDataUrl, (gltf) => {
        const scene = gltf.scene
        const box = new Three.Box3().setFromObject(scene)
        const x = (box.max.x - box.min.x)
        const y = (box.max.y - box.min.y)
        const z = (box.max.z - box.min.z)
        const maxDim = Math.max(x, y, z)
        const scale = 250 / maxDim
        scene.scale.set(scale, scale, scale)
        // scene.scale.set(25, 25, 25)
        this.scene.add(scene)
        this.calcMeshCenter(scene)
      }, (xhr) => {
        const process = Math.floor((xhr.loaded / xhr.total) * 100)
        if (process === 100) {
          this.showProcess = false
        }
      }, (error) => {
        console.error('error', error)
      })
    },

我们使用 THREE.GLTFLoader() 加载模型，并获取模型的 scene 对象。然后，我们使用 THREE.Box3() 创建一个盒子对象 box，并获取模型的边界盒。接下来，计算得到获取边界盒的尺寸，然后使用 Math.max() 获取最大的尺寸值，也就是模型在三个轴向上的最大值。然后，我们通过除以这个值来计算出每个轴需要缩放的比例。最后，我们将每个轴上的缩放比例应用到模型的 scale 属性中。

请注意，计算出的比例可能需要根据实际需要进行微调。另外，如果在场景中同时展示了多个模型，需要对每个模型都进行以上的操作。