물리 엔진이있는 프레임에서 카메라 이동

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> 

카메라를 이동하도록되어 자바 스크립트 방법은 다음과 같습니다 : 여기

내 예를 들어 장면

$(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 - 엑스트라의 미래 버전은 아마 kinematic-body 카메라 충돌를 지원하지 않습니다, 그래서 당신은 버전 3.X.X.에서에 잠길 수 있습니다 불행히도 성능 향상을 위해 웹 작업자의 멀티 플레이 환경 및 물리 연산 실행과 같은 주요 VR 사례를보다 효과적으로 지원하는 것이 필요합니다.

Answer 2

제 생각에 그것은 단지 운동 질문이므로 js/aframe 만 있으면됩니다. 이렇게 보일 것입니다. 이것은 단지 더러운 n dirty이지만 아이디어를 줄 것입니다. 당신은 플레이어의 움직임에 대해 알아볼 수 있고 이것을 할 수있는 많은 방법을 발견 할 것입니다. 버튼 기능으로 키 기능을 변경하면 좋은 것입니다.

는 그래서 entitys의 모든 종류에 대한 더 많은 같은 것 (캠, 빛, 플레이어 ....) :

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); 
       ................ 
       ............ 
       ........ 
} 

시계가 당신의 AFRAME의 함수가 될 수 있지만, 확실하지 메신저해야 왜냐하면 나는 이런 식으로 three.js를 사용하기 때문입니다.