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거 조치 Onsen UI로 VR 앱도 얼굴 인식 앱도, 로봇 연계 앱도 만들어 보았다. 3, 4년 정도 전부터 Onsen UI를 사용한 앱을 만들어 왔습니다! 이번은 모처럼이므로 최근 Onsen UI를 사용하여 만들어 보았던 앱을 몇 가지 소개합니다. 다만, Pokémon GO 가 폭발적인 히트를 날리고 있을 무렵,Mozilla 로부터 라고 하는 WebVR 프레임워크가 나와 있는 것을 알고, 라고 생각 Pokémon GO풍의 VR어플리케이션을 만들어 보았습니다—. A-FRAME... Angular초A-Framemonaca온 등봉 크리스마스 이브를 향해 웹 사이트에서 연인을 쉽게 만드는 방법 웹사이트에서 연인을 만든다. 많은 방법이 있지만, 좀처럼 자신의 이상에 가까운 사람을 만날 수 없다는 것이 현상이라고 생각합니다. 원래 이상은 뭐야? 자신에게는 어떤 사람이 있을까? 예를 들어 어떤 사람? 그렇게 생각하면, 반드시 그것이 삶의 사람이 될 필요는 없다는 것을 깨닫습니다. 죄송합니다, 기사를 쓰는 시간이 임박해 왔으므로, 본제에 들어갑니다. 제목 "집에서 하츠네 미쿠와 키스했다"... WebVRMMDWebRTCA-Frame 평생 VR에 있고 싶은 당신을 위한 캐주얼 모바일 VR VR 모드로 전환하는 것은 2016년의 제품이며, 2045년에는 여러분 분명 뇌 미소 직결 플러그 생활을 보내고 있을 것입니다. 그러나, 지금을 사는 분들이 그러한 미래 생활에 적응해 나가기 위해서는 다양한 장애가 있어, 그러한 장애를 해소하기 위해서는 VR 모드 등의 사고방식을 빨리 버려야 합니다. 그래, VR상이 전부라면. 스마트폰 HMD를 쓴 채 생활하기 위해 필요한 구성과 WebVR을... WebVRA-Frame안드로이드HTML5WebRTC A-Frame을 사용하여 웹 VR 체험을 만들 수 있습니다! 최근 만남 축제를 참가했습니다. 우리 오쿠타마 일본어학교는 VR 체험 프로젝트를 만들었습니다. 저는 그 프로젝트 개발 담당입니다. 전 나는 VR의 경험 별로 없기 때문에, 처음 여러가지 VR을 찾아, 다양한 방법을 찾아냈다. 그 후 하나 재미있는 프레임워크 선택했습니다, 라고 하는 프레임워크입니다. 그런 다음 VR 경험 프로젝트를 위해 A-Frame 프레임 워크를 사용합니다. 글쎄, 조금 자... A-Frame자바스크립트WebVRVR 누구나 WebVR 콘텐츠를 개발할 수 있는 플랫폼 작년부터 Qiita 투고자씨의 기사를 참고로 하면서, Unity나 A-Frame을 사용해 VR 컨텐츠를 개발하고 있었습니다. 최근에는 콘텐츠 개발의 문턱도 내려와 HTML 개발 초보자 나도 쉽게 개발할 수 있게 되었습니다. 특히 HTML 태그를 작성하는 것만으로 개발할 수 있는 A-Frame은 쉽고 편리했습니다. HTML이나 JavaScript를 공부해야 합니다. 그러나 반대로 말하면, 쉽게... WebVR웹HTMLA-FrameVR A-Frame에서 WebVR 카메라 추적 그것은 가상 현실 체험을 구축하는 소스 네트워크 구조 중의 하나다. A-Frame의 실체 구성 요소 시스템의 구성 요소는 실체에서 조합, 일치, 설정할 수 있는 자바스크립트 모듈로 외관과 행위 기능을 구축한다. DOM에서 선언적으로 사용할 수 있는 Component를 JavaScript에 등록합니다. 구성 요소는 구성 가능, 재사용 가능, 공유 가능합니다. A-Frame 응용 프로그램의 대부... JavaScriptHTMLEntityComponentSystemA-FrameWebVR A-Frame에서 WebVR 응용 프로그램 만들기 - 객체 배치 시도 나는'A-Frame'이라는 프레임워크를 알게 되었다. 인터넷 브라우저에서 VR을 체험할 수 있는 웹 VR을 간단하게 실현할 수 있다.A-Frame이 뭘 할 수 있는지 많이 해보고 싶어요. 상기 공식 페이지의 "Hello WebVR"의 "View Source"에서 17줄 소스 코드를 복사하여 HTML 파일을 만듭니다. index.html 브라우저에서 확인(Chrome) WebVR을 쉽게 체험할... HTMLJavaScriptWebVRA-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거 조치 Onsen UI로 VR 앱도 얼굴 인식 앱도, 로봇 연계 앱도 만들어 보았다. 3, 4년 정도 전부터 Onsen UI를 사용한 앱을 만들어 왔습니다! 이번은 모처럼이므로 최근 Onsen UI를 사용하여 만들어 보았던 앱을 몇 가지 소개합니다. 다만, Pokémon GO 가 폭발적인 히트를 날리고 있을 무렵,Mozilla 로부터 라고 하는 WebVR 프레임워크가 나와 있는 것을 알고, 라고 생각 Pokémon GO풍의 VR어플리케이션을 만들어 보았습니다—. A-FRAME... Angular초A-Framemonaca온 등봉 크리스마스 이브를 향해 웹 사이트에서 연인을 쉽게 만드는 방법 웹사이트에서 연인을 만든다. 많은 방법이 있지만, 좀처럼 자신의 이상에 가까운 사람을 만날 수 없다는 것이 현상이라고 생각합니다. 원래 이상은 뭐야? 자신에게는 어떤 사람이 있을까? 예를 들어 어떤 사람? 그렇게 생각하면, 반드시 그것이 삶의 사람이 될 필요는 없다는 것을 깨닫습니다. 죄송합니다, 기사를 쓰는 시간이 임박해 왔으므로, 본제에 들어갑니다. 제목 "집에서 하츠네 미쿠와 키스했다"... WebVRMMDWebRTCA-Frame 평생 VR에 있고 싶은 당신을 위한 캐주얼 모바일 VR VR 모드로 전환하는 것은 2016년의 제품이며, 2045년에는 여러분 분명 뇌 미소 직결 플러그 생활을 보내고 있을 것입니다. 그러나, 지금을 사는 분들이 그러한 미래 생활에 적응해 나가기 위해서는 다양한 장애가 있어, 그러한 장애를 해소하기 위해서는 VR 모드 등의 사고방식을 빨리 버려야 합니다. 그래, VR상이 전부라면. 스마트폰 HMD를 쓴 채 생활하기 위해 필요한 구성과 WebVR을... WebVRA-Frame안드로이드HTML5WebRTC A-Frame을 사용하여 웹 VR 체험을 만들 수 있습니다! 최근 만남 축제를 참가했습니다. 우리 오쿠타마 일본어학교는 VR 체험 프로젝트를 만들었습니다. 저는 그 프로젝트 개발 담당입니다. 전 나는 VR의 경험 별로 없기 때문에, 처음 여러가지 VR을 찾아, 다양한 방법을 찾아냈다. 그 후 하나 재미있는 프레임워크 선택했습니다, 라고 하는 프레임워크입니다. 그런 다음 VR 경험 프로젝트를 위해 A-Frame 프레임 워크를 사용합니다. 글쎄, 조금 자... A-Frame자바스크립트WebVRVR 누구나 WebVR 콘텐츠를 개발할 수 있는 플랫폼 작년부터 Qiita 투고자씨의 기사를 참고로 하면서, Unity나 A-Frame을 사용해 VR 컨텐츠를 개발하고 있었습니다. 최근에는 콘텐츠 개발의 문턱도 내려와 HTML 개발 초보자 나도 쉽게 개발할 수 있게 되었습니다. 특히 HTML 태그를 작성하는 것만으로 개발할 수 있는 A-Frame은 쉽고 편리했습니다. HTML이나 JavaScript를 공부해야 합니다. 그러나 반대로 말하면, 쉽게... WebVR웹HTMLA-FrameVR A-Frame에서 WebVR 카메라 추적 그것은 가상 현실 체험을 구축하는 소스 네트워크 구조 중의 하나다. A-Frame의 실체 구성 요소 시스템의 구성 요소는 실체에서 조합, 일치, 설정할 수 있는 자바스크립트 모듈로 외관과 행위 기능을 구축한다. DOM에서 선언적으로 사용할 수 있는 Component를 JavaScript에 등록합니다. 구성 요소는 구성 가능, 재사용 가능, 공유 가능합니다. A-Frame 응용 프로그램의 대부... JavaScriptHTMLEntityComponentSystemA-FrameWebVR A-Frame에서 WebVR 응용 프로그램 만들기 - 객체 배치 시도 나는'A-Frame'이라는 프레임워크를 알게 되었다. 인터넷 브라우저에서 VR을 체험할 수 있는 웹 VR을 간단하게 실현할 수 있다.A-Frame이 뭘 할 수 있는지 많이 해보고 싶어요. 상기 공식 페이지의 "Hello WebVR"의 "View Source"에서 17줄 소스 코드를 복사하여 HTML 파일을 만듭니다. index.html 브라우저에서 확인(Chrome) WebVR을 쉽게 체험할... HTMLJavaScriptWebVRA-Frame