【A-Frame】VR 컨텐츠를 만드는 방법
소개
사내 제작으로 VR 컨텐츠를 작성했습니다.
세세한 콘텐츠 작성 등은 두고 VR 같은 것을 만들 때까지의 흐름이 간단했기 때문에 소개합니다.
환경
OS : Windows 10 Pro
편집자 : VSCode
구현
1. A-Frame 불러오기
<html>
<head>
<script src="https://aframe.io/releases/1.0.3/aframe.min.js"></script>
</head>
<body>
</body>
</html>
2. 오브젝트 배치
<html>
<head>
<script src="https://aframe.io/releases/1.0.3/aframe.min.js"></script>
</head>
<body>
<a-scene>
<a-box position="0 1.17 -3.9" rotation="0 0 0" color="#ff0000"></a-box>
</a-scene>
</body>
</html>
이 시점에서 아래와 같이 출력됩니다.
※PC로 확인하고 있으므로, 스마트폰등으로 확인하면 벌써 자이로 센서등 취득해, 공간상에 오브제를 배치합니다.
이미지에 텍스처를 칠하거나 3D 객체를 배치할 수 있으므로 사용해 보세요.
자세한 것은↓↓ 공식 사이트↓↓
htps : // / f 라메. 이오/
3. A-Frame Inspector
값을 변경하여 매번 확인하는 것이 번거롭기 때문에 A-Frame Inspector를 열고 (win : ctrl + alt + i) 직접 객체의 배치와 크기를 결정하면 쉽다고 생각합니다.
※단말기의 OS 버전에 따라 센서 취득 상황이 다르기 때문에 요실기 검증이 필요합니다.
실제로 A-Frame으로 만든 사이트는 ↓ 이쪽 ↓
h tp // w w. Ho-on. 이. jp / g Ree Chin g / 네오 r / 2020 /? 우 tm_그래서 r = 쿠이
이상
Reference
이 문제에 관하여(【A-Frame】VR 컨텐츠를 만드는 방법), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다
https://qiita.com/Sakurai1111/items/6cd6d6fbbcabfc51c464
텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
OS : Windows 10 Pro
편집자 : VSCode
구현
1. A-Frame 불러오기
<html>
<head>
<script src="https://aframe.io/releases/1.0.3/aframe.min.js"></script>
</head>
<body>
</body>
</html>
2. 오브젝트 배치
<html>
<head>
<script src="https://aframe.io/releases/1.0.3/aframe.min.js"></script>
</head>
<body>
<a-scene>
<a-box position="0 1.17 -3.9" rotation="0 0 0" color="#ff0000"></a-box>
</a-scene>
</body>
</html>
이 시점에서 아래와 같이 출력됩니다.
※PC로 확인하고 있으므로, 스마트폰등으로 확인하면 벌써 자이로 센서등 취득해, 공간상에 오브제를 배치합니다.
이미지에 텍스처를 칠하거나 3D 객체를 배치할 수 있으므로 사용해 보세요.
자세한 것은↓↓ 공식 사이트↓↓
htps : // / f 라메. 이오/
3. A-Frame Inspector
값을 변경하여 매번 확인하는 것이 번거롭기 때문에 A-Frame Inspector를 열고 (win : ctrl + alt + i) 직접 객체의 배치와 크기를 결정하면 쉽다고 생각합니다.
※단말기의 OS 버전에 따라 센서 취득 상황이 다르기 때문에 요실기 검증이 필요합니다.
실제로 A-Frame으로 만든 사이트는 ↓ 이쪽 ↓
h tp // w w. Ho-on. 이. jp / g Ree Chin g / 네오 r / 2020 /? 우 tm_그래서 r = 쿠이
이상
Reference
이 문제에 관하여(【A-Frame】VR 컨텐츠를 만드는 방법), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다
https://qiita.com/Sakurai1111/items/6cd6d6fbbcabfc51c464
텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
<html>
<head>
<script src="https://aframe.io/releases/1.0.3/aframe.min.js"></script>
</head>
<body>
</body>
</html>
<html>
<head>
<script src="https://aframe.io/releases/1.0.3/aframe.min.js"></script>
</head>
<body>
<a-scene>
<a-box position="0 1.17 -3.9" rotation="0 0 0" color="#ff0000"></a-box>
</a-scene>
</body>
</html>
Reference
이 문제에 관하여(【A-Frame】VR 컨텐츠를 만드는 방법), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://qiita.com/Sakurai1111/items/6cd6d6fbbcabfc51c464텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
좋은 웹페이지 즐겨찾기
