Question

在我的场景中，我正在使用脚本来创建一个带有raycaster组件的实体。这很有效，并且事件监听器与我的地面对象正常碰撞。但是我的地面不平衡，我需要知道raycaster击中地面的高度。据我所知，只有A-Frame提供的功能才有可能实现这一点。我想打电话给THREE的raycaster.intersectObject，但是我无法获得三个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

它是该组件的成员，您必须挖掘它。

node index.js

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

Answer 2

如果有人感兴趣，这是一个完整的组件。只需在您的实体中添加“set-to-ground”即可。如果您希望对象站在地面上，您可以将它们作为子项添加到实体中，并将它们的相对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});
                });

            }
        });

访问Raycaster成员

2 个答案: