Блог

Я учитель, чей класс использует Фрейм для создания веб-сайтов виртуальной реальности. У одного из моих студентов возникла проблема, из-за которой он не может заставить свою навигацию работать, чтобы перевести пользователя на другую страницу.

Код, который он использует в JS, является:

 AFRAME.registerComponent('schoolMap', {
    init: function () {
        let redirect = () => {
            window.location.href = "schoolMap.html";
        }; //link

        this.el.addEventListener('click', redirect);
    } //init
}), //end
 

Этот код был приведен в качестве примера и в точности совпадает с рабочим кодом, который мне удалось создать. Сценарий импортирован, и компонент был добавлен в сущность.

 <a-entity id="main map" position="-0.11914 2.775 -1" rotation="0 45 0" schoolMap>
 

Когда я смотрю на его веб-сайт в режиме инспектора, он показывает, что у объекта нет никаких подключенных компонентов, несмотря на то, что компонент зарегистрирован на объекте, как показано выше.

объект «основная карта» без прикрепленных компонентов

Если выбрана кнопка добавить компонент, зарегистрированный компонент может быть найден и добавлен, что затем заставляет его работать. Ничто из того, что я пробовал, похоже, не помогло решить проблему, поэтому любая помощь будет весьма признательна.

Также обратите внимание, что мы используем Replit в качестве онлайн-среды разработки, поскольку она облегчает проекты классов, но пока не знаем, может ли это быть причиной проблемы.

Я предполагаю, что это будет заглавная буква «М» в schoolMap . Вы должны увидеть журнал:

 core:component:warn The component name `schoolMap` contains uppercase characters, 
but HTML will ignore the capitalization of attribute names. 
Change the name to be lowercase: `schoolmap` 
 

Если вы измените его, и сценарий находится перед сценой ( defer в сценарии нет атрибутов), он должен работать:

 <script src="https://aframe.io/releases/1.2.0/aframe.min.js"></script>
<script>
  AFRAME.registerComponent("school-map", {
    init: function() {
      console.log("yo")
    }
  })
</script>
<a-scene>
  <a-box position="-1 0.5 -3" rotation="0 45 0" color="#4CC3D9" school-map></a-box>
</a-scene>