时间戳

首页 > 解决方案 > A-Frame getObject3D('mesh') 多次尝试返回未定义

javascript - A-Frame getObject3D('mesh') 多次尝试返回未定义

问题描述

我正在尝试为 A 框架中的 obj 模型获取边界框。我在此将参考我在 stackoverflow 上找到的这两个有用的链接： 如何从 aframe 中的 3D 对象获取边界框信息？ 有什么方法可以从 three.js Object3D 中获取边界框？ 但是在我尝试了下面的代码之后，

AFRAME.registerComponent('bounding-box', {
            init: function(){
                var el = this.el;
                var obj = el.getObject3D('mesh');
                console.log(obj);
                var bbox = new THREE.Box3().setFromObject(obj);
                console.log(bbox.min, bbox.max);    
            }
        })

我从 得到“未定义” console.log(obj);，然后我尝试了上面链接中提到的方法，

AFRAME.registerComponent('bounding-box', {
    init: function(){
        var el = this.el;
        console.log(el);
        el.setAttribute('obj-model', {obj: 'obj5/1026/1026outside.obj'});
        var obj = el.getObject3D('mesh');
        console.log(obj);
        var bbox = new THREE.Box3().setFromObject(obj);
        console.log(bbox.min, bbox.max);    
    }
})

但仍然没有运气。只有当我将代码放在结束标记上方时，有时它才能工作并记录边界框的正确信息。

<script>
    var el = document.querySelector('#b-model');
    console.log(el);
    var obj = el.getObject3D('mesh');
    console.log(obj);

    var bbox = new THREE.Box3().setFromObject(obj);
    console.log(bbox.min, bbox.max);    
</script>
</body>

我认为它与加载顺序有关，但我不理解这篇文章中的讨论： How to load 3D object at runtime in aframe？ 就像我在上面尝试的那样，这种方法不起作用。还是我用el.setAttribute错了方式？我还注意到 Felix 说使用 three.objLoader 可以解决问题，我也尝试过，但仍然没有运气。我理论上知道注册组件的原因是因为它仅在附加实体初始化后才执行。所以我在这里很困惑。谁能让我知道如何通过在最后注册一个组件而不是松散的 javascript 来做到这一点？提前致谢！

标签： javascriptthree.jsaframe

解决方案

如果您的模型加载正确，您可能正在尝试在 mesh加载模型之前获取（以及边界框）。

如果您等待model-loaded事件：

modelElement.addEventListener('model-loaded', (e) => {
  var obj = modelElement.getObject3D('mesh');
  var bbox = new THREE.Box3().setFromObject(obj);
  console.log(bbox)
})

它应该工作正常。用模型检查一下这个故障或这个小提琴gltf。

推荐阅读