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 属性中。

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

 

  • 3
    点赞
  • 9
    收藏
    觉得还不错? 一键收藏
  • 10
    评论
评论 10
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值