일 | 월 | 화 | 수 | 목 | 금 | 토 |
---|---|---|---|---|---|---|
1 | ||||||
2 | 3 | 4 | 5 | 6 | 7 | 8 |
9 | 10 | 11 | 12 | 13 | 14 | 15 |
16 | 17 | 18 | 19 | 20 | 21 | 22 |
23 | 24 | 25 | 26 | 27 | 28 |
- vuetify
- AR
- Node
- CI/CD
- version mismatch
- bootstrap
- auth0
- PHP
- web
- vuex
- WebVR
- npx
- promise
- VR
- A-Frame
- vue
- EM6
- package-lock.json
- 상태관리
- JavaScript
- Component
- WebXR
- javscript
- 3d
- JS
- PDO
- array
- vue-template-compiler
- Three.js
- aframe
- Today
- Total
목록분류 전체보기 (161)
대가는 결과를 만든다
1. BoxHelpernew THREE.BoxHelper(Object3D, Color)로 파라미터에 넣은 오브젝트의 공간에서 차지하는 최소, 최대 좌표 값을 알수 있는 BoundingBox를 구할 수 있다.BoxHelper는 보통 Scene에 추가하여 보이도록 할 때 사용하고, 계산을 위한 용도로는 Box3를 사용하는 것이 좋음. ex) /**Bounding Box 생성**/ var boundingBox = new THREE.BoxHelper(object, 0xfffff00); scene.add(boundingBox); 2. Box3new THREE.Box3.setFromObject(Object3D)로 특정 오브젝트를 기준으로 한 boundingBox 생성 가능 boundingBox.getSize(tar..
1. Poly 주요 특징 •Poly에 3D파일 업로드, Asset 관리 •Plugin으로 업로드 가능 (Max, Maya, Blender) •ToolKit으로 Asset 활용 가능 (Unity, Unreal) •Android, iOS ,Web에서 사용 가능 •AR Core에서 활용 가능 ( Sample 있음 ) 2. Poly API 개요 •Asset 목록 나열, 검색, 카테고리 필터링 •내 Asset 목록 나열 •Asset ID를 통한 Asset 가져오기 •Asset 업로드 - 3D MAX, Maya, Blender Plugin으로 Asset upload가능 - 프로세스 1) upload file : OBJ, MTL, PNG => elementID 부여 2) start import : OBJ->Poly ..
Primitives - 같은 A-Frame의 Entity를 편리한 html태그 요소로 사용 가능. 직접 Primitive를 생성도 가능. 는 를 나타냄. - Primitives 등록 1) AFRAME.registerPrimitive(name, definition)을 이용하여 등록가능 name : "-"를 포함한 문자열이어야 한다. ex) 'a-foo' definition : javascript object정의 속성PropertyDescriptionExampledefaultComponentsObject specifying default components of the primitive. The keys are the components’ names and the values are the component..
Navigator Object Docs : https://www.w3schools.com/jsref/obj_navigator.asp - 사용자 브라우저의 정보를 포함하고 있는 obect appCodeNameReturns the code name of the browserappNameReturns the name of the browserappVersionReturns the version information of the browsercookieEnabledDetermines whether cookies are enabled in the browsergeolocationReturns a Geolocation object that can be used to locate the user's positionl..
A-Frame이란? 링크 : https://aframe.io/docs/0.8.0/introduction/#off-you-go VR 구현을 위해 Mozilla에서 개발된 Web Framework,HTML 기반,three.js에 확장 가능한 구조를 제공하는 프레임 워크. Vive, Rift, Windows MR, Dayadream, GearVR, Cardboard 대부분 VR 헤드셋 지원, AR 사용 가능 주요특징 - Cross-Platform VR : Vive, Rift, Windows Mixed Reality, Daydream, GearVR, and Cardboard 와 모든 콘트롤러를 지원하는 VR App 구현 가능. 헤드셋과 컨트롤러가 없는 일반 데스크톱과 스마트폰에도 작동 - Entity-Compo..
1편에 이은 중요 내용 번역 Case Study XR Mesh Store 참고 : https://xr-store.webxrexperiments.com/ 소스 : https://github.com/MozillaReality/xr-store 각 카테고리에 적합한 인터페이스를 제공하는 사이트를 만드는 것이 하나의 과제이다.제품을 1. 일반 디스플이에서, 2. VR 화면에서, 3. AR로 사용자 주위 세계에서 볼 수 있도록 제작한 예시가 위의 XR Strore이다. 이미지 : 각 플랫폼마다 다른 사용자 경험을 제공하는 인터페이스를 스케치한 모습과 구현한 모습 Selecting the Best UI for Each Platform -4가지 타입의 UI 1) Diegetic : UI요소가 3D 세계에 존재2) Sp..
WebXR을 조사하며 Mixed Reality Blog의 Progressive WebXR 게시글을 일부 번역출처 링크 : https://blog.mozvr.com/progressive-webxr-ar-store/ WebXR Device API는 더 넓은 범위의 혼합현실 기기(AR/VR, 몰입형, 휴대형)를 포함하는 WebVR API를 확장한 API이다.모든 혼합현실 기기를 하나의 API로 지원함으로써, Immersive Web community는 웹앱이 사용자의 디바이스 성능에 따라 반응할 수 있도록 하고, AR/VR 혹은 2D 화면의 적합한 UI를 개발자에게 제공하고자 한다. Non-WebXR Displays 현재 데스크톱 모니터, 스마트폰, 태블릿은 WebXR을 통해 VR/AR에 접근이 거의 불가능하..
VR Compatibility -Browser : Chrome, Firefox, Chrome Android-VR Device : Oculus Rift, HTC Vive, Cardboard(WebVR X), Daydream(WebVR) 1) Chrome - Oculus Rift VR BrowserScene viewOculus touchOculus remoteChromium 2017-02-20NOK: black screen on sceneOKOKOK -HTC Vive VR BrowserScene viewVive controllerChromium 2017-02-20NOK: At first you are in the Steam lobby. You need to click in the browser widow t..