A-frame 持续为 gltf 设置动画以转到相机 A-frame 的位置答案

【问题标题】：A-frame consitatnly animate gltf to go to position of camera A-frameA-frame 持续为 gltf 设置动画以转到相机 A-frame 的位置
【发布时间】：2022-05-02 20:59:00
【问题描述】：

我正在使用 A 帧 (https://aframe.io) 创建一个 vr 场景，我想知道如何为 gltf 模型设置动画以始终跟随相机。例如，我想使用 A-frame 的动画属性并定位我的模型，使其始终跟随玩家。如果玩家向前移动 10 米，gltf 将向前移动 10 个空间。如果玩家向左移动 10 格，无论玩家移动到哪里，摄像机都会跟随玩家。我想让 gltf 模型始终跟随相机。如何才能做到这一点？我的 gltf 模型的代码：

      <script src="https://aframe.io/releases/1.2.0/aframe.min.js"></script>

<a-scene>
                   <a-gltf-model class="cube" mixin="cube" animation='   property: position; dur: 2500; from: 0 2.3 -1; to: 0 2.5 -1; dir: alternate; autoplay: true; easing: linear; loop: true;' src="https://cdn.glitch.com/bb5471f0-16f5-4309-8c7c-52310dc4ff58%2FRobotfr.glb?v=1625527911166"  position="0 2.3 -1"scale="1.2 1.2 1.2"  speech-command__show="command: assistant; type: attribute; attribute: visible; value: true;"speech-command__hide="command: hide; type: attribute; attribute: visible; value: false;"></a-gltf-model>

</a-scene>

【问题讨论】：

标签： javascript jquery three.js aframe webvr

【解决方案1】：

实际上，您正在询问与相机移动的第三人称视角有关的问题。这可以通过重新设置您的相机来轻松完成，并且您需要为相机添加一些偏移量，以便它始终看起来在相机前面

 <a-camera>
   <!-- The object with the same transform as the camera + some offset -->
   <a-entity gltf-model="./scene.gltf" position="0 0 -0.5"></a-entity>
 </a-camera>

如果这不起作用，请尝试创建和使用这样的组件

<script src="https://aframe.io/releases/1.3.0/aframe.min.js"></script>
<script src="https://unpkg.com/aframe-orbit-controls@1.2.0/dist/aframe-orbit-controls.min.js"></script>

<script>
  AFRAME.registerComponent("follow-box", {
    schema: {
      target: {type: "selector"}
    },
    tick: (function() {
        const tmpv = new THREE.Vector3();
        return function(t, dt) {
        if (!this.data.target) return; 
        const target = this.data.target.getObject3D("mesh"); 
        const position = target.getWorldPosition(tmpv); 
        this.el.object3D.position.lerp(tmpv, 0.5) 
      }
    })()
  })
  
</script>
<a-scene>
  

  <!-- camera  -->
  <a-entity follow-box="target: #player" look-controls>
    <a-entity camera position="0 1.6 2"></a-entity>
  </a-entity>
    
  <a-entity id="player" gltf-model="./scene.gltf" wasd-controls="speed: 35" ></a-entity>
  
  
</a-scene>

【讨论】：