Aframe:模型大小 [英] Aframe: size of model
问题描述
使用模型作为实体的来源时,例如gltf,有没有办法知道原始大小?由于scale
属性适用于相对大小,因此尝试将模型拟合为所需大小是一个错误.我尝试使用模型网格的geometry.getComputingBox()
,但它返回null.想知道是否有可用的组件让我们以绝对值指定比例.
When using a model as a source to an entity, say gltf, is there a way we know the original size? Since the scale
attribute works on relative size, it seems to be a trial an error to fit the model to our desired size. I tried using the geometry.getComputingBox()
of the mesh of the model but it returns null. Wondering if there is a component that is available that lets us specify the scale in absolute terms.
推荐答案
(这将作为评论,但由于我没有足够的代表点,这是一个答案.)
(This would have come as a comment but as I don't have enough rep points this is coming as an answer.)
我发现模型在model-loaded
事件侦听器之后没有大小,因此我从update
方法触发了重新缩放.有趣的是,如果没有model-loaded
事件侦听器,则即使在第一个update
被触发后,模型的大小也将为0.
这是上面代码的变体,不同之处在于尺寸以米为单位:
I found that the model doesn't have a size directly after the model-loaded
event listener so I trigger the rescale from the update
method. Funnily enough though if you don't have the model-loaded
event listener then the size of the model will be 0 even after the first update
is fired.
This is my variant of the above code with the difference being that the dimension is set in meters:
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);
}
});
然后:
<a-entity natural-size='width:0.72' gltf-model='#model`></a-entity>
这篇关于Aframe:模型大小的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!