使用物理引擎在相框中移动相机 [英] Move camera in aframe with physics engine

问题描述

我在aframe应用程序中使用了一个物理引擎，我希望在用户单击按钮时移动相机。

I am using a physics engine in my aframe application, and I want the camera to move when the user clicks a button.

我想保留物理引擎属性所以我使用applyImpulse作为动作方法。

I want to keep the physics engine properties so I am using applyImpulse as a method for motion.

这是我的示例场景：

<script src="https://aframe.io/releases/0.3.0/aframe.min.js"></script>
<script src="//cdn.rawgit.com/donmccurdy/aframe-extras/v2.3.0/dist/aframe-extras.min.js"></script>
<a-scene physics>
<!-- Camera -->
<a-entity id="cameraWrapper" geometry="box" dynamic-body="mass:1" position="0 1 0" width="2" height="1" depth="2" listener>
<a-entity id="camera" camera universal-controls position="0 1 0" rotation="0 0 0">
</a-entity>
</a-entity>
<a-grid static-body position="0 0 0"></a-grid>
</a-scene>
<div>
<a id="impulseButton">Move</a>
</div>

应该移动相机的javascript方法如下所示：

The javascript method that is supposed to move the camera looks like this:

$(document).ready(function(){
  $("#impulseButton").on("click",function(){
    applyImpulse();
  });

function applyImpulse(){
    var x = 0;
    var y = 0;
    var z = 1;
    var el = $('#cameraWrapper')[0];
    el.body.applyImpulse(
       new CANNON.Vec3(x,y,z),
       new CANNON.Vec3().copy(el.body.position)
    );
  }
});

然而，移动似乎不是很顺利，当用户使用WASD控件时，cameraWrapper实体仍然存在在旧的位置。如何顺利地使用applyImpulse移动相机？

However, the movement seems not very smooth, and when the users uses WASD controls, the cameraWrapper entity remains at the old location. How can I move the camera with applyImpulse smoothly?

推荐答案

universal-controls 组件是 wasd-controls 和 look-controls 与aframe-physics-system开箱即用。这有助于防止相机穿过障碍物的关键情况，我不建议在VR中使用，但对桌面非VR应用程序仍然有用。

The universal-controls component is a replacement for wasd-controls and look-controls that is compatible out of the box with aframe-physics-system. The key case where this is helpful is in preventing the camera from going through obstacles, which I don't recommend in VR, but is still useful for desktop non-VR applications.

用法：

<a-entity camera universal-controls kinematic-body></a-entity>

kinematic-body 组件被添加到检测播放器上的碰撞。这是更完整的示例。

The kinematic-body component is added to detect collisions on the player. Here is a more complete example.

注意：未来版本的aframe-extras可能不支持 kinematic-body 和相机碰撞，因此您可能会被锁定在3.XX版本不幸的是，这对于更好地支持关键VR案例是必要的，例如具有多人体验的物理特性以及在Web工作者中运行物理性能。

NOTE: Future versions of aframe-extras will probably not have support for kinematic-body and camera collisions, so you may be locked in at version 3.X.X. This is unfortunately necessary to support key VR cases better, like having physics for multiplayer experiences and running physics in a web worker for performance.

这篇关于使用物理引擎在相框中移动相机的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！