Aframe+Vue를 사용하여 OculusGo에서 WebVR을 사용하기 시작합니다.
개시하다
Oculus Rift Advent Calendar 2018 14일째 보도다.
Oculus는 주로 Unity와 UE4에서 개발했는데 그 중에서 브라우저에서 VR을 시도하고 싶어요!이런 변태들도 많아요.
하지만 긴급상황Aframe과 React360(기존 ReactVR) 페이지를 봤자 "잘 모르겠는데..."라며 포기하는 사람도 많았다.
Aframe이란?
대략적으로 설명하자면 브라우저에서 HMD와 카드보드에 대응하는 3D 렌더링을 간단하게 할 수 있는 프레임워크(내부는three.js VR을 위한 패키지 라이브러리군)이다.공식 웹 사이트 프레젠테이션 브라우저에 3D 모델이 표시됩니다.
오른쪽 아래 모서리의 아이콘을 클릭합니다.
이렇게 VR에 익숙한 화면이 나온다.
실제로 Aframe을 사용하기 전까지는 이해가 안 돼요.
공식 홈페이지설치 항목를 보면 영어에 익숙하지 않으면 무엇을 해야 할지 알기 어렵다.
여기에 있는 프로젝트는 각 개발 스타일의 HowTo를 포함하고 있다면 Aframe을 사용한다는 뜻은 아래 두 번째 항목이다.
Include the JS Build
HTML에서 작성된 파일을 사용하는 방법script 태그를 사용하여 CDN에서 파일을 로드합니다.
<head>
<script src="https://aframe.io/releases/0.8.0/aframe.min.js"></script>
</head>
Install from npm
패키지 관리 소프트웨어의 npm에서 Aframe을 이용할 수 있도록 합니다.단순히 모듈을 로컬로 가져와서 사용할 뿐 실제 사용 시 노드 모듈을 사용할 때의 예절을 지켜야 한다.(원래 진행
npm init, 명령도 npm install aframe --savedependencies에 추가 모듈로 필요하지만 설명이 없음)프로젝트 추가
Vue CLI 사용
Vue CLI Vue를 위한 CLI지만 생성기가 우수해 웹팩 도입부터 바벨까지 설정이 가능하기 때문에 어프레임 개발을 활용하면 개발이 수월해진다.
먼저 Vue CLI 설치는 생략하고 생성기에서 작성할 때 Aframe을 어떻게 포함시켜 진행해야 하는지를 설명합니다.
생성기를 사용하여 프로젝트 생성
콘솔에서 다음 명령을 입력합니다.[아무 종목 이름]에서 원하는 이름을 지어주세요.
vue create 任意のプロジェクト名
Vue CLI v3.1.3
┌───────────────────────────┐
│ Update available: 3.2.1 │
└───────────────────────────┘
? Please pick a preset: (Use arrow keys)
default (babel, eslint)
❯ Manually select features
Babel와 Linter / Formatter에서 체크만 하면 OK.Enter 키를 누릅니다.? Check the features needed for your project:
❯◉ Babel
◯ TypeScript
◯ Progressive Web App (PWA) Support
◯ Router
◯ Vuex
◯ CSS Pre-processors
◉ Linter / Formatter
◯ Unit Testing
◯ E2E Testing
ESLint + Standard config에 놓고 Enter 키를 누릅니다.? Pick a linter / formatter config:
ESLint with error prevention only
ESLint + Airbnb config
❯ ESLint + Standard config
ESLint + Prettier
Lint on save 중 체크가 있으면 됩니다.Enter 키를 누릅니다.? Pick additional lint features: (Press <space> to select, <a> to toggle all,
<i> to invert selection)
❯◉ Lint on save
◯ Lint and fix on commit
In dedicated config files 관리가 더 편합니다.Enter 키를 누릅니다.? Where do you prefer placing config for Babel, PostCSS, ESLint, etc.? (Use a
rrow keys)
❯ In dedicated config files
In package.json
N 를 입력하고 Enter 키를 누릅니다.? Save this as a preset for future projects? (y/N)
code 任意のプロジェクト名
Aframe 추가
package.json 항목의 루트 디렉터리로 이동하려면 아래 명령을 사용하십시오.패키지 관리 소프트웨어yarn를 권장합니다.yarn add aframe
HelloWorld 코드 쓰기
임의eslintrc.고쳐 쓰다
Liter를 수정합니다.개인적인 취향의 문제지만 저는 평소에 이런 설정을 사용합니다.개별 설정의 뜻은 볼 수 있다ESLit 규칙
module.exports = {
root: true,
env: {
node: true,
},
'extends': [
'plugin:vue/essential',
'@vue/standard',
],
rules: {
'no-extra-semi': 'warn',
'no-undef': 'warn',
'quotes': ['error', 'single'],
'space-before-function-paren': ['error', 'never'],
'arrow-parens': 0,
'generator-star-spacing': 'off',
'no-console': process.env.NODE_ENV === 'production' ? 'error' : 'off',
'no-debugger': process.env.NODE_ENV === 'production' ? 'error' : 'off',
},
parserOptions: {
parser: 'babel-eslint',
}
main.고쳐 쓰다
신청지main.덮어쓰다파일은 src 폴더에 있습니다.
추가
import 'aframe'.import Vue from 'vue'
import App from './App.vue'
import 'aframe'
Vue.config.productionTip = false
new Vue({
store,
render: h => h(App)
}).$mount('#app')
App.고쳐 쓰다
App.vue는 루트 Vue 인스턴스이며 여기에 서브어셈블리를 추가합니다.마찬가지로 src 폴더 안에 있습니다.
.vue 파일은 템플릿과 스크립트로 나뉘어져 있으며,template (}) 의 기술과 js 스크립트를 함께 쓸 수 있습니다.
다음과 같이 덮어씁니다.
<template>
<div id="app">
<aframe-window></aframe-window>
</div>
</template>
<script>
import AframeWindow from './components/AframeWindow'
export default {
name: 'app',
components: {
AframeWindow
}
}
</script>
HelloWorld.vue를 삭제합니다.새 vue
프로젝트 루트 디렉터리 아래에서 삭제
/src/components/HelloWorld.vue하고 같은 디렉터리에 추가AframeWindow.vue하면 다음과 같다.
<template>
<div id="aframe-window">
<a-scene background="color: #ECECEC" embedded>
<a-box position="-1 0.5 -3" rotation="0 45 0" color="#4CC3D9"></a-box>
<a-sphere position="0 1.25 -5" radius="1.25" color="#EF2D5E"></a-sphere>
<a-cylinder position="1 0.75 -3" radius="0.5" height="1.5" color="#FFC65D"></a-cylinder>
<a-plane position="0 0 -4" rotation="-90 0 0" width="4" height="4" color="#7BC8A4"></a-plane>
</a-scene>
</div>
</template>
<style>
@media only screen and (min-width: 640px) {
#aframe-window {
width: 640px;
height: 320px;
margin-left: auto;
margin-right: auto;
}
}
@media only screen and (max-width: 640px) {
#aframe-window {
width: 320px;
height: 320px;
margin-left: auto;
margin-right: auto;
}
}
</style>
<script>
export default {
name: 'AframeWindow'
}
</script>
로컬 서버 시작
상기 파일을 저장한 후 다음 명령을 실행합니다
yarn run serve
컴퓨터와 Oculus Go가 같은 공유기에 연결되었을 때
Network의 주소는 Oculus Go의 브라우저에서 열 수 있다.스크립트 파일을 저장할 때마다 자동으로 구축 + 브라우저가 다시 불러오기 때문에 빠른 개발을 할 수 있습니다.
DONE Compiled successfully in 1179ms
App running at:
- Local: http://localhost:8080/
- Network: http://192.168.***.***:8080/
Aframe 개발에 Vue를 사용하는 장점은?
이번엔 시간이 없어서 설명을 못했지만 Aframe에서 Vue를 개발한 이유로는
또 Aframe과 Vue의 문서도 풍부해 참고가 어려운 점도 드물다.
Vue에 대해서는 참조여기.가 이해하기 쉬울 수 있습니다.
Reference
이 문제에 관하여(Aframe+Vue를 사용하여 OculusGo에서 WebVR을 사용하기 시작합니다.), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://qiita.com/blkcatman/items/2c1c8a5e021eb33ea6c6텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
좋은 웹페이지 즐겨찾기
