awe.js가있는 브라우저의 증강 현실

키 테이크 아웃

증강 현실 (AR)은 AWE.JS 라이브러리를 사용하여 모바일 브라우저에서 구현할 수 있습니다. <.> AWE.JS 라이브러리는 지리 기반 AR, Oculus Rift, Leap Motion Controller 및 Demo에 사용되는 마커 기반 AR을 포함한 여러 AR 경험을 지원합니다. 데모의 경우 Mobile 용 Google Chrome, IFTTT 계정 및 인쇄 된 AR 마커가 필요합니다. 데모는 Chrome 및 Opera와 같은 일부 데스크탑 브라우저에서도 작동합니다. 데모에는 물리적 마커 위에 나타나고 IFTTT와 같은 외부 서비스와 상호 작용하여 밝은 색상과 같은 설정을 변경할 수있는 3D 제어 보드가 포함됩니다. awe.js는 브라우저에서 장치 유형, 카메라 위치 및 라이트 설정과 같은 다양한 매개 변수를 설정해야하며 AR 요소를 관리하기 위해 관심 지점 (POI) 및 예측을 사용합니다. Chrome은 이제 카메라에 액세스하는 웹 페이지에 대한 HTTPS를 요구하며 로컬 테스트에 HTTPS 터널을 사용하는 것과 같은 조정이 필요합니다.

증강 현실은 깔끔한 개념입니다. 우리는 우리 주변의 세계를보고 이미지, 텍스트, 사운드 및 비디오로 보충합니다. 기술 회사는 메타 안경, Microsoft HoloLens 및 Magic Leap과 같은 장치와 함께 AR의 가능성을 탐색하기 시작했습니다. 이 매우 흥미 진진한 AR 헤드셋은 아직 소비자 출시 준비가되어 있지 않으므로 모든 가정에 쌍이있는 시간이 조금 걸릴 수 있습니다. 그러나, 모바일 브라우저 -

-

나는 이전에 JavaScript를 사용하여 다른 종류의 현실 생성 및 조작을 다루었으며 Google Cardboard와 Three.js와 JavaScript 및 Google Cardboard를 사용하여 VR을 웹에 가져 오는 기사의 itepoint에서 itepoint에서 Three.js를 다루었습니다. 이 기사에서는 Awe.js라는 JavaScript 라이브러리를 사용하여 모바일 웹에서 증강 현실 경험을 만드는 방법을 보여줍니다. 우리는 종이 마커 위에 열리는 3D 제어 보드를 만들 것입니다. JavaScript HTTP 요청을 통해 활성화 할 수있는 거의 모든 작업을 수행 할 수 있으므로 ifttt를 사용하여 Lifx Lightbulb의 색상을 변경하도록 설정했습니다. 필요한 것
• 이 데모에는 현재 모바일 용 Google Chrome이 필요합니다. 잠재적으로 모바일 용 Firefox에서도 작동 할 수 있지만 HTC One M9에서 시도했을 때 클릭 이벤트가 트리거되지 않았다는 것을 알았습니다. 또한 일부 데스크탑 브라우저 (Chrome 및 Opera는 내 Mac에서 잘 작동 함)에서 작동하지만 터치 이벤트가있는 스마트 폰과 같은 경험은 아닙니다. 태블릿에서는 깔끔 할 수 있습니다 또한 IFTTT 계정과 HTTP 요청을 트리거하는 규칙으로 제조업체 채널을 설정하는 방법에 대한 지식이 필요합니다. IFTTT를 처음 접한다면 이전에 IFTTT를 사용하여 Lifx 전구를 IoT에 연결하는 것에 관한 기사의 기본 사항을 살펴 보았습니다. Maker Channel을 처음 접하는 사람들의 경우 IoT 및 Node.js를 IFTTT에 연결할 때도 다루었습니다. 마지막으로, 마커를 종이에 인쇄해야합니다. 우리가 사용할 마커는 이것입니다 :
  코드
  코드를 바로 들어가서 시험 해보고 싶다면 Github에서 모두 사용할 수 있습니다. <j> awe.js <j> awe.js는 3.js, 장치의 카메라 및 브라우저에서 증강 현실을 생성하는 매우 현명한 기술을 사용하는 JavaScript 라이브러리입니다. Awe.js Github Repo에서 라이브러리와 일부 샘플을 다운로드 할 수 있습니다. 그것은 네 가지 종류의 AR 경험을 제공하며, 각각의 예제로 Repo에서 자체 예를 들어 있습니다 : <p>. </p> <arar> geo_ar - 객체를 세트 Compass Points에 배치 할 수 있습니다. <ar> grift_ar - Oculus Rift와 호환됩니다 <ar ar> leap_ar - 도약 모션 컨트롤러와 통합 <ar> Marker_ar - 증강 현실 마커에 위치한 경험을 만들 수 있습니다. 이것은 우리 가이 데모에서 함께 일할 것입니다. <img src="/static/imghw/default1.png" data-src="https://img.php.cn/upload/article/000/000/000/173993803013054.png" class="lazy" alt="awe.js가있는 브라우저의 증강 현실" > <h2> <ed> 우리의 증강 현실 데모 코드 <code> 우리의 데모 코드의 길이는 300 줄 이상이지만 비슷한 객체에 대한 많은 코드가 반복됩니다. Demo의 Github Repo에서 데모 코드를 다운로드하고 여기에 제공된 설명과 함께 다음을 따르는 것이 좋습니다. 모든 것이 어떻게 작동하는지에 대한 아이디어가 있으면 땜질을하고 자신의 무언가를 만들어보십시오. </code></ed> </h2>. <the> 모든 것이 창의로드 이벤트 내에서 시작됩니다. 우리가 포함하는 첫 번째 것은 AR 제어판 (여기에서“메뉴”)이 열려 있는지 여부를 추적하는 변수입니다. 처음에는 닫힙니다. <p> </p> <start> 그런 다음 Awe.js 라이브러리를 사용하기 시작합니다. 우리가하는 모든 일은 Window.awe.init () 함수 내에서 정의됩니다. 우리는 AR 장면의 글로벌 설정으로 시작합니다. <h2> <div class="code" style="position:relative; padding:0px; margin:0px;"><div class="code" style="position:relative; padding:0px; margin:0px;"><div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false"><span>window.addEventListener('load', function() { </span> <span>var menu_open = false; </span> <span>// Our code continues here </span> <span>});</span>

  로그인 후 복사
  로그인 후 복사

로그인 후 복사