如何在A-Frame中使用检查点控件? [英] How do I use checkpoint controls in A-Frame?

问题描述

我是A-Frame的新手，但仍在尝试找出所有问题！我目前正在构建3D空间，并希望通过在地板上提供点让访问者点击并转移到该位置来为访问者创造一个引导性的体验.我在网上找到了此代码，虽然很完美，但我无法理解工作. 这是我在Glitch上的项目的链接: https://glitch.com/~museum-exhibit-演示

I am new to A-Frame and still trying to figure everything out! I'm currently constructing a 3D space and would like to create a guided experience for visitors by providing dots on the floor for them to click and be transported to that position. I found this code online which is perfect but I can't get it to work. Here is the link to my project on 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>

有人能发现我要去哪里哪里吗?

Can anyone spot where I'm going wrong?

推荐答案

这不会回答问题，但应该可以解决您的问题.

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

You can substitute the checkpoint-controls with a simple animation system:

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>

您可以在此故障中看到它的工作.

You can see it working in this glitch.

这篇关于如何在A-Frame中使用检查点控件?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！