A-frame 将物理设置为变量答案

【问题标题】：A-frame set physics to a variableA-frame 将物理设置为变量
【发布时间】：2021-10-01 06:07:22
【问题描述】：

我正在使用 A-frame (https://aframe.io) 创建一个场景，我想知道如何使用 A-frame 物理组件将场景中的物理设置为变量。应该发生的是我的场景中的物理应该设置为我的变量 x 的值。如何做到这一点？

我的场景代码：https://jsfiddle.net/AidanYoung/1cmgLkrp/2/ 物理组件的代码：https://github.com/n5ro/aframe-physics-system

现在我的场景中的物理是使用<a-scene> 标签设置的，当前设置为-10。我想将物理改变为等于变量 x。这是我的代码中设置物理的部分：

<a-scene background="color: lightblue;"
         renderer="antialias: true; gammaOutput: false;"
         light="defaultLightsEnabled: true;"

         physics="gravity: -10; 
         
         debug: false; restitution: 10;">

目前重力设置为 -10。我想将重力设置为变量 x 的值。如何做到这一点？

【问题讨论】：

标签： javascript three.js physics aframe webvr

【解决方案1】：

您可以在物理驱动程序中设置重力

设置垂直重力

const scene = AFRAME.scenes[0] // or use document.querySelector('a-scene')
scene.systems.physics.driver.world.gravity.y = -50; // set vertical gravity

这是完整版

你可以运行下面的代码sn-p并按空格键，跳跃会有更高的阻力。

<html>

<head>
  <script src="https://aframe.io/releases/0.8.2/aframe.min.js"></script>
  <script src="https://unpkg.com/aframe-extras@5.0.0/dist/aframe-extras.min.js"></script>
  <script src="https://unpkg.com/aframe-physics-system@3.3.0/dist/aframe-physics-system.min.js"></script>
  <script src="https://unpkg.com/aframe-animation-component@5.1.2/dist/aframe-animation-component.min.js"></script>
  <script src="https://unpkg.com/aframe-template-component@3.2.1/dist/aframe-template-component.min.js"></script>
  <script src="https://unpkg.com/aframe-gif-shader@0.2.0/dist/aframe-gif-shader.js"></script>
</head>

<body>
  <a-scene do-something background="color: lightblue;" renderer="antialias: true; gammaOutput: false;"
    light="defaultLightsEnabled: true;" physics="debug: false; restitution: 10;">
    <a-assets>
      <a-mixin id="box-bump"
        animation__bump="property: object3D.position.y; from: 0; to: 0.2; dur: 200; dir: alternate; loop: 1; startEvents: click, collide;">
      </a-mixin>
      <script id="pipe" type="text/html">
        <a-entity geometry="primitive: cylinder; segmentsHeight: 1;"
                  material="color: green; roughness: 0.2;"
                  position="0 0.5 0"
                  shadow="receive: true; cast: false;">
          <a-entity geometry="primitive: cylinder; radius: 1.1; height: 1; segmentsHeight: 1;"
                    material="color: green; roughness: 0.2;"
                    position="0 1 0"
                    shadow="cast: true; receive: false;"
                    static-body>
            <a-entity geometry="primitive: circle; radius: 1;"
                      material="color: #010; shader: flat;"
                      position="0 0.502 0"
                      rotation="-90 0 0"></a-entity>
          </a-entity>
        </a-entity>
      </script>
    </a-assets>

    <!-- CAMERA -->
    <a-entity id="rig" position="0 0 5" movement-controls="speed: 0.2;" kinematic-body="enableJumps: true;"
      jump-ability="distance: 3;" tracker>
      <a-entity camera="far: 1000;" wasd-controls="enabled: false;" look-controls="pointerLockEnabled: true;"
        position="0 1.6 0">

        <a-cursor fuse="false" raycaster="objects: [data-interactive]; far: 4;"></a-cursor>

      </a-entity>
    </a-entity>

    <!-- STAGE -->
    <a-entity id="stage">

      <a-image src="#title" npot="true" width="52.8" height="26.4" position="0 34 -50"></a-image>

      <a-entity position="0 3.5 -4">

        <a-box material="shader: standard; roughness: 1; npot: true; src: #brick;" position="-1 0 0" data-interactive
          sound="on: click; src: #brick-sound; poolSize: 10;" static-body></a-box>

      </a-entity>

      <a-box material="shader: standard; roughness: 1; npot: true; src: #brick;" position="1 0 0" data-interactive
        static-body></a-box>
    </a-entity>

    <!-- Pipes -->
    <a-entity template="src: #pipe" position="-5 0 -10"></a-entity>
    <a-entity template="src: #pipe" position="0 0 -10"></a-entity>
    <a-entity template="src: #pipe" position="5 0 -10"></a-entity>

    <a-entity geometry="primitive: box; width: 50; depth: 50; height: 1;"
      material="shader: standard; roughness: 1; src: #bedrock; repeat: 25 25; npot: true;" position="0 -0.5 0"
      static-body></a-entity>
    </a-entity>

  </a-scene>
  <script>
    const scene = AFRAME.scenes[0] // or use document.querySelector('a-scene')
    scene.systems.physics.driver.world.gravity.y = -50; // set vertical gravity
    console.log(scene.systems.physics.driver.world.gravity)
  </script>
</body>

</html>

【讨论】：