Three.js A帧：模型的大小

当使用模型作为实体的源时，比如说gltf，我们有没有办法知道原始大小？由于

scale

属性对相对大小起作用，因此将模型拟合到所需大小似乎是一个尝试性错误。我尝试使用模型网格的

geometry.getComputingBox（）

，但它返回null。想知道是否有一个组件可以让我们用绝对值来指定比例

啊，算了吧

var model = this.el.object3D;
var box = new THREE.Box3().setFromObject( model );
var size = box.getSize();

给你尺寸。然后使用上述参数可以设置任何所需的大小

创建了一个可以方便使用的简单组件

AFRAME.registerComponent('resize', {
  schema: {
    axis: {
      type: 'string',
      default: 'x'
    },
    value: {
      type: 'number',
      default: 1
    }
  },
  init: function() {
    var el = this.el;
    var data = this.data;
    var model = el.object3D;
    el.addEventListener('model-loaded', function(e) {
      var box = new THREE.Box3().setFromObject( model );
      var size = box.getSize();
      var x = size.x;
      var y = size.y;
      var z = size.z;
      if(data.axis === 'x') {
        var scale = data.value / x;
      }
      else if(data.axis === 'y') {
        var scale = data.value / y;
      }
      else {
        var scale = data.value / z;
      }
      el.setAttribute('scale', scale + ' ' + scale + ' ' + scale);
    });
  }
});

它可以用于按比例调整模型大小，x轴长度为0.5

<a-entity resize='axis:x; value:0.5' gltf-model='#model`></a-entity>

（这本来是一个评论，但由于我没有足够的代表点，所以这是一个答案。）

我发现在加载
模型
事件侦听器之后，模型没有直接的大小，因此我从
更新
方法触发重新缩放。有趣的是，如果没有加载
模型
事件侦听器，那么即使在触发第一次
更新
之后，模型的大小也将为0。
这是上述代码的变体，不同之处在于尺寸以米为单位设置：

const AFRAME = window.AFRAME;

/*
* Scales the object proportionally to a set value given in meters.
*/

AFRAME.registerComponent('natural-size', {
  schema: {
    width: {
      type: "number",
      default: undefined // meters
    },
    height: {
      type: "number",
      default: undefined // meters
    },
    depth: {
      type: "number",
      default: undefined // meters
    }
  },

  init() {
    this.el.addEventListener('model-loaded', this.rescale.bind(this));
  },

  update() {
    this.rescale();
  },

  rescale() {

    const el = this.el;
    const data = this.data;
    const model = el.object3D;

    const box = new THREE.Box3().setFromObject(model);
    const size = box.getSize();

    if ( !size.x && !size.y && !size.z ) {
      return;
    }

    let scale = 1;

    if ( data.width ) {
      scale = data.width / size.x;
    } else if( data.height ) {
      scale = data.height ( size.y);
    } else if( data.depth ) {
      scale = data.depth / size.y;
    }

    el.setAttribute('scale', `${scale} ${scale} ${scale}`);

  },

  remove() {
    this.el.removeEventListener('model-loaded', this.rescale);
  }

});

然后：

box.getSize
已更改，我将在此处找到的内容与在另一个答案中找到的内容相结合，并在控制台中注意到，生成了一个更简单的答案，仅用于确定模型本身的大小：

getDimensions（object3d）{
//例如，object3d=document.querySelector（“#goban”）.object3d
var-box=new THREE.Box3（）.setFromObject（object3d）；
变量x=box.max.x-box.min.x
变量y=box.max.y-box.min.y
var z=box.max.z-box.min.z
返回{x，y，z}
}

<a-entity natural-size='width:0.72' gltf-model='#model`></a-entity>