Question

我正在处理一个用于框架的项目，在某个时刻用户进入＆＃34;一个房间（真的只是传送到环境中的不同点）点击一个按钮我尝试过使用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);
  });
}

小提琴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>

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

小提琴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架传送机械师？（桌面/纸板）

2 个答案:

A架传送机械师？ （桌面/纸板）

2 个答案:

A架传送机械师？（桌面/纸板）