Блог

В моей сцене я использую скрипт для создания объекта с компонентом raycaster. Это отлично работает, и прослушиватели событий работают нормально, сталкиваясь с моим основным объектом. Но моя земля неровная, и мне нужно знать высоту земли, на которую попадает raycaster. Насколько я знаю, это невозможно только с тем, что предоставляет A-Frame. Я хотел бы вызвать raycaster.intersectObject для THREE, но я не могу получить рабочую ссылку на 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
});
  

Какие-нибудь подсказки? Я уверен, что делаю что-то глупое.

Это элемент компонента, который вам придется искать.

ray.components.raycaster.raycaster

• ray — сущность
• .components — компоненты объекта
• .raycaster — компонент raycaster
• .raycaster — объект raycaster как элемент компонента raycaster

Вот полный компонент на случай, если кому-то интересно. Просто добавьте «set-to-ground» к вашей сущности. Если вы хотите, чтобы объекты стояли на земле, вы можете добавить их в качестве дочерних элементов объекта и установить их относительное положение y равным половине высоты объекта.

Все равно должно быть улучшено с помощью селектора «target», хотя в настоящее время земля должна быть с идентификатором «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});
                });

            }
        });