Skip to content

Instantly share code, notes, and snippets.

@dirkk0

dirkk0/gist:5d3647794d3d46aa671f36ff54692692

Created October 24, 2019 09:14
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save dirkk0/5d3647794d3d46aa671f36ff54692692 to your computer and use it in GitHub Desktop.
Save dirkk0/5d3647794d3d46aa671f36ff54692692 to your computer and use it in GitHub Desktop.
Download ZIP
minimal-quest.html
Raw
gistfile1.txt
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>minimal example</title>
<link rel="icon" href="data:;base64,iVBORw0KGgo=">
<script src="https://aframe.io/releases/0.9.2/aframe.min.js"></script>
<script src="https://unpkg.com/aframe-environment-component@1.1.0/dist/aframe-environment-component.min.js"></script>
<script>
AFRAME.registerComponent('examples', {
init: function () {
this.el.addEventListener('raycaster-intersected', evt => {
this.raycaster = evt.detail.el;
});
this.el.addEventListener('raycaster-intersected-cleared', evt => {
this.raycaster = null;
});
this.el.addEventListener('mouseenter', evt => {
this.el.getObject3D('mesh').material.opacity = 0.6
});
this.el.addEventListener('mouseleave', evt => {
this.el.getObject3D('mesh').material.opacity = 0.2
});
this.el.addEventListener('mousedown', evt => {
console.log("click")
});
},
tick: function () {
if (!this.raycaster) { return; } // Not intersecting.
let intersection = this.raycaster.components.raycaster.getIntersection(this.el);
if (!intersection) { return; }
// console.log(intersection.point);
}
});
</script>
</head>
<body>
<a-scene renderer="gammaOutput: false" background="color: lightblue;">
<a-entity position="0 0 0" id="cameraRig">
<a-entity id="head" camera wasd-controls="" look-controls position="0 1.6 0">
</a-entity>
<a-entity id="ctlL"
teleport-controls="cameraRig: #cameraRig; teleportOrigin: #head; startEvents: teleportstart; endEvents: teleportend"
raycaster="objects: .collidable; far:40.2;" laser-controls="hand: left" input-listen>
</a-entity>
<a-entity id="ctlR" raycaster="objects: .collidable; far:40.2;" laser-controls="hand: right" input-listen>
</a-entity>
<a-entity id="mouseCursor" cursor="rayOrigin: mouse" raycaster="objects: .collidable">
</a-entity>
</a-entity>
<a-entity environment="preset: tron; dressingAmount: 0; playArea: 10"></a-entity>
<a-entity examples class="collidable" geometry="primitive: box;"
material="side: double; color: #0000ff; transparent: true; opacity: 0.3" position="0 0 -3" scale="0.5 0.1 0.5">
</a-entity>
</a-scene>
<script>
document.querySelector('a-scene').addEventListener('loaded', function () {
console.log("scene loaded")
})
</script>
</body>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment