A-Frame에서 WebVR 응용 프로그램 만들기 - 객체 배치 시도
11778 단어 HTMLJavaScriptWebVRA-Frame
입문
나는'A-Frame'이라는 프레임워크를 알게 되었다. 인터넷 브라우저에서 VR을 체험할 수 있는 웹 VR을 간단하게 실현할 수 있다.A-Frame이 뭘 할 수 있는지 많이 해보고 싶어요.
A-Frame
홈페이지:https://aframe.io/
시위 행진
상기 공식 페이지의 "Hello WebVR"의 "View Source"에서 17줄 소스 코드를 복사하여 HTML 파일을 만듭니다.
index.html<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Hello, WebVR! • A-Frame</title>
<meta name="description" content="Hello, WebVR! • A-Frame">
<script src="https://aframe.io/releases/0.9.2/aframe.min.js"></script>
</head>
<body>
<a-scene background="color: #FAFAFA">
<a-box position="-1 0.5 -3" rotation="0 45 0" color="#4CC3D9" shadow></a-box>
<a-sphere position="0 1.25 -5" radius="1.25" color="#EF2D5E" shadow></a-sphere>
<a-cylinder position="1 0.75 -3" radius="0.5" height="1.5" color="#FFC65D" shadow></a-cylinder>
<a-plane position="0 0 -4" rotation="-90 0 0" width="4" height="4" color="#7BC8A4" shadow></a-plane>
</a-scene>
</body>
</html>
브라우저에서 확인(Chrome)
WebVR을 쉽게 체험할 수 있습니다.
WASD 키 화살표 키를 사용하여 카메라를 이동할 수도 있습니다.
객체 배치 <a-scene background="color: #FAFAFA">
<a-box position="-1 0.5 -3" rotation="0 45 0" color="#4CC3D9" shadow></a-box>
<a-sphere position="0 1.25 -5" radius="1.25" color="#EF2D5E" shadow></a-sphere>
<a-cylinder position="1 0.75 -3" radius="0.5" height="1.5" color="#FFC65D" shadow></a-cylinder>
<a-plane position="0 0 -4" rotation="-90 0 0" width="4" height="4" color="#7BC8A4" shadow></a-plane>
</a-scene>
대상의 위치, 크기, 색깔은 상기 설정에서 일목요연하다.
이것을 참고하여 대상을 다시 설정해 보세요.입방체 위에 작은 구체를 놓아 보세요.<a-sphere position="-1 1.25 -3" radius="0.25" color="#3BAF75" shadow></a-sphere>
표기 사이에 상술한 내용을 묘사하였다.
(1, 1.25, -3) 위치에서 반지름 0.25,#3BAF75 색깔 구체를 놓는다.
객체가 추가되었습니다.
다양한 구성이 있습니다.
나는 또 어떤 다른 대상을 배치할 수 있는지 시험해 보았다.<!-- 平面 -->
<a-triangle position="-1.5 2.5 -2" color="#FF926B" vertex-a="0 0.25 0" vertex-b="-0.25 -0.25 0" vertex-c="0.25 -0.25 0"></a-triangle>
<a-circle position="-1 3.5 -4" color="#4CC3D9" radius="0.5"></a-circle>
<a-ring position="-2 3.5 -4" color="teal" radius-inner="0.25" radius-outer="0.5"></a-ring>
<!-- 多面体 -->
<a-tetrahedron position="0 3 -4" color="#FF926B" radius="0.5"></a-tetrahedron>
<a-octahedron position="1 3 -4" color="#FF926B" radius="0.5"></a-octahedron>
<a-dodecahedron position="2 3 -4" color="#FF926B" radius="0.5"></a-dodecahedron>
<a-icosahedron position="3 3 -4" color="#FF926B" radius="0.5"></a-icosahedron>
<!-- 特殊 -->
<a-torus position="-1.5 1.5 -2" color="#43A367" arc="270" radius="0.25" radius-tubular="0.005"></a-torus>
<a-torus-knot position="-1.5 0.75 -2" color="#B84A39" arc="180" p="2" q="5" radius="0.25" radius-tubular="0.005"></a-torus-knot>
<!-- 文字 -->
<a-text position="0.5 1 -2" color="#000000" value="Hello, World!"></a-text>
꼬리표만 조금만 바꾸면 이렇게 잘 표현할 수 있어.이거 언제 썼어?
A-Frame 숙련
A-Frame은 Visual Inspector를 제공합니다.자세한 내용은 공식 문서의 "Introduction"을 참조하십시오.
https://aframe.io/docs/0.9.0/introduction/
이 옵션을 사용하면 객체를 직관적으로 배치할 수 있습니다.
실제로 사용해 보세요.
만든 html을 여는 브라우저에서 "Ctrl + Alt + I"를 누르십시오.
마우스 왼쪽 버튼을 클릭하고 드래그하여 회전하고 마우스 오른쪽 버튼을 클릭하여 변환합니다.
객체를 클릭하면 이동하거나 회전할 수 있는 화살표가 표시됩니다.
또한 오른쪽 탭의 GEOMETRY 및 MATERIAL을 변경하면 크기와 색상 등을 변경할 수 있습니다.
이동 또는 변경된 값의 결과를 코드에 반영하려면 다음 단계를 수행해야 합니다.
① 왼쪽에서 반영하고 싶은 태그 선택(모두 반영하려면 "scene")
② 오른쪽 위에 있는 클립보드 태그(Copy entity HTML to clipboard)를 클릭합니다.
③ 변경 전 코드에 덮어쓰기 붙여넣기
이렇게 하면 실제 이동 또는 변경된 상태를 반영할 수 있다.
아주 편해요.
끝내다
이번 A-Frame 객체에 대한 구성은 여러 번 시도되었습니다.
다음에는 이 대상들에게 클릭 이벤트 등 동적 동작을 추가하고 싶습니다.
Reference
이 문제에 관하여(A-Frame에서 WebVR 응용 프로그램 만들기 - 객체 배치 시도), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다
https://qiita.com/yuya-s/items/cd169c54efc98b42d0ed
텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
홈페이지:https://aframe.io/
시위 행진
상기 공식 페이지의 "Hello WebVR"의 "View Source"에서 17줄 소스 코드를 복사하여 HTML 파일을 만듭니다.
index.html<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Hello, WebVR! • A-Frame</title>
<meta name="description" content="Hello, WebVR! • A-Frame">
<script src="https://aframe.io/releases/0.9.2/aframe.min.js"></script>
</head>
<body>
<a-scene background="color: #FAFAFA">
<a-box position="-1 0.5 -3" rotation="0 45 0" color="#4CC3D9" shadow></a-box>
<a-sphere position="0 1.25 -5" radius="1.25" color="#EF2D5E" shadow></a-sphere>
<a-cylinder position="1 0.75 -3" radius="0.5" height="1.5" color="#FFC65D" shadow></a-cylinder>
<a-plane position="0 0 -4" rotation="-90 0 0" width="4" height="4" color="#7BC8A4" shadow></a-plane>
</a-scene>
</body>
</html>
브라우저에서 확인(Chrome)
WebVR을 쉽게 체험할 수 있습니다.
WASD 키 화살표 키를 사용하여 카메라를 이동할 수도 있습니다.
객체 배치 <a-scene background="color: #FAFAFA">
<a-box position="-1 0.5 -3" rotation="0 45 0" color="#4CC3D9" shadow></a-box>
<a-sphere position="0 1.25 -5" radius="1.25" color="#EF2D5E" shadow></a-sphere>
<a-cylinder position="1 0.75 -3" radius="0.5" height="1.5" color="#FFC65D" shadow></a-cylinder>
<a-plane position="0 0 -4" rotation="-90 0 0" width="4" height="4" color="#7BC8A4" shadow></a-plane>
</a-scene>
대상의 위치, 크기, 색깔은 상기 설정에서 일목요연하다.
이것을 참고하여 대상을 다시 설정해 보세요.입방체 위에 작은 구체를 놓아 보세요.<a-sphere position="-1 1.25 -3" radius="0.25" color="#3BAF75" shadow></a-sphere>
표기 사이에 상술한 내용을 묘사하였다.
(1, 1.25, -3) 위치에서 반지름 0.25,#3BAF75 색깔 구체를 놓는다.
객체가 추가되었습니다.
다양한 구성이 있습니다.
나는 또 어떤 다른 대상을 배치할 수 있는지 시험해 보았다.<!-- 平面 -->
<a-triangle position="-1.5 2.5 -2" color="#FF926B" vertex-a="0 0.25 0" vertex-b="-0.25 -0.25 0" vertex-c="0.25 -0.25 0"></a-triangle>
<a-circle position="-1 3.5 -4" color="#4CC3D9" radius="0.5"></a-circle>
<a-ring position="-2 3.5 -4" color="teal" radius-inner="0.25" radius-outer="0.5"></a-ring>
<!-- 多面体 -->
<a-tetrahedron position="0 3 -4" color="#FF926B" radius="0.5"></a-tetrahedron>
<a-octahedron position="1 3 -4" color="#FF926B" radius="0.5"></a-octahedron>
<a-dodecahedron position="2 3 -4" color="#FF926B" radius="0.5"></a-dodecahedron>
<a-icosahedron position="3 3 -4" color="#FF926B" radius="0.5"></a-icosahedron>
<!-- 特殊 -->
<a-torus position="-1.5 1.5 -2" color="#43A367" arc="270" radius="0.25" radius-tubular="0.005"></a-torus>
<a-torus-knot position="-1.5 0.75 -2" color="#B84A39" arc="180" p="2" q="5" radius="0.25" radius-tubular="0.005"></a-torus-knot>
<!-- 文字 -->
<a-text position="0.5 1 -2" color="#000000" value="Hello, World!"></a-text>
꼬리표만 조금만 바꾸면 이렇게 잘 표현할 수 있어.이거 언제 썼어?
A-Frame 숙련
A-Frame은 Visual Inspector를 제공합니다.자세한 내용은 공식 문서의 "Introduction"을 참조하십시오.
https://aframe.io/docs/0.9.0/introduction/
이 옵션을 사용하면 객체를 직관적으로 배치할 수 있습니다.
실제로 사용해 보세요.
만든 html을 여는 브라우저에서 "Ctrl + Alt + I"를 누르십시오.
마우스 왼쪽 버튼을 클릭하고 드래그하여 회전하고 마우스 오른쪽 버튼을 클릭하여 변환합니다.
객체를 클릭하면 이동하거나 회전할 수 있는 화살표가 표시됩니다.
또한 오른쪽 탭의 GEOMETRY 및 MATERIAL을 변경하면 크기와 색상 등을 변경할 수 있습니다.
이동 또는 변경된 값의 결과를 코드에 반영하려면 다음 단계를 수행해야 합니다.
① 왼쪽에서 반영하고 싶은 태그 선택(모두 반영하려면 "scene")
② 오른쪽 위에 있는 클립보드 태그(Copy entity HTML to clipboard)를 클릭합니다.
③ 변경 전 코드에 덮어쓰기 붙여넣기
이렇게 하면 실제 이동 또는 변경된 상태를 반영할 수 있다.
아주 편해요.
끝내다
이번 A-Frame 객체에 대한 구성은 여러 번 시도되었습니다.
다음에는 이 대상들에게 클릭 이벤트 등 동적 동작을 추가하고 싶습니다.
Reference
이 문제에 관하여(A-Frame에서 WebVR 응용 프로그램 만들기 - 객체 배치 시도), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다
https://qiita.com/yuya-s/items/cd169c54efc98b42d0ed
텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Hello, WebVR! • A-Frame</title>
<meta name="description" content="Hello, WebVR! • A-Frame">
<script src="https://aframe.io/releases/0.9.2/aframe.min.js"></script>
</head>
<body>
<a-scene background="color: #FAFAFA">
<a-box position="-1 0.5 -3" rotation="0 45 0" color="#4CC3D9" shadow></a-box>
<a-sphere position="0 1.25 -5" radius="1.25" color="#EF2D5E" shadow></a-sphere>
<a-cylinder position="1 0.75 -3" radius="0.5" height="1.5" color="#FFC65D" shadow></a-cylinder>
<a-plane position="0 0 -4" rotation="-90 0 0" width="4" height="4" color="#7BC8A4" shadow></a-plane>
</a-scene>
</body>
</html>
<a-scene background="color: #FAFAFA">
<a-box position="-1 0.5 -3" rotation="0 45 0" color="#4CC3D9" shadow></a-box>
<a-sphere position="0 1.25 -5" radius="1.25" color="#EF2D5E" shadow></a-sphere>
<a-cylinder position="1 0.75 -3" radius="0.5" height="1.5" color="#FFC65D" shadow></a-cylinder>
<a-plane position="0 0 -4" rotation="-90 0 0" width="4" height="4" color="#7BC8A4" shadow></a-plane>
</a-scene>
이것을 참고하여 대상을 다시 설정해 보세요.입방체 위에 작은 구체를 놓아 보세요.
<a-sphere position="-1 1.25 -3" radius="0.25" color="#3BAF75" shadow></a-sphere>
(1, 1.25, -3) 위치에서 반지름 0.25,
#3BAF75 색깔 구체를 놓는다. 객체가 추가되었습니다.
다양한 구성이 있습니다.
나는 또 어떤 다른 대상을 배치할 수 있는지 시험해 보았다.<!-- 平面 -->
<a-triangle position="-1.5 2.5 -2" color="#FF926B" vertex-a="0 0.25 0" vertex-b="-0.25 -0.25 0" vertex-c="0.25 -0.25 0"></a-triangle>
<a-circle position="-1 3.5 -4" color="#4CC3D9" radius="0.5"></a-circle>
<a-ring position="-2 3.5 -4" color="teal" radius-inner="0.25" radius-outer="0.5"></a-ring>
<!-- 多面体 -->
<a-tetrahedron position="0 3 -4" color="#FF926B" radius="0.5"></a-tetrahedron>
<a-octahedron position="1 3 -4" color="#FF926B" radius="0.5"></a-octahedron>
<a-dodecahedron position="2 3 -4" color="#FF926B" radius="0.5"></a-dodecahedron>
<a-icosahedron position="3 3 -4" color="#FF926B" radius="0.5"></a-icosahedron>
<!-- 特殊 -->
<a-torus position="-1.5 1.5 -2" color="#43A367" arc="270" radius="0.25" radius-tubular="0.005"></a-torus>
<a-torus-knot position="-1.5 0.75 -2" color="#B84A39" arc="180" p="2" q="5" radius="0.25" radius-tubular="0.005"></a-torus-knot>
<!-- 文字 -->
<a-text position="0.5 1 -2" color="#000000" value="Hello, World!"></a-text>
꼬리표만 조금만 바꾸면 이렇게 잘 표현할 수 있어.이거 언제 썼어?
A-Frame 숙련
A-Frame은 Visual Inspector를 제공합니다.자세한 내용은 공식 문서의 "Introduction"을 참조하십시오.
https://aframe.io/docs/0.9.0/introduction/
이 옵션을 사용하면 객체를 직관적으로 배치할 수 있습니다.
실제로 사용해 보세요.
만든 html을 여는 브라우저에서 "Ctrl + Alt + I"를 누르십시오.
마우스 왼쪽 버튼을 클릭하고 드래그하여 회전하고 마우스 오른쪽 버튼을 클릭하여 변환합니다.
객체를 클릭하면 이동하거나 회전할 수 있는 화살표가 표시됩니다.
또한 오른쪽 탭의 GEOMETRY 및 MATERIAL을 변경하면 크기와 색상 등을 변경할 수 있습니다.
이동 또는 변경된 값의 결과를 코드에 반영하려면 다음 단계를 수행해야 합니다.
① 왼쪽에서 반영하고 싶은 태그 선택(모두 반영하려면 "scene")
② 오른쪽 위에 있는 클립보드 태그(Copy entity HTML to clipboard)를 클릭합니다.
③ 변경 전 코드에 덮어쓰기 붙여넣기
이렇게 하면 실제 이동 또는 변경된 상태를 반영할 수 있다.
아주 편해요.
끝내다
이번 A-Frame 객체에 대한 구성은 여러 번 시도되었습니다.
다음에는 이 대상들에게 클릭 이벤트 등 동적 동작을 추가하고 싶습니다.
<!-- 平面 -->
<a-triangle position="-1.5 2.5 -2" color="#FF926B" vertex-a="0 0.25 0" vertex-b="-0.25 -0.25 0" vertex-c="0.25 -0.25 0"></a-triangle>
<a-circle position="-1 3.5 -4" color="#4CC3D9" radius="0.5"></a-circle>
<a-ring position="-2 3.5 -4" color="teal" radius-inner="0.25" radius-outer="0.5"></a-ring>
<!-- 多面体 -->
<a-tetrahedron position="0 3 -4" color="#FF926B" radius="0.5"></a-tetrahedron>
<a-octahedron position="1 3 -4" color="#FF926B" radius="0.5"></a-octahedron>
<a-dodecahedron position="2 3 -4" color="#FF926B" radius="0.5"></a-dodecahedron>
<a-icosahedron position="3 3 -4" color="#FF926B" radius="0.5"></a-icosahedron>
<!-- 特殊 -->
<a-torus position="-1.5 1.5 -2" color="#43A367" arc="270" radius="0.25" radius-tubular="0.005"></a-torus>
<a-torus-knot position="-1.5 0.75 -2" color="#B84A39" arc="180" p="2" q="5" radius="0.25" radius-tubular="0.005"></a-torus-knot>
<!-- 文字 -->
<a-text position="0.5 1 -2" color="#000000" value="Hello, World!"></a-text>
A-Frame은 Visual Inspector를 제공합니다.자세한 내용은 공식 문서의 "Introduction"을 참조하십시오.
https://aframe.io/docs/0.9.0/introduction/
이 옵션을 사용하면 객체를 직관적으로 배치할 수 있습니다.
실제로 사용해 보세요.
만든 html을 여는 브라우저에서 "Ctrl + Alt + I"를 누르십시오.
마우스 왼쪽 버튼을 클릭하고 드래그하여 회전하고 마우스 오른쪽 버튼을 클릭하여 변환합니다.
객체를 클릭하면 이동하거나 회전할 수 있는 화살표가 표시됩니다.
또한 오른쪽 탭의 GEOMETRY 및 MATERIAL을 변경하면 크기와 색상 등을 변경할 수 있습니다.
이동 또는 변경된 값의 결과를 코드에 반영하려면 다음 단계를 수행해야 합니다.
① 왼쪽에서 반영하고 싶은 태그 선택(모두 반영하려면 "scene")
② 오른쪽 위에 있는 클립보드 태그(Copy entity HTML to clipboard)를 클릭합니다.
③ 변경 전 코드에 덮어쓰기 붙여넣기
이렇게 하면 실제 이동 또는 변경된 상태를 반영할 수 있다.
아주 편해요.
끝내다
이번 A-Frame 객체에 대한 구성은 여러 번 시도되었습니다.
다음에는 이 대상들에게 클릭 이벤트 등 동적 동작을 추가하고 싶습니다.
Reference
이 문제에 관하여(A-Frame에서 WebVR 응용 프로그램 만들기 - 객체 배치 시도), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://qiita.com/yuya-s/items/cd169c54efc98b42d0ed텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
좋은 웹페이지 즐겨찾기
