A-Frame에서 WebVR 카메라 추적
A-Frame
그것은 가상 현실 체험을 구축하는 소스 네트워크 구조 중의 하나다.
https://aframe.io
Entity Component System
A-Frame의 실체 구성 요소 시스템의 구성 요소는 실체에서 조합, 일치, 설정할 수 있는 자바스크립트 모듈로 외관과 행위 기능을 구축한다.
DOM에서 선언적으로 사용할 수 있는 Component를 JavaScript에 등록합니다.
구성 요소는 구성 가능, 재사용 가능, 공유 가능합니다.
A-Frame 응용 프로그램의 대부분의 코드는 Component에 있어야 합니다.
A-Frame에서
ECS(실체 구성 요소 시스템)는 주로 게임 개발에 사용되는 소프트웨어 체계 구조 모델이다.ECS는 상속 원칙 대신 일관성 원칙을 준수하여 보다 유연하게 엔티티를 정의할 수 있습니다.
추적 카메라 구성 요소 만들기
카메라의 정면을 가리키고 문자와 상자 실체에 끼워 넣는 기능 구성 요소 (camera-tracking) 를 만듭니다.
또한camera-tracking의 속성으로서 카메라와의'반경, X거리, Y거리'를 제공함으로써 화면 레이아웃을 쉽게 한다.
코드
HTML
index.html<html>
<head>
<script src="https://aframe.io/releases/1.0.4/aframe.min.js"></script>
<script src="tracking.js"></script>
</head>
<body>
<a-scene>
<!--Camera-->
<a-entity id="camera" camera></a-entity>
<!--Field-->
<a-sky color="#44AAFF"></a-sky>
<a-plane position="0 0 -5" rotation="-90 0 0" width="6" height="6" color="#BB9944" shadow></a-plane>
<!--Camera-tracking Text-->
<a-entity id="text" camera-tracking="circleR: 2; shiftX: 1; shiftY: 0.1"
text="font: mozillavr; value: Tracking test.; color: black"
scale="3 3 1">
</a-entity>
<!--Camera-tracking Box-->
<a-entity id="box" camera-tracking="circleR: 3; shiftX: 0; shiftY: -0.5"
geometry="primitive: box"
scale="0.8 0.3 0.2" material="color: red" shadow>
</a-entity>
</a-scene>
</body>
</html>
JavaScript
tracking.jsAFRAME.registerComponent('camera-tracking', {
schema: {
circleR: {type: 'float', default: '1'},
shiftX: {type: 'float', default: '0'},
shiftY: {type: 'float', default: '0'}
},
tick: function () {
var camera = document.querySelector('#camera');
var cameraPosition = camera.object3D.position;
var cameraRotation = camera.object3D.rotation;
// center position
var cameraX = cameraPosition.x;
var cameraY = cameraPosition.y;
var cameraZ = cameraPosition.z;
// rotation degree
var degreePit = (cameraRotation.x * 180 / Math.PI);
var degreeYaw = (cameraRotation.y * 180 / Math.PI);
// circle size
var r = this.data.circleR;
// rotation point
var positionY = Math.sin(degreePit / 180 * Math.PI) * r;
var xzr = Math.cos(degreePit / 180 * Math.PI) * r;
var positionX = Math.cos((degreeYaw + 90) / 180 * Math.PI) * xzr;
var positionZ = Math.sin((degreeYaw + 90) / 180 * Math.PI) * -1 * xzr;
// shift x value
var addX = this.data.shiftX;
var addXPosX = Math.sin((degreeYaw + 90) / 180 * Math.PI) * addX;
var addXPosZ = Math.cos((degreeYaw + 90) / 180 * Math.PI) * addX;
// shift y value
var addY = this.data.shiftY;
var addYPosX = Math.sin(degreePit / 180 * Math.PI) * Math.cos((degreeYaw + 90) / 180 * Math.PI) * -1 * addY;
var addYPosY = Math.sin((degreePit + 90) / 180 * Math.PI) * addY;
var addYPosZ = Math.sin(degreePit / 180 * Math.PI) * Math.sin((degreeYaw + 90) / 180 * Math.PI) * addY;
// set properties
this.el.setAttribute('rotation', degreePit +' '+ degreeYaw +' 0');
this.el.setAttribute('position', (positionX + cameraX + addXPosX + addYPosX)+' '+ (positionY + cameraY + addYPosY) +' '+ (positionZ + cameraZ + addXPosZ + addYPosZ));
}
});
해설
Reference
이 문제에 관하여(A-Frame에서 WebVR 카메라 추적), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다
https://qiita.com/naokih1210/items/766ee51eca0f7ab52263
텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
A-Frame의 실체 구성 요소 시스템의 구성 요소는 실체에서 조합, 일치, 설정할 수 있는 자바스크립트 모듈로 외관과 행위 기능을 구축한다.
DOM에서 선언적으로 사용할 수 있는 Component를 JavaScript에 등록합니다.
구성 요소는 구성 가능, 재사용 가능, 공유 가능합니다.
A-Frame 응용 프로그램의 대부분의 코드는 Component에 있어야 합니다.
A-Frame에서
ECS(실체 구성 요소 시스템)는 주로 게임 개발에 사용되는 소프트웨어 체계 구조 모델이다.ECS는 상속 원칙 대신 일관성 원칙을 준수하여 보다 유연하게 엔티티를 정의할 수 있습니다.
추적 카메라 구성 요소 만들기
카메라의 정면을 가리키고 문자와 상자 실체에 끼워 넣는 기능 구성 요소 (camera-tracking) 를 만듭니다.
또한camera-tracking의 속성으로서 카메라와의'반경, X거리, Y거리'를 제공함으로써 화면 레이아웃을 쉽게 한다.
코드
HTML
index.html<html>
<head>
<script src="https://aframe.io/releases/1.0.4/aframe.min.js"></script>
<script src="tracking.js"></script>
</head>
<body>
<a-scene>
<!--Camera-->
<a-entity id="camera" camera></a-entity>
<!--Field-->
<a-sky color="#44AAFF"></a-sky>
<a-plane position="0 0 -5" rotation="-90 0 0" width="6" height="6" color="#BB9944" shadow></a-plane>
<!--Camera-tracking Text-->
<a-entity id="text" camera-tracking="circleR: 2; shiftX: 1; shiftY: 0.1"
text="font: mozillavr; value: Tracking test.; color: black"
scale="3 3 1">
</a-entity>
<!--Camera-tracking Box-->
<a-entity id="box" camera-tracking="circleR: 3; shiftX: 0; shiftY: -0.5"
geometry="primitive: box"
scale="0.8 0.3 0.2" material="color: red" shadow>
</a-entity>
</a-scene>
</body>
</html>
JavaScript
tracking.jsAFRAME.registerComponent('camera-tracking', {
schema: {
circleR: {type: 'float', default: '1'},
shiftX: {type: 'float', default: '0'},
shiftY: {type: 'float', default: '0'}
},
tick: function () {
var camera = document.querySelector('#camera');
var cameraPosition = camera.object3D.position;
var cameraRotation = camera.object3D.rotation;
// center position
var cameraX = cameraPosition.x;
var cameraY = cameraPosition.y;
var cameraZ = cameraPosition.z;
// rotation degree
var degreePit = (cameraRotation.x * 180 / Math.PI);
var degreeYaw = (cameraRotation.y * 180 / Math.PI);
// circle size
var r = this.data.circleR;
// rotation point
var positionY = Math.sin(degreePit / 180 * Math.PI) * r;
var xzr = Math.cos(degreePit / 180 * Math.PI) * r;
var positionX = Math.cos((degreeYaw + 90) / 180 * Math.PI) * xzr;
var positionZ = Math.sin((degreeYaw + 90) / 180 * Math.PI) * -1 * xzr;
// shift x value
var addX = this.data.shiftX;
var addXPosX = Math.sin((degreeYaw + 90) / 180 * Math.PI) * addX;
var addXPosZ = Math.cos((degreeYaw + 90) / 180 * Math.PI) * addX;
// shift y value
var addY = this.data.shiftY;
var addYPosX = Math.sin(degreePit / 180 * Math.PI) * Math.cos((degreeYaw + 90) / 180 * Math.PI) * -1 * addY;
var addYPosY = Math.sin((degreePit + 90) / 180 * Math.PI) * addY;
var addYPosZ = Math.sin(degreePit / 180 * Math.PI) * Math.sin((degreeYaw + 90) / 180 * Math.PI) * addY;
// set properties
this.el.setAttribute('rotation', degreePit +' '+ degreeYaw +' 0');
this.el.setAttribute('position', (positionX + cameraX + addXPosX + addYPosX)+' '+ (positionY + cameraY + addYPosY) +' '+ (positionZ + cameraZ + addXPosZ + addYPosZ));
}
});
해설
Reference
이 문제에 관하여(A-Frame에서 WebVR 카메라 추적), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다
https://qiita.com/naokih1210/items/766ee51eca0f7ab52263
텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
HTML
index.html
<html>
<head>
<script src="https://aframe.io/releases/1.0.4/aframe.min.js"></script>
<script src="tracking.js"></script>
</head>
<body>
<a-scene>
<!--Camera-->
<a-entity id="camera" camera></a-entity>
<!--Field-->
<a-sky color="#44AAFF"></a-sky>
<a-plane position="0 0 -5" rotation="-90 0 0" width="6" height="6" color="#BB9944" shadow></a-plane>
<!--Camera-tracking Text-->
<a-entity id="text" camera-tracking="circleR: 2; shiftX: 1; shiftY: 0.1"
text="font: mozillavr; value: Tracking test.; color: black"
scale="3 3 1">
</a-entity>
<!--Camera-tracking Box-->
<a-entity id="box" camera-tracking="circleR: 3; shiftX: 0; shiftY: -0.5"
geometry="primitive: box"
scale="0.8 0.3 0.2" material="color: red" shadow>
</a-entity>
</a-scene>
</body>
</html>
JavaScript
tracking.js
AFRAME.registerComponent('camera-tracking', {
schema: {
circleR: {type: 'float', default: '1'},
shiftX: {type: 'float', default: '0'},
shiftY: {type: 'float', default: '0'}
},
tick: function () {
var camera = document.querySelector('#camera');
var cameraPosition = camera.object3D.position;
var cameraRotation = camera.object3D.rotation;
// center position
var cameraX = cameraPosition.x;
var cameraY = cameraPosition.y;
var cameraZ = cameraPosition.z;
// rotation degree
var degreePit = (cameraRotation.x * 180 / Math.PI);
var degreeYaw = (cameraRotation.y * 180 / Math.PI);
// circle size
var r = this.data.circleR;
// rotation point
var positionY = Math.sin(degreePit / 180 * Math.PI) * r;
var xzr = Math.cos(degreePit / 180 * Math.PI) * r;
var positionX = Math.cos((degreeYaw + 90) / 180 * Math.PI) * xzr;
var positionZ = Math.sin((degreeYaw + 90) / 180 * Math.PI) * -1 * xzr;
// shift x value
var addX = this.data.shiftX;
var addXPosX = Math.sin((degreeYaw + 90) / 180 * Math.PI) * addX;
var addXPosZ = Math.cos((degreeYaw + 90) / 180 * Math.PI) * addX;
// shift y value
var addY = this.data.shiftY;
var addYPosX = Math.sin(degreePit / 180 * Math.PI) * Math.cos((degreeYaw + 90) / 180 * Math.PI) * -1 * addY;
var addYPosY = Math.sin((degreePit + 90) / 180 * Math.PI) * addY;
var addYPosZ = Math.sin(degreePit / 180 * Math.PI) * Math.sin((degreeYaw + 90) / 180 * Math.PI) * addY;
// set properties
this.el.setAttribute('rotation', degreePit +' '+ degreeYaw +' 0');
this.el.setAttribute('position', (positionX + cameraX + addXPosX + addYPosX)+' '+ (positionY + cameraY + addYPosY) +' '+ (positionZ + cameraZ + addXPosZ + addYPosZ));
}
});
해설
Reference
이 문제에 관하여(A-Frame에서 WebVR 카메라 추적), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다
https://qiita.com/naokih1210/items/766ee51eca0f7ab52263
텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
Reference
이 문제에 관하여(A-Frame에서 WebVR 카메라 추적), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://qiita.com/naokih1210/items/766ee51eca0f7ab52263텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
좋은 웹페이지 즐겨찾기
