访问 Raycaster 成员

Question

在我的场景中，我使用脚本创建一个带有 raycaster 组件的实体。这很好用，事件监听器与我的地面物体发生碰撞时工作正常。但是我的地面不平坦，我需要知道 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
});

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

Answer 1

它是组件的一个成员，你必须挖掘它。

ray.components.raycaster.raycaster

ray - 实体
.components - 实体的组件
.raycaster - raycaster 组件
.raycaster - 作为 raycaster 组件成员的 raycaster 对象

Answer 2

如果有人感兴趣，这里有一个完整的组件。只需将 "set-to-ground" 添加到您的实体即可。如果你想让 objects 站在地上，你可以将它们作为 children 添加到实体中，并将它们的相对 y 位置设置为 object 高度的一半。

仍应使用 "target" 选择器进行增强，但目前地面需要使用 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});
                });

            }
        });

访问 Raycaster 成员

Accessing Raycaster Members

webvr

aframe