在加载GLTF模型后,如何重置默认比例

时间:2018-03-20 08:29:10

标签: three.js aframe

我正在尝试制作一个以GLTF格式添加google poly模型的应用程序。

我在场景中添加了一些非常大的模型的问题,我通过使用边界框最大值和最小值计算它们的大小并设置比例量来解决这个问题。

现在,当我打开检查器并拖动以缩放对象时将对象添加到场景中,即使拖动很少,对象也会变得非常大。

如果有任何方法可以重置已加载对象的缩放值,以便默认值可以是我计算的值,这也可以解决拖拽比例问题。

注意:对于x,y,z,某些元素的计算比例因子为0.00001。

任何意见都将受到赞赏。

-Thanks

1 个答案:

答案 0 :(得分:2)

使用A-Frame组件中的three.js API计算模型的边界框,然后将其缩小到您喜欢的大小。例如:

private static final Map<Integer, Class<? extends Comparable>> types = new HashMap<>();
static {
    types.put(1, Long.class);
    types.put(2, Date.class);
}

public List<Long> getSortedIds(int itemType) {
    Class<? extends Comparable> clz = types.get(itemType);
    if (clz != null) {
        List<Item> items = (List<Item>)getItems(itemType, clz);
        Collections.sort(items);
        return items.stream().map(it -> it.id).collect(Collectors.toList());
    }
    //...
    return null;
}

HTML:

AFRAME.registerComponent('autoscale', {
  schema: {type: 'number', default: 1},
  init: function () {
    this.scale();
    this.el.addEventListener('object3dset', () => this.scale());
  },
  scale: function () {
    const el = this.el;
    const span = this.data;
    const mesh = el.getObject3D('mesh');

    if (!mesh) return;

    // Compute bounds.
    const bbox = new THREE.Box3().setFromObject(mesh);

    // Normalize scale.
    const scale = span / bbox.getSize().length();
    mesh.scale.set(scale, scale, scale);

    // Recenter.
    const offset = bbox.getCenter().multiplyScalar(scale);
    mesh.position.sub(offset);
  }
});

上面的代码将使您的模型适合~2米的盒子,并重新居中。有关详细信息,请参阅THREE.Object3D documentation

three.js r89,A-Frame 0.8.0。