Question

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

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

以下是我的示例场景：

<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方法如下所示：

$(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移动相机？

Answer 1

universal-controls组件可替代wasd-controls和look-controls，它与aframe-physics-system开箱即用。这有助于防止相机穿过I don't recommend in VR的障碍物，但对于桌面非VR应用仍然有用。

用法：

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

添加kinematic-body组件以检测播放器上的冲突。这是more complete example。

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

Answer 2

我认为这只是一个运动问题所以js / aframe就是你所需要的。它看起来应该是这样的。这只是一个快速的肮脏，但应该给你的想法。你可以搜索玩家运动的东西，并找到许多方法来做到这一点。只需将按键功能更改为按钮功能，就可以了。

所以对于所有类型的实体（cam，light，player ....）来说更像是这样：

this.camMove = function(){
        // delta = change in time since last call (seconds)
            delta = clock.getDelta(); 
            var mDir = 100 * delta;
            moves = false;

            var mButtons = ["button1", "button2", "button3"];
            for (var i = 0; i < mButtons.length; i++)
            {
                if ( mButtons >= 0 )
                    moves = true;
            }

            if ( mButtons === button1 )
                cam.translateX( mDir );
            if ( mButtons === button2 )
                cam.translateX( -mDir );
            if ( mButtons === button3 )
                cam.translateY( -mDir );
                ................
                ............
                ........
}

时钟应该是你的框架中的一个函数，但我不确定它，因为我使用three.js这样的事情。

使用物理引擎在相框中移动相机

2 个答案: