WebVR is a JavaScript API for creating immersive 3D, Virtual Reality experiences in your browser.
Det finns inget stöd för iOS/Safari alls.
I undermapparna i detta repo ligger koden för de bÄda hemsidorna pÄ min hemsida
- https://jesperorb.com/vr
- VR implementerat med
A-FRAME
- VR implementerat med
- https://jesperorb.com/react-vr
- VR implementerat med
ReactVR
- VR implementerat med
Enable WebVR: Chrome for Android
Om du har stöd för Google Cardboard och ska anvÀnda Google Cardboard sÄ borde du ha en liten ikon i högra hörnet:
Samt om du trycker pÄ ikonen sÄ borde du fÄ följande vy, denna vy Àr till för om du har ett VR-headset. Annars anvÀnd vanliga vyn:
A-FRAME- Dokumentation för A-FRAME
A-FRAMEexamples- Besök nÄgon av dessa exempel i antingen en webblÀsare som stödjer WebVR eller i en mobil dÀr du har ordnat WebVR.
ReactVR- Dokumentationen för ReactVR, bristfÀllig dock.
ReactVRexperiments- Ett GitHub-repo med olika exempel som anvÀnder bÄde ReactVR samt A-FRAME
Kopiera koden och lÀgg den i en index.html. GÄ till din index.html via localhost (Viktigt, servera inte via file://). Starta din localhost via t.ex. MAMP/WAMP etc.
Kod:
<html>
<head>
<!-- Include the library -->
<script src="https://aframe.io/releases/0.6.1/aframe.min.js"></script>
</head>
<body>
<a-scene>
<!--Create a box: x, y, z. -4 means in front of you, 1 means up -->
<a-box color="#EF2D5E" position="0 1 -4"></a-box>
<a-camera>
<a-cursor></a-cursor> <!-- Our cursor for pointing, onhover etc -->
</a-camera>
</a-scene>
</body>
</html>Byt fÀrg pÄ box med event-set-component
<html>
<head>
<!-- Include the library -->
<script src="https://aframe.io/releases/0.6.1/aframe.min.js"></script>
<!-- Event set component, easier handling of simple events -->
<script src="https://unpkg.com/aframe-event-set-component@3.0.3/dist/aframe-event-set-component.min.js"></script>
</head>
<body>
<a-scene>
<a-box color="#ec4570"
position="0 2 -3"
rotation="0 45 45"
event-set__enter="_event: mouseenter; color: #f1e455"
event-set__leave="_event: mouseleave; color: #ec4570">
</a-box>
<a-camera>
<a-cursor></a-cursor>
</a-camera>
</a-scene>
</body>
</html>Ovan Àr bara en statisk hemsida, du kan anvÀnda GitHub Pages för att lÀgga upp dessa sidor.
Ett annat enkelt sÀtt att lÀgga upp en sida förutom Github Pages Àr now. Denna tjÀnst kan vi Àven anvÀnda senare nÀr vi ska lÀgga upp vÄr react-app.
Installera now via terminalen/kommandotolken
npm i -g now-cli- Kopiera exempelkoden ovan och skapa en
index.htmli valfri mapp.cdin i den mappen dÀr dina filer ligger och kör följande kommando:
now
- Slutför login-proceduren som kommer upp och efter den sÄ borde du fÄ tillbaka en URL i terminalen. Kopiera den URLen och klistra in i webblÀsaren, DONE.