Aframe 如何在A帧中使用检查点控件？_Aframe_Webvr

Aframe 如何在A帧中使用检查点控件？

aframe

Aframe 如何在A帧中使用检查点控件？,aframe,webvr,Aframe,Webvr,我是A型架的新手，仍在努力解决所有问题！我目前正在构建一个3D空间，并希望通过在地板上提供点，让游客点击并移动到该位置，为游客创造一种引导体验。我在网上找到了完美的，但我无法让它工作。以下是我关于Glitch的项目的链接：这是我相机的代码： <a-entity position="1.8 -1.1 3" rotation="0 90 0" id="pov"> <a-camera universal-controls="movementControls: ch

我是A型架的新手，仍在努力解决所有问题！我目前正在构建一个3D空间，并希望通过在地板上提供点，让游客点击并移动到该位置，为游客创造一种引导体验。我在网上找到了完美的，但我无法让它工作。以下是我关于Glitch的项目的链接：

这是我相机的代码：

<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>

有人能发现我哪里出了问题吗？

这不会回答问题，但会解决你的问题。

可以使用简单的动画系统替换检查点控件：

你点击一个圆柱体

将摄影机从当前位置设置为圆柱体的动画

可以这样实现：

// 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>

使用如下设置：

// 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>

这不会回答问题，但会解决您的问题。
可以使用简单的动画系统替换检查点控件：
你点击一个圆柱体
将摄影机从当前位置设置为圆柱体的动画
可以这样实现：
// 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>

使用如下设置：
// 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>

更新：
我刚看了一下电流源，似乎什么都没坏！事实上，新版本中存在向后不兼容的更改。而不是旧的语法：
通用控件=“移动控件：检查点；”
现在应使用以下新语法：
移动控制=“控制：检查点；”
但请记住，由于在所有3 XYZ轴上都会计算，因此相机将移动到检查点的中心。如果要保留高度（y），只需添加以下代码：
targetPosition.y=位置.y
下面是一个完整的工作示例：
<html>
  <head>
    <meta charset="utf-8">
    <title>Checkpoint Control with AFrame 1.2.0</title>
    <script src="https://aframe.io/releases/1.2.0/aframe.min.js"></script>
    <script src="https://cdn.jsdelivr.net/gh/donmccurdy/aframe-extras@v6.1.1/dist/aframe-extras.min.js"></script>
  </head>
  <body>
    <a-scene stats>

      <!-- CAMERA -->
      <a-entity position="0 0 0" id="pov">
        <a-camera camera="active: true; spectator: false;" look-controls="pointerLockEnabled:true" movement-controls="controls: checkpoint;" checkpoint-controls="mode: animate; animateSpeed: 10" wasd-controls="enabled: false;" position="0 1.6 22">
          <a-cursor></a-cursor>
        </a-camera>
      </a-entity>

      <!-- CHECKPOINTS -->
      <a-cylinder checkpoint radius="0.5" height="0.01" position="0 0 20" color="#FF0000"></a-cylinder>
      <a-cylinder checkpoint radius="0.5" height="0.01" position="0 0 16" color="#FF0000"></a-cylinder>
      <a-cylinder checkpoint radius="0.5" height="0.01" position="0 0 12" color="#FF0000"></a-cylinder>
      <a-cylinder checkpoint radius="0.5" height="0.01" position="0 0 8" color="#FF0000"></a-cylinder>

    </a-scene>
  </body>
</html>


使用AFrame 1.2.0进行检查点控制

此行下方的信息不再有效

正如Piotr已经提到的，Aframe Extra的新版本不知何故被破坏了！
使用较旧的版本，一切都将再次工作
下面是一个使用Frame extra版本3.2.7的工作示例
页面完全加载后，单击屏幕锁定光标，然后将光标（小圆环）指向红色圆圈并单击
我还提到了一些额外的选择，以防：

观众：错误（在第一人称和第三人称视图之间切换）
pointerLockEnabled:true（隐藏鼠标）
模式：设置动画（另一个选项是传送）

动画速度：10（嗯……调整动画速度）
wasd controls=“enabled:false；”（否则用户可以通过wasd/箭头键四处移动）

代码：

使用AFrame 1.2.0进行检查点控制
更新：
我刚看了一下电流源，似乎什么都没坏！事实上，新版本中存在向后不兼容的更改。而不是旧的语法：
通用控件=“移动控件：检查点；”
现在应使用以下新语法：
移动控制=“控制：检查点；”
但请记住，由于在所有3 XYZ轴上都会计算，因此相机将移动到检查点的中心。如果要保留高度（y），只需添加以下代码：
targetPosition.y=位置.y
下面是一个完整的工作示例：
<html>
  <head>
    <meta charset="utf-8">
    <title>Checkpoint Control with AFrame 1.2.0</title>
    <script src="https://aframe.io/releases/1.2.0/aframe.min.js"></script>
    <script src="https://cdn.jsdelivr.net/gh/donmccurdy/aframe-extras@v6.1.1/dist/aframe-extras.min.js"></script>
  </head>
  <body>
    <a-scene stats>

      <!-- CAMERA -->
      <a-entity position="0 0 0" id="pov">
        <a-camera camera="active: true; spectator: false;" look-controls="pointerLockEnabled:true" movement-controls="controls: checkpoint;" checkpoint-controls="mode: animate; animateSpeed: 10" wasd-controls="enabled: false;" position="0 1.6 22">
          <a-cursor></a-cursor>
        </a-camera>
      </a-entity>

      <!-- CHECKPOINTS -->
      <a-cylinder checkpoint radius="0.5" height="0.01" position="0 0 20" color="#FF0000"></a-cylinder>
      <a-cylinder checkpoint radius="0.5" height="0.01" position="0 0 16" color="#FF0000"></a-cylinder>
      <a-cylinder checkpoint radius="0.5" height="0.01" position="0 0 12" color="#FF0000"></a-cylinder>
      <a-cylinder checkpoint radius="0.5" height="0.01" position="0 0 8" color="#FF0000"></a-cylinder>

    </a-scene>
  </body>
</html>


使用AFrame 1.2.0进行检查点控制

此行下方的信息不再有效

正如Piotr已经提到的，Aframe Extra的新版本不知何故被破坏了！
使用较旧的版本，一切都将再次工作
下面是一个使用Frame extra版本3.2.7的工作示例
页面完全加载后，单击屏幕锁定光标，然后将光标（小圆环）指向红色圆圈并单击
我还提到了一些额外的选择，以防：

观众：错误（在第一人称和第三人称视图之间切换）
pointerLockEnabled:true（隐藏鼠标）
模式：设置动画（另一个选项是传送）

动画速度：10（嗯……调整动画速度）
wasd controls=“enabled:false；”（否则用户可以通过wasd/箭头键四处移动）

代码：

使用AFrame 1.2.0进行检查点控制
我认为检查点控制被破坏了-你可以从动画组件制作一个“穷人”版本：）在魔兽世界中查看，非常感谢！！是否可以关闭键盘控制以使此导航成为用户移动的唯一方式？当然，我已将其全部输入到答案中，如果可以理解，请告诉我。谢谢您的帮助！这确实奏效了！如果您愿意再次提供帮助，我还有一个问题：是否可以让将您带到圆柱体的动画也更改摄影机的视图和高度？基本上，一旦我点击圆柱体将我带到该位置，它也会将我的视图捕捉到墙上的文字，即使它不是眼睛高度。我认为检查点控制被破坏了-你可以从中制作一个“穷人”版本