如何通过按 A 形框架中的 wasd 按钮来旋转头像？

Question

• 我无法使用旋转属性旋转我的头像。
• 我希望我的头像根据按键进行旋转。
• 我尝试过旋转属性，但它不起作用。

<script>
    AFRAME.registerComponent("rotate-with-camera", {
        tick: (function () {
            // create once
            const tmpq = new THREE.Quaternion();
            const tmpe = new THREE.Euler();

            return function (t, dt) {
                if (!this.el.sceneEl.camera) return; // ignore when there is no camera
                const cam = this.el.sceneEl.camera.el; // get the camera entity
                cam.object3D.getWorldQuaternion(tmpq); // get the world rotation
                tmpe.setFromQuaternion(tmpq, "YXZ");
                // set attribute is necesarry for wasd-controls
                this.el.setAttribute("rotation", {
                    x: 0,
                    y: (tmpe.y * 180) / Math.PI,
                    z: 0,
                });
            };
        })(),
    });
</script>
<a-scene>
    <a-asset>
        <a-asset-item id="avatar" src="./avatar/scene.gltf"></a-asset-item>
        <img id="grass" src="grass.jpg" />
    </a-asset>
    <a-plane src="#grass" position="0 0 -4" scale="50 50 1" repeat=" 5 5 1" rotation="-90 0 0"></a-plane>
    <a-sky color="#ECECEC"></a-sky>
    <a-box position="-1 0.5 -3" rotation="0 45 0" color="#4CC3D9"></a-box>
    <a-sphere position="0 1.25 -5" radius="1.25" color="#EF2D5E"></a-sphere>
    <a-cylinder position="1 0.75 -3" radius="0.5" height="1.5" color="#FFC65D"></a-cylinder>

    <!-- the "player" -->
    <a-entity id="player" gltf-model="#avatar" animation-mixer="clip: Rig|man_idle" scale="0.02 0.02 0.02" look-controls wasd-controls rotate-with-camera> </a-entity>

    <!-- camera "rig" -->
    <a-entity look-at="#player" look-controls wasd-controls>
        <a-entity camera position="0 3 4"></a-entity>
    </a-entity>
</a-scene>

• 我尝试使用 jquery 提供 key-up 和 key-down 属性，然后使用 attr 属性来更改头像的旋转。

<script>
    
      $(this).keydown(function (e) {
        switch (e.which) {
          case 37:
            $("#player").attr(
              "animation-mixer",
              "clip: Rig|man_walk_in_place;"
            );
            $("#player").attr("rotation", "0 -90 0");
            break;
    
          case 38:
            $("#player").attr(
              "animation-mixer",
              "clip: Rig|man_walk_in_place;"
            );
            $("#player").attr("rotation", "0 180 0");
            break;
    
          case 39:
            $("#player").attr(
              "animation-mixer",
              "clip: Rig|man_walk_in_place;"
            );
            $("#player").attr("rotation", "0 90 0");
            break;
    
          case 40:
            $("#player").attr(
              "animation-mixer",
              "clip: Rig|man_walk_in_place;"
            );
            $("#player").attr("rotation", "0 0 0");
            break;
        }
      });
    
      $(this).keyup(function (e) {
        switch (e.which) {
          case 37:
            $("#player").attr("animation-mixer", "clip: Rig|man_idle");
            break;
    
          case 38:
            $("#player").attr("animation-mixer", "clip: Rig|man_idle");
            break;
    
          case 39:
            $("#player").attr("animation-mixer", "clip: Rig|man_idle");
            break;
    
          case 40:
            $("#player").attr("animation-mixer", "clip: Rig|man_idle");
            break;
        }
      });
</script>