Aframe에서 물리적 연산 프레임워크 가져오기(aframe-physics-System)

!
추기:ammo를 사용하면 후술한 문제가 발생하지 않기 때문에 사용을 권장합니다
https://zenn.dev/dami/articles/c94a922c5c9de1
이 기사는 Duplicate입니다.
Aframe에 aframe-physics-system를 도입하여 물리 연산에 대상에게 동작을 추가합니다.
  • Aframe
  • aframe-physics-system
  • Aframe 및 aframe-physics-System
      <head>
        <script src="https://aframe.io/releases/0.8.0/aframe.min.js"></script>
        <script src="//cdn.jsdelivr.net/gh/n5ro/[email protected]/dist/aframe-physics-system.js"></script>
      </head>
    
    읽기:
  • Aframe1.3.0(현재 최신) 이상의 버전은 frame-physics-System에서 Three입니다.Geometry가undefined로 변하여 작동하지 않음 (aframe-physics-System이 구상한 Three.js 버전 구)
  • https://aframe.io/docs/1.3.0/introduction/html-and-primitives.html#example-1
  • Aframe 1.2.0 및 ThreeGeometry의polyfill을 이용하여 이 오류를 피할 수 있습니다

  •   <script src="https://cdn.jsdelivr.net/gh/mrdoob/three.js@r134/examples/js/deprecated/Geometry.js"></script>
    
  • 이번에는dynamic-body가 static-body
  • 를 입었어요.
  • 그래서 이번에는 jsFiddle을 통해 동작을 확인하는 Aframe 0.8.0를 잠시 사용했습니다.
  • https://jsfiddle.net/danichimc/m5rw3uta/
  • 아래를 열면 구체가 굴러갔는지 확인할 수 있다
  • <!DOCTYPE html>
    <html>
      <head>
        <meta charset="utf-8" />
        <script src="https://aframe.io/releases/0.8.0/aframe.min.js"></script>
        <script src="//cdn.jsdelivr.net/gh/n5ro/[email protected]/dist/aframe-physics-system.js"></script>
      </head>
    
      <body>
        <a-scene physics="debug: false;">
          <a-camera id="camera" active="true" look-controls wasd-controls position="0 1.6 0" data-aframe-default-camera></a-camera>
          <a-sphere
    	  position="-1 0.3 -2"
    	  rotation="0 5 0"
    	  color="#4CC3D9"
    	  radius="0.3"
    	  depth="0.5"
    	  dynamic-body="linearDamping:0.9;mass:10;"
          ></a-sphere>
          <a-sphere
    	  position="0 0.3 -2"
    	  rotation="0 5 0"
    	  color="#4CC3D9"
    	  radius="0.3"
    	  depth="0.5"
    	  dynamic-body="linearDamping:0.9;mass:10;"
          ></a-sphere>
          <a-sphere
    	  position="1 0.3 -2"
    	  rotation="0 5 0"
    	  color="#4CC3D9"
    	  radius="0.3"
    	  depth="0.5"
    	  dynamic-body="linearDamping:0.9;mass:10;"
          ></a-sphere>
          <a-sphere
    	  position="0 1 -3"
    	  radius="0.5"
    	  color="#f00"
    	  dynamic-body="linearDamping:0.9;mass:10;"
          ></a-sphere>
          <a-sphere
    	  position="-1.2 1 -3"
    	  radius="0.5"
    	  color="#f00"
    	  dynamic-body="linearDamping:0.9;mass:10;"
          ></a-sphere>
          <a-sphere
    	  position="1.2 1 -3"
    	  radius="0.5"
    	  color="#f00"
    	  dynamic-body="linearDamping:0.9;mass:10;"
          ></a-sphere>
          <a-sphere
    	  position="1 1 -3"
    	  radius="0.25"
    	  color="#f80"
    	  dynamic-body="linearDamping:0.9;mass:10;"
          ></a-sphere>
          <a-sphere
    	  position="1 1 -3"
    	  radius="0.25"
    	  color="#f80"
    	  dynamic-body="linearDamping:0.9;mass:10;"
          ></a-sphere>
          <a-sphere
    	  position="1 1 -3"
    	  radius="0.25"
    	  color="#f80"
    	  dynamic-body="linearDamping:0.9;mass:10;"
          ></a-sphere>
          <a-plane
    	  position="0 -1 -4"
    	  rotation="-110 10 0"
    	  width="10"
    	  height="10"
    	  color="#7BC8A4"
    	  static-body
          ></a-plane>
          <a-plane
    	  position="0 -1 -4"
    	  rotation="-110 -10 0"
    	  width="10"
    	  height="10"
    	  color="#7BC8A4"
    	  static-body
          ></a-plane>
          <a-plane
    	  position="0 4 -4"
    	  rotation="-110 0 0"
    	  width="10"
    	  height="10"
    	  color="#7BC8A4"
    	  static-body
          ></a-plane>
          <a-plane
    	  position="0 3 -3.6"
    	  rotation="0 0 0"
    	  width="10"
    	  height="10"
    	  color="#7BC8A4"
    	  static-body
          ></a-plane>
          <a-plane
    	  position="2.5 3 -5"
    	  rotation="0 90 0"
    	  width="10"
    	  height="10"
    	  color="#7BC8A4"
    	  static-body
          ></a-plane>
          <a-plane
    	  position="-3 3 -5"
    	  rotation="0 90 0"
    	  width="10"
    	  height="10"
    	  color="#7BC8A4"
    	  static-body
          ></a-plane>
          <a-plane
    	  position="0 5 0"
    	  rotation="0 0 0"
    	  width="10"
    	  height="10"
    	  color="#7BC8A4"
    	  static-body
          ></a-plane>
          <a-sky color="#ECECEC"></a-sky>
        </a-scene>
      </body>
    </html>
    
    소감: Aframe 최신판은 사용할 수 없으니 수정 PR을 해보세요aframe-physics-system 이외의 선택은 좋을 것 같은데...(다음에)

    좋은 웹페이지 즐겨찾기