위치 기반 AR

three.js API는 현재 GPS 위치를 추적하고(또는 가짜 위치 설정을 허용)

주어진 위도와 경도에 three.js 개체를 추가할 수 있도록 해줍니다.

여기에는 다음 클래스가 포함됩니다.

THREEx.LocationBased
- three.js 위치 기반 API에 대한 일반 관리자 클래스입니다.
THREEx.WebcamRenderer
- 웹캠의 피드를 WebGL 텍스처로 렌더링합니다.
THREEx.DeviceOrientationControls
- 장치 방향의 변화를 감지합니다.

a-scene 초기화
sourceType: webcam videoTexture 속성으로 위치기반 AR이 콘텐츠 거리를 가늠
gps-new-camera: 위도와 경도를 3D 세계 좌표로 변환해줌
gps-new-entity-place: 위도 경도를 이용해 엔티티를 위치
gps-projected-entity-place : 주어진 위도 경도에 엔티티 위치

<a-scene vr-mode-ui='enabled: false' 
    arjs='sourceType: webcam; videoTexture: true; debugUIEnabled: false' 
    renderer='antialias: true; alpha: true'
 >
    <a-camera 
	    gps-new-camera='gpsMinDistance: 5'>
    </a-camera>
    <a-entity 
      material='color: red' 
	    geometry='primitive: box' 
	    <!-- 디바이스가 그 포지션에 가리킬 때. 거리에 비례해서 보여짐 -->
	    gps-new-entity-place="latitude: <your-lat>; longitude: <your-loon>" 
	    scale="12
	    0 10 10">
    </a-entity>
</a-scene>

컴포넌트

camera

Entity place