Skip to content

Instantly share code, notes, and snippets.

@py7hon

py7hon/example.md

Created December 2, 2021 17:00
Show Gist options
  • Save py7hon/706062789a3f1a1974d9876d467b43bd to your computer and use it in GitHub Desktop.
Save py7hon/706062789a3f1a1974d9876d467b43bd to your computer and use it in GitHub Desktop.
Download ZIP
Simple WebVR/XR
Raw
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Virtual Space</title>
<!-- A-Frame Imports -->
<script src="https://aframe.io/releases/1.2.0/aframe.min.js"></script>
<script src="https://cdn.jsdelivr.net/gh/donmccurdy/aframe-extras@v6.1.0/dist/aframe-extras.min.js"></script>
<script src="https://unpkg.com/aframe-environment-component@1.2.0/dist/aframe-environment-component.min.js"></script>
<script src="https://unpkg.com/aframe-event-set-component@5.0.0/dist/aframe-event-set-component.min.js"></script>
<script src="https://unpkg.com/aframe-websurfaces@1.4.0/dist/aframe-websurfaces.umd.js"></script>
<script src="https://cdn.rawgit.com/kripken/ammo.js/dcab07bf0e7f2b4b64c01dc45da846344c8f50be/builds/ammo.js"></script>
<!-- MMD -->
<!--<script src="https://cdn.rawgit.com/takahirox/aframe-outline/v1.1.1/build/aframe-outline.min.js"></script>
<script src="https://cdn.rawgit.com/takahirox/a-mmd/v1.0.3/build/a-mmd.min.js"></script> -->
</head>
<body>
<script type="text/javascript">
AFRAME.registerComponent('navigate-on-click', {
schema: {
url: {default: ''}
},
init: function () {
var data = this.data;
var el = this.el;
el.addEventListener('click', function () {
window.open(data.url, '_blank');
});
}
});
</script>
<a-scene
light="defaultLightsEnabled: true"
shadow
>
<a-assets>
</a-assets>
<!-- <a-assets mmd="audio:./audios/audio.mp3;" timeout="10000">
<a-asset-item id="purpleheart" mmd-model="model:./models/model.pmd;"></a-asset-item>
</a-assets> -->
<!-- Shadow Light -->
<a-entity
light="
type: point;
castShadow: true;
intensity: 0.6;
shadowCameraVisible: false;
"
position="0 5 3"
rotation="0 40 0">
</a-entity>
<!-- No Shadow Light -->
<!--<a-light type="point" position="0 0 0" rotation="0 20 0" target="#directionaltarget" intensity="0.75">
<a-entity id="directionaltarget" position="0 5 3"></a-entity>
</a-light>-->
<a-entity
environment="preset: tron;"
lighting="true"
shadow="true"
fog="1"
ground="hills"
skyType="atmosphere"
></a-entity>
<a-entity
camera="active: true"
mouse-cursor
look-controls
wasd-controls="acceleration: 20;"
position="0 2 0"
cursor="rayOrigin: mouse"
>
</a-entity>
<a-entity position="-20 1 -20" gltf-model="#earth" animation-mixer></a-entity>
<a-entity websurface="url:https://www.youtube.com/embed/Xh2DEUUR7QU; width:4; height:2;" scale="1.5 1.5" position="1 4 -3" rotation="45 0 0"></a-entity>
</a-scene>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment