A字型传送机械师？ (Desktop/Cardboard)

Question

我正在为 aframe 开发一个项目，在某个时候，用户 "enters" 一个房间（实际上只是被传送到环境中的不同点）点击一个按钮。
我尝试过使用 Don McCurdy 的检查点系统以及简单的 javascript，但我对 js 了解不多，如果您能提供任何帮助，我将不胜感激。

我尝试过的示例：

AFRAME.registerComponent('teleporter', {

init: function () {
  var button = document.querySelector('#button');
  var cam = document.querySelector('#camera');

  button.addEventListener('click', function () {
    cam.setAttribute('position', '10, 1.6, 10');
  });
 }
});

Answer 1

这个怎么样：

你传送到按钮：创建一个组件，它将附加到按钮，并将相机传送到按钮：

init: function () {
  var cam = document.querySelector('a-camera');
  var position = this.el.getAttribute("position");
  this.el.addEventListener('click', function () {
    cam.setAttribute('position', position);
  });
}

fiddle here.

您可以通过定义架构来指定传送位置：向组件添加模式：

AFRAME.registerComponent('teleporter', {
 schema: {
   position: {default: "0 0 0"},
 },
 init: function () {
   var cam = document.querySelector('a-camera');
   var position = this.data.position;
   this.el.addEventListener('click', function () {
     cam.setAttribute('position', position);
   });
 }
});

并像这样使用它：

<a-sphere position="5 1.25 -6" radius="1.25" color="#EFFD5E"
   teleporter="position:5 1.6 -6"></a-sphere>

定义您希望玩家在点击后传送到的位置。

fiddle here.

Answer 2

另一种方法与您最初的想法非常相似（位置应该没有逗号）：

  <a-box
    position="0 2 2"
    color="red"
    class="clickable" onClick="document.querySelector('#cam').setAttribute('position','0 2 2')";
    >
  </a-box>

  <a-box
    position="10 2 2"
    color="blue"
    class="clickable" onClick="document.querySelector('#cam').setAttribute('position','10 2 2')";
    >
  </a-box>

这里的工作示例： http://curious-electric.com/aframe/teleport/

A字型传送机械师？ (Desktop/Cardboard)

A-frame Teleportation Mechanic? (Desktop/Cardboard)

javascript

webvr

aframe