A-frame 将跳跃高度设置为变量

Question

我正在使用 Aframe 制作视频游戏，我想知道如何将跳跃高度设置为变量。这是我目前使用的代码

<a-entity id="rig"
            position="17.5 50.1 0" 
            movement-controls="speed: 0.2;"
            kinematic-body="enableJumps: true;"
            jump-ability="distance: 1.8;"
         
                networked="template:#avatar-template;attachTemplateToLocal:false;"
                spawn-in-circle="radius:3"
            tracker>
    <a-entity camera="far: 1000;"
              wasd-controls
              look-controls="pointerLockEnabled: true;"
              position="0 1.6 0">
        
    </a-entity>
  </a-entity>

我想要的是将跳跃能力设置为等于一个变量。例如：jump-ability="distance: VARIABLE;" 有谁知道我怎样才能做到这一点？

Answer 1

没有任何框架（如 angular 或 React）你。

如果你想要一些外部 js 脚本来修改属性，你应该使用 setAttribute():

// either use any logic in a js script
const btn = document.querySelector("button");
const sphere = document.querySelector("a-sphere");
btn.addEventListener("click", e => {
  // set the radius to a random number
  sphere.setAttribute("radius", Math.random() * 1 + 0.5);
})

<script src="https://aframe.io/releases/1.2.0/aframe.min.js"></script>
<button style="z-index: 999; position: fixed">RESIZE</button>
<script>
  // or preferably within a custom component
  AFRAME.registerComponent("foo", {
    init: function() {
      const btn = document.querySelector("button");
      const sphere = document.querySelector("a-sphere");
      btn.addEventListener("click", e => {
        // no need to duplicate the script logic
        // sphere.setAttribute("radius", Math.random() * 1 + 0.5);
      })
    }
  })
</script>
<a-scene foo>
  <a-sphere position="0 1.25 -5" radius="1.25" color="#EF2D5E"></a-sphere>
</a-scene>

每次单击按钮都会更改 radius 值。

Answer 2

修复您的代码

您的组件有错误，永远无法正常工作。

这是您的代码片段：

AFRAME.registerComponent("foo", {
  init: function() {
    var acceleration = 100;
    const cam = this.el.sceneEl.camera.el;
    const btn = document.querySelector("button");
    btn.addEventListener("click", e => {
      acceleration = acceleration === 100 ? 25 : 100;
      cam.setAttribute("speed", "mouvement-controls", acceleration);
    })
  }
})

您在 mouvement-controls 而不是 movement-controls
您尝试以错误的顺序设置属性。这就是您的代码试图做的 speed="mouvement-controls: {acceleration}"。但是你想要这样movement-controls="speed: {acceleration}"。你必须改变参数的顺序
最后一件事 - 你需要在你的装备上设置 movement-controls，而不是相机
另请注意：速度 1 与加速度 65 相似。因此将速度设置为 100 将使您以光速

这是您的组件的固定版本

AFRAME.registerComponent("foo", {
  init: function() {
    var acceleration = 1;
    const rig = document.getElementById("rig");
    const btn = document.querySelector("button");
    btn.addEventListener("click", e => {
      acceleration = acceleration === 1 ? 0.1 : 1;
      rig.setAttribute("movement-controls", "speed", acceleration);
    })
  }
})

A-frame 将跳跃高度设置为变量

A-frame set jump height to a variable

html

javascript

css

virtual-reality

aframe

修复您的代码