어떻게 a 프레임워크를 이용하여 웹 VR 게임을 구축합니까
25597 단어 tutorialjavascriptbeginnersaframe
🕹️ Play the game
💻 Git repository
➡️ 몇 달 전에 나는 나의 첫 번째 MR 이어폰을 받았다.극객으로서 나는 매우 흥분하여 그것을 가지고 놀기 시작했다.얼마 지나지 않아, 나는 코드 작성과 관련된 것들을 구축해야 한다고 느꼈다.
여러 해 동안, 나는 줄곧 백엔드 개발을 하고 있으며, 현재의 백엔드 개발 작업 방식에 대해 아무것도 모른다.CSS에 대한 나의 기억은 90퍼센트의 낙담과 10퍼센트의 해탈을 포함한다.
하지만 내 친구도 궁금해서 조사를 하기로 했다.
우리는 함께 모여 좋은 커피를 한 잔 마시고 과자를 먹고 컴퓨터를 놓고 책을 읽기 시작했다.우리는 A형 프레임을 시험해 보기로 결정했다.몇 시간이 지나자 우리는 회전gltf 모형과 게임 장면이 하나 생겼다.경탄했어그날 우리는 많은 것을 배웠기 때문에 지역 사회와 우리의 발견을 공유하겠다고 약속했다.우리는 발렌타인데이를 위해 모임을 마련했다.그러나 우리는 게임을 설계하는 데 아무런 경험이 없다.사고를 통해 우리는 간단함을 유지하기로 결정했다.우리는 손짓으로 게임을 설계하여 붉은 마음을 모았다.이것은 최종 결정이다.우리는 실시간 인코딩 세션을 안배했다.여기서 우리는 세계의 모든 개발자들이 간단한 웹MR 게임을 구축하는 방법을 보여 준다.우리는 장면과 회전하는 마음, 분수, 그리고 마음을 모으는 자세를 세울 것이다.추가 향료에 대해서는 수집된 심장마다 다른 심장이 무작위로 튀어나오는 무한한 게임이 될 것이다.
잠깐만, WebVR이나 WebMR이 뭐예요?
아디 폴라크
👩🎓👨🎓 웹 VR 규범, 브라우저에서 체험할 수 있습니다.목표는 당신이 어떤 설비를 가지고 있든지 간에 모든 사람이 더욱 쉽게 체험에 들어갈 수 있도록 하는 것이다.일부 도구: 가상현실, @Sketchfa 등등!
2019년 3월 11일 오후 22:30
일.
팔.
흥분했어?우리 시작합시다!
선행 조건:
Visual Studio code (VScode)-VS 코드
mkdir valentines_game
cd valentines_game
npm init -g
로컬 기기에서 게임을 디버깅하기 위해서는 서버를 설정해야 하기 때문에 가방을 열어야 합니다.json 파일 및 업데이트 스크립트는 다음과 같습니다.
"scripts": {
"start": "live-server web"
}
npm start 을 사용하고 로컬 기기에서 게임을 디버깅할 수 있도록 확보할 것이다.다음을 실행합니다.
npm install
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>MR Valentines</title>
<script src="https://aframe.io/releases/0.9.2/aframe.min.js"></script>
<script src="https://rawgit.com/feiss/aframe-environment-component/master/dist/aframe-environment-component.min.js"></script>
</head>
</html>
npm start
<body>
<a-scene>
<a-entity environment="preset:japan"></a-entity>
</a-scene>
</body>
다음은 애니메이션 모형: 심장.다운로드Heart model.
압축 파일의 압축을 풀다.프로젝트 디렉터리에bin과gltf 파일을 넣으십시오.다음은 하트 태그를 추가합니다.
<a-entity id="heart-model" gltf-model="Heart.gltf" position="0 1.5 -5"
scale="0.01 0.01 0.01" >
</a-entity>
애니메이션을 추가합니다.
예시와 같이 애니메이션 기능을 추가합니다.startEvents를 "collected"로 명명합니다.Collected는 애니메이션을 시작하는 데 사용할 자극 이벤트의 이름입니다.
<a-entity id="heart-model" gltf-model="Heart.gltf" position="0 1.5 -5"
scale="0.01 0.01 0.01"
animation="property: rotation; to: 0 360 0; loop: true; easing: linear; dur: 2000"
animation__collect="property: position; to: 0 0 0; dur: 300; startEvents: collected"
animation__minimize="property: scale; to: 0 0 0; dur: 300; startEvents: collected">
</a-entity>
카메라 태그에 텍스트 태그를 추가합니다.이렇게 하면 사용자는 여러 각도에서 그것을 볼 수 있다.다음으로 심장을 수집하려면 커서를 추가하십시오.
<a-camera>
<a-text id="score-element" value="Score" position="-0.35 0.5 -0.8"></a-text>
<a-cursor></a-cursor>
</a-camera>
게임으로 명명된 파일을 만듭니다.js와 html 파일의 또 다른 html 태그:
<script src="game.js"></script>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>MR Valentines</title>
<script src="https://aframe.io/releases/0.9.2/aframe.min.js"></script>
<script src="https://rawgit.com/feiss/aframe-environment-component/master/dist/aframe-environment-component.min.js"></script>
</head>
<body>
<a-scene>
<a-camera>
<a-text id="score-element" value="Score" position="-0.35 0.5 -0.8"></a-text>
<a-cursor></a-cursor>
</a-camera>
<a-entity environment="preset:japan"></a-entity>
<a-entity laser-controls></a-entity>
</a-scene>
<a-entity id="heart-model" gltf-model="Heart.gltf" position="0 1.5 -5"
scale="0.01 0.01 0.01"
animation="property: rotation; to: 0 360 0; loop: true; easing: linear; dur: 2000"
animation__collect="property: position; to: 0 0 0; dur: 300; startEvents: collected"
animation__minimize="property: scale; to: 0 0 0; dur: 300; startEvents: collected"></a-entity>
<script src="game.js"></script>
</body>
</html>
const sceneEl = document.querySelector("a-scene")
const heartEl = document.querySelector("#heart-model")
const scoreEl = document.querySelector("#score-element");
let score = 0;
function displayScore() {
scoreEl.setAttribute('value', `Score: ${score}`);
}
function randomPosition() {
return {
x: (Math.random() - 0.5) * 20,
y: 1.5,
z: (Math.random() - 0.5) * 20
};
}
function createHeart(){
const clone = heartEl.cloneNode()
clone.setAttribute("position", randomPosition())
clone.addEventListener('mousedown', () => {
score++;
clone.dispatchEvent(new Event('collected'));
displayScore();
})
clone.addEventListener('animationcomplete', () => {
clone.setAttribute("position", randomPosition());
clone.setAttribute('scale', '0.01 0.01 0.01');
});
sceneEl.appendChild(clone)
}
for(let i=0 ; i<15; i++){
createHeart()
}
const sceneEl = document.querySelector("a-scene")
const heartEl = document.querySelector("#heart-model")
const scoreEl = document.querySelector('#score-element');
function randomPosition() {
return {
x: (Math.random() - 0.5) * 20,
y: 1.5,
z: (Math.random() - 0.5) * 20
};
}
let score = 0;
function displayScore() {
scoreEl.setAttribute('value', `Score: ${score}`);
}
function createHeart(){
const clone = heartEl.cloneNode()
clone.setAttribute("position", randomPosition())
clone.addEventListener('mousedown', () => {
score++;
clone.dispatchEvent(new Event('collected'));
displayScore();
})
clone.addEventListener('animationcomplete', () => {
clone.setAttribute("position", randomPosition());
clone.setAttribute('scale', '0.01 0.01 0.01');
});
sceneEl.appendChild(clone)
}
for(let i=0 ; i<15; i++){
createHeart()
}
displayScore()
너는 거의 완성했다.배포:
프로젝트 내에서 프로젝트와 같은 이름의 다른 폴더를 만듭니다.모든 항목 파일을 이동합니다.VScode에서 프로젝트 라이브러리로 이동하여 웹 디렉터리를 오른쪽 단추로 클릭하고 정적 사이트에 배치하는 것을 선택하십시오.Gen2 스토리지를 보유하고 있는지 확인합니다.
구독하고 만든 저장 계정을 선택하십시오.VScode를 사용하여 새 스토리지 계정을 생성할 수도 있습니다.완료되면 Azure 포털로 이동하여 웹 사이트 URL을 복사합니다.그것은 마땅히 이렇게 해야 한다.
또 다른 예는 개인 블로그다.여기를 클릭하십시오.
아디 폴라크
🔥마지막으로 저의 개인 원형 사이트는 HTML을 사용하고 준비합니다!봐봐-->buff.ly/2tXQrXV 블로그에 필요한 다음 일은'나에 관한 것'인데 어떻게 할 거예요?
17:2019년 3월 11일 오후 22시
삼.
십이
icrosoft Azure 클라우드가 있으면 친구와 게임을 공유할 수 있습니다.그것 없이도 로컬에서 실행하거나 다른 플랫폼에서 위탁 관리할 수 있습니다.
이 게임은 합작하여 개발한 것이다.
Reference
이 문제에 관하여(어떻게 a 프레임워크를 이용하여 웹 VR 게임을 구축합니까), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://dev.to/azure/how-to-build-a-webvr-game-with-a-frame-4ifg텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
좋은 웹페이지 즐겨찾기
