대가는 결과를 만든다

AFrame 라이브러리 레지스트리 링크 - https://aframe.io/aframe-registry/ **계속 추가하여 정리할 예정** aframe-gui : AFrame의 GUI Framework 라이브러리 ( 동작 테스트 O, ) superhands : tracked controller, touch, mouse로의 Interaction 간편하게 구현된 Component ( 정확히 어떤 역할 하고 있는지 파악, 동작 테스트 X ) aframe-environment-component : 간편히 VR 화면의 전체 기본 배경 환경을 세팅할 수 있는 Component (동작 테스트 O ) aframe-camera-transform-controls-component : 카메라 이동, 조작 Control Co..

1. three.js Scene에 접근 1) a-scene 이용document.querySelector('a-scene').object3D; 2) entity에서의 접근document.querySelector('a-entity').sceneEl.object3D; // THREE.Scene 3) Component에서의 접근AFRAME.registerComponent('foo', { init: function () { var scene = this.el.sceneEl.object3D; // THREE.Scene } }); 2. Entity의 three.js object 접근 : 모든 Entity는 다양한 타입의 THREE.Object3D를 포함하는 THREE.Group을 가지고 있음.object3D를 통해 ..

ECS : Entity-Component-System 1. Entity : element와 prototype, component가 연결되는 컨테이너 object, scene안에서 object의 기반 2. Component : 안의 HTML attributeobject로서 1) schema, 2) 생명주기 handler, 3) 메서드를 포함한다.AFRAME.registerComponent(name, definition)으로 등록모든 로직은 component로 구현됨.appearance, gestures, behaviors, interactivity with other objects. 3. System : 안의 HTML attributeAFRAME.registerSystem(name, definition)으..

ComponentComponent는 Entity의 외관, 동작, 기능을 추가하기 위해 연결되는 재사용 가능한 모듈형 구성요소 이다.three.js와 javascript 코드를 HTML에서 선언적으로 사용할 수 있게 캡슐화 됨. 단일 특성 구성요소 다중 특성 구성요소 Component 등록AFRAME.registerComponent (name, definition){string} name- 구성 요소 이름. HTML의 속성 명으로 나타내지는 Component의 public API{Object} definition- 구성 요소 정의. 스키마 및 생명주기 메서드를..

A-Frame의 Tracker 지원 관련 리서치 내용 Tracker지원에 대해 이슈는 작년 4월부로 오픈된 상태로 진행 흔적이 없고, A-Frame Fork버전에서 Tracker 지원을 구현하여 반영요청을 한 적이 었지만, 정식으로 합쳐지진 못한 상태로 진행이 안된 것으로 보임(따라서 Tracker 사용이 불가능한 것은 아님) Tracker 관련 기능 구현 필요하게 될 시 Fork 버전을 참고 하도록 하고, 해당 이슈 모니터링 필요 1. 2017년 4월 Tracker 지원에 대한 이슈 링크https://github.com/aframevr/aframe/issues/2582 2.chenzlabs fork버전의 pull request 링크https://github.com/aframevr/aframe/pull/..

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..

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..