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

我在我的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>

---

但是，移动似乎不是很平稳，当用户使用WASD控件时，cameraWrapper实体仍保留在原来的位置。如何使用applyImpulse平滑地移动相机？

我认为这只是一个移动问题，因此js/aframe将是您所需要的全部。应该是这样的。这只是一个简单的例子，但应该给你一个想法。你可以仔细研究玩家的动作，并且会找到很多方法来做到这一点。只需将按键功能更改为按钮功能，您就可以开始了

因此，对于所有类型的实体（摄像机、灯光、播放器……）来说，情况更像这样：

this.camMove=function（）{
//delta=自上次呼叫以来的时间变化（秒）
delta=clock.getDelta（）；
var mDir=100*delta；
移动=假；
变量mButtons=[“按钮1”、“按钮2”、“按钮3”]；
对于（变量i=0；i=0）
移动=真；
}
如果（mButtons==按钮1）
translateX凸轮（mDir）；
如果（mButtons==按钮2）
凸轮.translateX（-mDir）；
如果（mButtons==按钮3）
凸轮平移（-mDir）；
................
............
........
}

时钟应该是aframe中的一个函数，但我不确定，因为我使用three.js来处理类似的事情

该组件是与框架物理系统兼容的

wasd控件

和

外观控件

的替代品。这有助于防止相机穿过障碍物，但对于桌面非VR应用程序仍然有用

用法：

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

注意：aframe extras的未来版本可能不支持
运动学实体
和摄影机碰撞，因此您可能会被锁定在3.X.X版本。不幸的是，为了更好地支持关键的虚拟现实案例，这是必要的，比如多人游戏体验中的物理以及在web worker中运行物理以提高性能

translateX和动画的问题在于，物理引擎无法识别它们，只有“外观”控件才能识别它们。是否有任何方法可以使用applyImpulse来执行您的建议？要使用物理引擎（例如碰撞）执行此操作，您可以将
cam.translateX
替换为
cameraEl.body.applyImpulse（…，…）
。请参阅。@DonMcCurdy这似乎只适用于动态实体示例。您能否提供一个示例，以移动运动学实体摄影机实体，例如，如我的问题中的向量0,0,1？@正确，您不能将脉冲应用于运动学实体。您可以使用
el.body.fixedRotation=true
将动态实体附加到相机，以防止滚动。但是完全实现这一点可能需要数百行代码，所以我无法为您编写抱歉。它确实有效。该演示的源代码链接在答案中。我知道运动学体检测碰撞，但我不明白如何将其与applyImpulse或任何其他方法结合使用，在以编程方式移动相机时，移动相机以检测碰撞。对不起，如果我的问题不清楚的话。
运动学体
不适用于
applyImpulse（）
，但当与
通用控制装置
结合使用时，它会自动检测碰撞，并防止相机穿过
静态体
或
动态体
对象。换句话说，您可以将
运动学机构
与
通用控制装置
一起使用，也可以将
动力学机构
与
applyImpulse（）
一起使用。后者可能需要100多行代码。
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 );
                ................
                ............
                ........
}

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