Как использовать контрольные точки в A-Frame? - PullRequest
Новая
       13

Как использовать контрольные точки в A-Frame?

1 голос
/ 25 марта 2020

Я новичок в A-Frame и все еще пытаюсь все выяснить! В настоящее время я создаю трехмерное пространство и хотел бы создать удобство для посетителей, предоставив им точки на полу, чтобы они могли щелкать и перемещаться в эту позицию. Я нашел этот код онлайн, который идеально подходит, но я не могу заставить его работать. Вот ссылка на мой проект на Glitch: https://glitch.com/~museum-exhibit-demo

Это код для моей камеры: 

<a-entity position="1.8 -1.1 3" rotation="0 90 0" id="pov">
        <a-camera universal-controls="movementControls: checkpoint" checkpoint-controls="mode: animate">
      <a-entity cursor position="0 0 -1" geometry="primitive: ring; radiusInner: 0.01; radiusOuter: 0.015;" material="color: #CCC; shader: flat;"> </a-entity>
          </a-camera>
    </a-entity>

А это код для цилиндра : 

<a-cylinder checkpoint radius="0.1.5" height="0.01" position="-0.164 0.111 2.363"  color="#39BB82"></a-cylinder>

Может кто-нибудь определить, где я иду не так?

1 Ответ

0 голосов
/ 29 марта 2020

Это не ответит на вопрос, но должно решить вашу проблему.

Вы можете заменить контрольные точки простой системой анимации:

  1. вы нажимаете на цилиндр
  2. вы анимируете камеру из текущей позиции в цилиндр

Что может быть реализовано так: 

// use a system to keep a global track if we are already moving
AFRAME.registerSystem('goto', {
  init: function() {
    this.isMoving = false
  }
})

// this component will have the actual logic
AFRAME.registerComponent('goto', {
  init: function() {
     let camRig = document.querySelector('#rig')

     // upon click - move the camera
     this.el.addEventListener('click', e => {
        // check if we are already moving
        if (this.system.isMoving) return;

        // lock other attempts to move
        this.system.isMoving = true

        // grab the positions
        let targetPos = this.el.getAttribute("position")
        let rigPos = camRig.getAttribute("position")

        // set the animation attributes. 
        camRig.setAttribute("animation", {
          "from": rigPos,
          "to": AFRAME.utils.coordinates.stringify({x: targetPos.x, y: rigPos.y, z: targetPos.z}),
          "dur": targetPos.distanceTo(rigPos) * 750
        })
        camRig.emit('go')
     })

     // when the animation is finished - update the "shared" variable
     camRig.addEventListener('animationcomplete', e=> {
       this.system.isMoving = false
     })
  }
})

с помощью Настройка выглядит следующим образом: 

<!-- Camera with locked movement --/>
<a-entity id="rig" animation="property: position; startEvents: go">
  <a-camera look-controls wasd-controls-enabled="false"></a-camera>
<a-entity>

<!-- Cylinder node --/>
<a-cylinder goto></a-cylinder>

Вы можете видеть, как это работает в этот глюк .

...