时间戳

首页 > 解决方案 > ThreeJS 将 GLTF 模型与边界框的大小匹配

javascript - ThreeJS 将 GLTF 模型与边界框的大小匹配

问题描述

我想将导入的 GLB 模型缩放到与场景中相同大小的立方体。需要确保模型保持在阴影投射区域内并且足够大以使阴影可见。

我已经计算了两个对象的边界框：

// shadowcasting area 
var sceneExtent = new THREE.BoxGeometry( 4, 4, 4 );
var cube = new THREE.Mesh( sceneExtent, material );
var sceneBounds = sceneExtent.computeBoundingBox()

和

// imported mesh
model.traverse( function ( child ) {
    if ( child.isMesh ) {
        child.geometry.computeBoundingBox()
        meshBounds = child.geometry.boundingBox
    }
} );

但现在我不知道如何处理它们来修改scaleGLTF 模型

// meshBounds = child.geometry.boundingBox
// sceneBounds = sceneExtent.computeBoundingBox()

// how to resize model scale to match size of sceneBounds

model.scale.set(1,1,1)

我已经进行了相当多的研究，但我似乎不了解我迄今为止找到的解决方案。

如何修改模型比例以匹配sceneBounds我所拥有的信息？

更新：要获得边界框，请.setFromObject()改用：

sceneBounds = new THREE.Box3().setFromObject( cube );
meshBounds = new THREE.Box3().setFromObject( model );

标签： javascriptthree.jsscale

解决方案

例如像这样：

// Calculate side lengths of scene (cube) bounding box
let lengthSceneBounds = {
  x: Math.abs(sceneBounds.max.x - sceneBounds.min.x),
  y: Math.abs(sceneBounds.max.y - sceneBounds.min.y),
  z: Math.abs(sceneBounds.max.z - sceneBounds.min.z),
};

// Calculate side lengths of glb-model bounding box
let lengthMeshBounds = {
  x: Math.abs(meshBounds.max.x - meshBounds.min.x),
  y: Math.abs(meshBounds.max.y - meshBounds.min.y),
  z: Math.abs(meshBounds.max.z - meshBounds.min.z),
};

// Calculate length ratios
let lengthRatios = [
  (lengthSceneBounds.x / lengthMeshBounds.x),
  (lengthSceneBounds.y / lengthMeshBounds.y),
  (lengthSceneBounds.z / lengthMeshBounds.z),
];

// Select smallest ratio in order to contain the model within the scene
let minRatio = Math.min(...lengthRatios);

// If you need some padding on the sides
let padding = 0;
minRatio -= padding;

// Use smallest ratio to scale the model
model.scale.set(minRatio, minRatio, minRatio);

推荐阅读