1

在我的场景中，我使用脚本来创建一个带有 raycaster 组件的实体。这很好用，并且事件侦听器与我的地面对象碰撞时工作正常。但是我的地面不平坦，我需要知道光线投射器击中的地面高度。据我所知，仅靠 A-Frame 提供的功能是不可能的。我想调用 THREE 的 raycaster.intersectObject，但我无法获得对 THREE raycaster 的工作参考。A-Frame 文档提到了一个名为 raycaster 的成员，但它对我来说是未定义的。我尝试了一些不同的东西，但无济于事。我的下一个计划是制作一个新组件，但我想我会先在这里问。

var ray = document.createElement('a-entity');
ray.setAttribute('id', 'raycaster');
ray.setAttribute('raycaster', 'objects: #ground');
ray.setAttribute('position', pos);
ray.setAttribute('rotation', '-90 0 0');
scene.appendChild(ray);

var ground = document.querySelector('#ground');

ray.addEventListener('raycaster-intersection', function() {
    console.log(ray.raycaster);         //undefined
    console.log(ray.intersectedEls);    //undefined
    console.log(ray.objects);           //undefined
    console.log(ray.object3D.id);       //gives me the THREE id
    console.log(ray.object3D.intersectObject(ground.object3D, false));  //intersectObject not a function
});

有什么线索吗？我确定我在做一些愚蠢的事情。

4

2 回答 2

2

它是组件的成员，您必须对其进行挖掘。

ray.components.raycaster.raycaster

  • ray- 实体
  • .components- 实体的组成部分
  • .raycaster- 光线投射器组件
  • .raycaster- raycaster 对象作为 raycaster 组件的成员
于 2016-10-13T04:42:21.357 回答
0

如果有人感兴趣，这是一个完整的组件。只需将“设置到地面”添加到您的实体。如果您希望对象站在地面上，您可以将它们作为子实体添加到实体中，并将​​它们的相对 y 位置设置为对象高度的一半。

仍应使用“目标”选择器进行增强，尽管目前地面需要使用 id 'ground'

        AFRAME.registerComponent('set-to-ground', {
            schema: {
                type: 'string'
            },
            init: function () {
                var data = this.data;
                var el = this.el;
                var scene = document.getElementById('ascene');
                var ray = document.createElement('a-entity');
                ray.setAttribute('id', 'raycaster');
                ray.setAttribute('raycaster', 'objects: #ground');
                ray.setAttribute('rotation', '-90 0 0');
                el.appendChild(ray);

                var ground = document.querySelector('#ground');

                ray.addEventListener('raycaster-intersection', function getY() {
                    console.log(ray.components.raycaster.raycaster.intersectObject(ground.object3D, true)[0].point.y); //groundPos to log
                    var groundPos = ray.components.raycaster.raycaster.intersectObject(ground.object3D, true)[0].point.y;
                    ray.removeEventListener('raycaster-intersection', getY);
                    el.setAttribute('position', {y: groundPos});
                });

            }
        });
于 2017-04-24T08:51:09.940 回答