Как получить элемент A-Frame через JavaScript? - PullRequest
Новая
       6

Как получить элемент A-Frame через JavaScript?

0 голосов
/ 19 сентября 2018

Я новичок в использовании A-frame и пытаюсь разобраться.Прямо сейчас я погружаюсь в бит взаимодействия.Следующий javascript, который я нашел, взят с веб-сайта, который я нашел (сейчас не могу найти ссылку), который меняет цвет поля при нажатии.Поле отображается в стиле маркера (AR). 

// Component to change to a sequential color on click.
AFRAME.registerComponent('cursor-listener', {
    init: function() {
        var lastIndex = -1;
        var COLORS = ['red', 'green', 'blue'];
        this.el.addEventListener('click', function(evt) {
            lastIndex = (lastIndex + 1) % COLORS.length;
            this.setAttribute('material', 'color', COLORS[lastIndex]);
        });
    }
});

HTML: 

<a-scene oriscene cursor="rayOrigin: mouse">
    <a-marker preset='custom' type='pattern' url='tiger.patt'>
        <a-box cursor-listener position="0 0 0" color="skyblue"></a-box>
        <a-text id="text-box" value="Clicked!"></a-text>
    </a-marker>
    <!-- add a basic camera  -->
    <!-- So object will land on marker -->
    <a-entity camera></a-entity>
</a-scene>

Поэтому я пытаюсь выяснить, как получить элементдля использования в скрипте и установить его атрибут.в моем html-файле <a-text>, который я хочу скрыть по умолчанию, появляется при нажатии на поле, так как у меня уже есть код щелчка.Но мне трудно это скрыть.Я попытался: 

var text = document.querySelector('#text-box');
text.setAttribute('visible', false);

, но он все еще виден, когда я запускаю его на локальном хосте.я сделал console.log(text) и консоль вернула ноль.Значит, a-text не выбран?

Я думал об установке элемента по умолчанию как visible="false", затем изменил его на true в функции щелчка, но также думал о том, как получить элемент в первую очередь?

РЕДАКТИРОВАТЬ: в соответствии с просьбой

глюк, чтобы попробовать то, о чем я говорю .Я настроил его на использование маркера hiro.

Извините за длинный пост.Заранее спасибо!

РЕДАКТИРОВАТЬ 2: найдено решение

Мне пришлось добавить атрибут примитива в <a-text>.как:

<a-text id="text-box" value="Clicked!" geometry='primitive: plane'></a-text>, а затем, конечно, получить его с помощью .querySelector

1 Ответ

0 голосов
/ 21 сентября 2018

<a-text id="text-box" value="Clicked!" visible="false"></a-text>

Затем document.getElementById('text-box').object3D.visible = true, чтобы показать.

Запустите ваш код внутри компонента, а не тега скрипта.У вас, вероятно, были проблемы со временем.

https://aframe.io/docs/0.8.0/introduction/writing-a-component.html

...