A-Frame A-Frame에서 CORS 오류가 발생했습니다. 로컬에서 A-Frame을 사용하여 360도 카메라로 찍은 사진을 웹에 표시하려고하면, index.html 이런 오류가 나왔다. 그래서, http-server를 인스톨 해, 로컬 호스트에 액세스 하면, 에러는 나오지 않고, 360도 카메라의 화상이 표시되었다. 서버가 일어나면 에 액세스합니다.... CORSA-Frame 【A-Frame】VR 컨텐츠를 만드는 방법 사내 제작으로 VR 컨텐츠를 작성했습니다. 세세한 콘텐츠 작성 등은 두고 VR 같은 것을 만들 때까지의 흐름이 간단했기 때문에 소개합니다. OS : Windows 10 Pro 편집자 : VSCode 1. A-Frame 불러오기 2. 오브젝트 배치 이 시점에서 아래와 같이 출력됩니다. ※PC로 확인하고 있으므로, 스마트폰등으로 확인하면 벌써 자이로 센서등 취득해, 공간상에 오브제를 배치합니다.... HTMLA-Frame자바스크립트CSSVR A-FRAME: 물리 연산으로 볼링 같은 움직임을 실현해 보는 8(핀의 물리적 형상의 중심) A-Frame을 사용하여 물리 연산을 할 수 있도록 해 봅니다. A-Frame 측 설정에서 핀의 물리적 모양과 렌더링되는 모양의 중심 편차를 조정할 수 있는지 확인합니다. 예 1) 복합 모양의 cylinder를 이용하여 offset으로 위치 조정 설정했습니다. 위치 조정이 가능했습니다. 공을 굴려 보자. 물리적인 형상에 box를 지정하고 있었을 때보다, 충돌시에 하단의 가장자리로 둘러싸게 되... WebVR프런트 엔드A-Frame자바스크립트VR A-FRAME: 물리 연산으로 볼링 같은 움직임을 실현해 보는 7(핀 모델) A-Frame을 사용하여 물리 연산을 할 수 있도록 해 봅니다. 마지막으로, 핀의 물리적 모양을 설정했고, sphere와 cylinder에서 중심 불일치가 보였다. 이번에는 이용하는 모델에 따라 차이가 있는지 여부를 확인해 보겠습니다. 예 1) pin1 이전부터 이용하고 있는 모델입니다. 중심이 어긋나 있습니다. 예 2) pin2 지금까지와 다른 모델을 사용해 보겠습니다. 이것도 어긋나 있습... WebVR프런트 엔드A-Frame자바스크립트VR A-FRAME: 물리 연산으로 볼링 같은 움직임을 실현해 본다 6(핀의 형상) A-Frame을 사용하여 물리 연산을 할 수 있도록 해 봅니다. cylinder가 합당한 느낌이 듭니다만, 자동적으로 할당했을 경우에 어떠한 형상이 할당되는 것일까요. 예 1) shape=auto 상자가 선택된 것 같습니다. 예 2) shape=primitive 상자가 선택된 것 같습니다. 예 3) shape=box 상자를 설정합니다. 예 4) shape=hull 레인을 빠져 나갔습니다. 공... WebVR프런트 엔드A-Frame자바스크립트VR A-FRAME: 물리 연산으로 볼링 같은 움직임을 실현해 본다 5(볼의 회전에 대한 저항) A-Frame을 사용하여 물리 연산을 할 수 있도록 해 봅니다. 회전에 대한 저항을 살펴봅니다. 각도 감쇠라고 하는 것 같습니다. 회전에 대한 저항이 늘어나면 어떻게 되는지, 조금 이미지가 솟지 않습니다. 볼은 구르고 있기 때문에 구르기 어려워지는지,,, 그것이라고 이 볼링의 예에서는 선형 감쇠와의 구별이 붙지 않습니다. 우선 해보겠습니다. 예 1) angularDamping=0.01 기본값... WebVR프런트 엔드A-Frame자바스크립트VR A-FRAME: 물리 연산으로 볼링 같은 움직임을 실현해 본다 4(볼의 평행 이동에 대한 저항) A-Frame을 사용하여 물리 연산을 할 수 있도록 해 봅니다. 이번에는 공의 평행 이동에 대한 저항을 검증합니다. 예 1) linearDamping=0.01 기본값입니다. 실제 볼링이라면 더 부드럽게 굴러가는 느낌이 듭니다. 저항을 변화시킴으로써 실현할 수 있는 것이 아닐까 생각합니다. 예 2) linearDamping=1 저항을 높이십시오. 공이 날아 가지 않고 조용히 떨어졌습니다. 레인... WebVR프런트 엔드A-Frame자바스크립트VR A-FRAME: 물리 연산으로 볼링 같은 움직임을 실현해 본다2(볼의 형상) 공은 구체이므로 sphere입니다만, 변경하면 어떻게 되는지 시험해 봅니다. 예 1) auto 전회와 차이는 없을 것 같습니다만, debug 모드로 와이어 프레임도 표시시켜 확인해 봅니다. 예 2) primitive primitive는 平面/円柱/球。対応するAフレームプリミティブで自動的に使用されます。여기도 자동으로 sphere가 선택됩니다. 추후, 핀에도 형상을 설정해 시험해 보고 싶습니다. ... WebVR프런트 엔드A-Frame자바스크립트VR A-FRAME: 물리 연산으로 볼링 같은 움직임을 실현해 본다 1(볼의 속도) A-Frame을 사용하여 물리 연산을 할 수 있도록 해 봅니다. 개별 설정값이 어떠한 의미에서 무엇을 어떻게 설정하면 어떤 효과가 있는지를 검증해 나갑니다. 최종적으로는 볼링 같은 행동을 시키기 위한 설정치를 찾아내는 것을 목표로 합니다. 이번에는 공에 주는 속도를 확인합니다. 레인과 핀과 공을 장면에 준비합니다. 공에 속도를 제공합니다. 속도를 변경한 예를 아래에 게재합니다. 예 1) z ... WebVR프런트 엔드HTMLA-FrameVR A-FRAME: 360° 이미지 뷰어 만들기 여행하러 왔기 때문에, 그때의 360° 화상을 VR 고글에서 볼 수 있도록 해 보았습니다. 요 전날 조금 만났으므로, A-FRAME를 이용해 보았습니다. 링크에 커서를 맞추면 3장의 이미지가 차례로 바뀝니다. 자이로 문제 iOS 12.2 이상에서 자이로 센서가 꺼져 있습니다. 내 iPhoneSE는 iOS12.4.1이므로 설정 변경이 필요했습니다.設定 > Safari > モーションと画面の向きの... WebVR프런트 엔드HTMLA-FrameVR SAP Cloud Platform과 VR과 IoT를 결합하여 낚시 게임을 만들어 보았습니다. 이번에는 당사 요네쿠라가 SAP CloudPlatform과 온도 센싱을 조합하여 재미있는 것들을 만들고 있었으므로, 조금 놀아 본 것의 소개를 하겠습니다. 왜 낚시 게임인가? 온도 감지 부분의 하드웨어를 보면 한눈에 개발 환경 : SAP Web IDE Full-STACK 왼쪽에서 온도 감지 장치로 측정 된 온도 데이터는 SORACOM을 통해 SAP HANA로 흐릅니다. 이 온도 데이터를 취득... WebVRSAPA-FrameIoT거 조치 간단하고 무료로 제작되는 WebAR 응용 프로그램 AR 앱의 제작 방법은 다양하지만 브라우저 기반의 WebAR라면 전용 앱을 설치하지 않아도 AR의 즐거움을 누릴 수 있다. 이번에 우리는 Firebase를 위탁 관리로 사용하고 AR.js+A-Frame을 프레임워크로 하며 Windows10 표준에 첨부된 3D Builder를 모델링으로 하여 간단하게 자신이 만든 모델의 구성을 무료로 제작하였다. 브라우저를 기반으로 AR을 구현할 수 있는 라이... ARAR.jsFirebaseA-Frame 오리지널 AR 태그 만들기 오리지널 AR 로고 만들기, AR로 놀기 나는 이 사이트를 참고했다. AR은 익숙한 Hiro 태그로 실행되는 웹 사이트를 제공합니다. 소스 예제를 보려면 여기를 클릭하십시오. sampleAFrame-AR.html 이렇게 3D 객체를 표시하면 성공합니다. 다행히도 생성기 사이트가 있다.제가 이곳을 사용할 수 있도록 허락해 주세요. UPLOAD AR 태그가 될 이미지를 버튼으로 업로드합니다. D... HTMLAR.jsA-Frame
A-Frame에서 CORS 오류가 발생했습니다. 로컬에서 A-Frame을 사용하여 360도 카메라로 찍은 사진을 웹에 표시하려고하면, index.html 이런 오류가 나왔다. 그래서, http-server를 인스톨 해, 로컬 호스트에 액세스 하면, 에러는 나오지 않고, 360도 카메라의 화상이 표시되었다. 서버가 일어나면 에 액세스합니다.... CORSA-Frame 【A-Frame】VR 컨텐츠를 만드는 방법 사내 제작으로 VR 컨텐츠를 작성했습니다. 세세한 콘텐츠 작성 등은 두고 VR 같은 것을 만들 때까지의 흐름이 간단했기 때문에 소개합니다. OS : Windows 10 Pro 편집자 : VSCode 1. A-Frame 불러오기 2. 오브젝트 배치 이 시점에서 아래와 같이 출력됩니다. ※PC로 확인하고 있으므로, 스마트폰등으로 확인하면 벌써 자이로 센서등 취득해, 공간상에 오브제를 배치합니다.... HTMLA-Frame자바스크립트CSSVR A-FRAME: 물리 연산으로 볼링 같은 움직임을 실현해 보는 8(핀의 물리적 형상의 중심) A-Frame을 사용하여 물리 연산을 할 수 있도록 해 봅니다. A-Frame 측 설정에서 핀의 물리적 모양과 렌더링되는 모양의 중심 편차를 조정할 수 있는지 확인합니다. 예 1) 복합 모양의 cylinder를 이용하여 offset으로 위치 조정 설정했습니다. 위치 조정이 가능했습니다. 공을 굴려 보자. 물리적인 형상에 box를 지정하고 있었을 때보다, 충돌시에 하단의 가장자리로 둘러싸게 되... WebVR프런트 엔드A-Frame자바스크립트VR A-FRAME: 물리 연산으로 볼링 같은 움직임을 실현해 보는 7(핀 모델) A-Frame을 사용하여 물리 연산을 할 수 있도록 해 봅니다. 마지막으로, 핀의 물리적 모양을 설정했고, sphere와 cylinder에서 중심 불일치가 보였다. 이번에는 이용하는 모델에 따라 차이가 있는지 여부를 확인해 보겠습니다. 예 1) pin1 이전부터 이용하고 있는 모델입니다. 중심이 어긋나 있습니다. 예 2) pin2 지금까지와 다른 모델을 사용해 보겠습니다. 이것도 어긋나 있습... WebVR프런트 엔드A-Frame자바스크립트VR A-FRAME: 물리 연산으로 볼링 같은 움직임을 실현해 본다 6(핀의 형상) A-Frame을 사용하여 물리 연산을 할 수 있도록 해 봅니다. cylinder가 합당한 느낌이 듭니다만, 자동적으로 할당했을 경우에 어떠한 형상이 할당되는 것일까요. 예 1) shape=auto 상자가 선택된 것 같습니다. 예 2) shape=primitive 상자가 선택된 것 같습니다. 예 3) shape=box 상자를 설정합니다. 예 4) shape=hull 레인을 빠져 나갔습니다. 공... WebVR프런트 엔드A-Frame자바스크립트VR A-FRAME: 물리 연산으로 볼링 같은 움직임을 실현해 본다 5(볼의 회전에 대한 저항) A-Frame을 사용하여 물리 연산을 할 수 있도록 해 봅니다. 회전에 대한 저항을 살펴봅니다. 각도 감쇠라고 하는 것 같습니다. 회전에 대한 저항이 늘어나면 어떻게 되는지, 조금 이미지가 솟지 않습니다. 볼은 구르고 있기 때문에 구르기 어려워지는지,,, 그것이라고 이 볼링의 예에서는 선형 감쇠와의 구별이 붙지 않습니다. 우선 해보겠습니다. 예 1) angularDamping=0.01 기본값... WebVR프런트 엔드A-Frame자바스크립트VR A-FRAME: 물리 연산으로 볼링 같은 움직임을 실현해 본다 4(볼의 평행 이동에 대한 저항) A-Frame을 사용하여 물리 연산을 할 수 있도록 해 봅니다. 이번에는 공의 평행 이동에 대한 저항을 검증합니다. 예 1) linearDamping=0.01 기본값입니다. 실제 볼링이라면 더 부드럽게 굴러가는 느낌이 듭니다. 저항을 변화시킴으로써 실현할 수 있는 것이 아닐까 생각합니다. 예 2) linearDamping=1 저항을 높이십시오. 공이 날아 가지 않고 조용히 떨어졌습니다. 레인... WebVR프런트 엔드A-Frame자바스크립트VR A-FRAME: 물리 연산으로 볼링 같은 움직임을 실현해 본다2(볼의 형상) 공은 구체이므로 sphere입니다만, 변경하면 어떻게 되는지 시험해 봅니다. 예 1) auto 전회와 차이는 없을 것 같습니다만, debug 모드로 와이어 프레임도 표시시켜 확인해 봅니다. 예 2) primitive primitive는 平面/円柱/球。対応するAフレームプリミティブで自動的に使用されます。여기도 자동으로 sphere가 선택됩니다. 추후, 핀에도 형상을 설정해 시험해 보고 싶습니다. ... WebVR프런트 엔드A-Frame자바스크립트VR A-FRAME: 물리 연산으로 볼링 같은 움직임을 실현해 본다 1(볼의 속도) A-Frame을 사용하여 물리 연산을 할 수 있도록 해 봅니다. 개별 설정값이 어떠한 의미에서 무엇을 어떻게 설정하면 어떤 효과가 있는지를 검증해 나갑니다. 최종적으로는 볼링 같은 행동을 시키기 위한 설정치를 찾아내는 것을 목표로 합니다. 이번에는 공에 주는 속도를 확인합니다. 레인과 핀과 공을 장면에 준비합니다. 공에 속도를 제공합니다. 속도를 변경한 예를 아래에 게재합니다. 예 1) z ... WebVR프런트 엔드HTMLA-FrameVR A-FRAME: 360° 이미지 뷰어 만들기 여행하러 왔기 때문에, 그때의 360° 화상을 VR 고글에서 볼 수 있도록 해 보았습니다. 요 전날 조금 만났으므로, A-FRAME를 이용해 보았습니다. 링크에 커서를 맞추면 3장의 이미지가 차례로 바뀝니다. 자이로 문제 iOS 12.2 이상에서 자이로 센서가 꺼져 있습니다. 내 iPhoneSE는 iOS12.4.1이므로 설정 변경이 필요했습니다.設定 > Safari > モーションと画面の向きの... WebVR프런트 엔드HTMLA-FrameVR SAP Cloud Platform과 VR과 IoT를 결합하여 낚시 게임을 만들어 보았습니다. 이번에는 당사 요네쿠라가 SAP CloudPlatform과 온도 센싱을 조합하여 재미있는 것들을 만들고 있었으므로, 조금 놀아 본 것의 소개를 하겠습니다. 왜 낚시 게임인가? 온도 감지 부분의 하드웨어를 보면 한눈에 개발 환경 : SAP Web IDE Full-STACK 왼쪽에서 온도 감지 장치로 측정 된 온도 데이터는 SORACOM을 통해 SAP HANA로 흐릅니다. 이 온도 데이터를 취득... WebVRSAPA-FrameIoT거 조치 간단하고 무료로 제작되는 WebAR 응용 프로그램 AR 앱의 제작 방법은 다양하지만 브라우저 기반의 WebAR라면 전용 앱을 설치하지 않아도 AR의 즐거움을 누릴 수 있다. 이번에 우리는 Firebase를 위탁 관리로 사용하고 AR.js+A-Frame을 프레임워크로 하며 Windows10 표준에 첨부된 3D Builder를 모델링으로 하여 간단하게 자신이 만든 모델의 구성을 무료로 제작하였다. 브라우저를 기반으로 AR을 구현할 수 있는 라이... ARAR.jsFirebaseA-Frame 오리지널 AR 태그 만들기 오리지널 AR 로고 만들기, AR로 놀기 나는 이 사이트를 참고했다. AR은 익숙한 Hiro 태그로 실행되는 웹 사이트를 제공합니다. 소스 예제를 보려면 여기를 클릭하십시오. sampleAFrame-AR.html 이렇게 3D 객체를 표시하면 성공합니다. 다행히도 생성기 사이트가 있다.제가 이곳을 사용할 수 있도록 허락해 주세요. UPLOAD AR 태그가 될 이미지를 버튼으로 업로드합니다. D... HTMLAR.jsA-Frame