javascript - A型框架传送机制？ (桌面/纸板)

Question

我正在开发一个 aframe 项目，在该项目中，用户在某个时刻通过单击按钮“进入”一个房间(实际上只是传送到环境中的不同点)。
我尝试过使用 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

这个怎么样:

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 .