Skip to content

Instantly share code, notes, and snippets.

@ryosuzuki

ryosuzuki/aframe-sample-1.html

Created April 18, 2019 23:48
Show Gist options
  • Save ryosuzuki/45135f3b3470fef41f7a2174caf5da53 to your computer and use it in GitHub Desktop.
Save ryosuzuki/45135f3b3470fef41f7a2174caf5da53 to your computer and use it in GitHub Desktop.
Download ZIP
Raw
aframe-sample-1.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>A-Frame Examples</title>
<script src="https://aframe.io/releases/0.9.1/aframe.min.js"></script>
</head>
<body>
<a-scene>
<a-assets>
<img src="http://i.imgur.com/7YnjGfI.png" id="square" crossorigin="anonymous">
<img src="http://i.imgur.com/vxesSQm.png" id="circle" crossorigin="anonymous">
<img src="http://i.imgur.com/EdymqIg.png" id="cross" crossorigin="anonymous">
</a-assets>
<a-sky color="#ECECEC"></a-sky>
<a-entity id="square">
<a-plane id="square0" cursor-listener src="#square" position="-1 0 -1" rotation="-90 0 0" width="1" height="1" color="#EEEEEE"></a-plane>
<a-plane id="square1" cursor-listener src="#square" position="-1 0 0" rotation="-90 0 0" width="1" height="1" color="#EEEEEE"></a-plane>
<a-plane id="square2" cursor-listener src="#square" position="-1 0 1" rotation="-90 0 0" width="1" height="1" color="#EEEEEE"></a-plane>
<a-plane id="square3" cursor-listener src="#square" position="0 0 -1" rotation="-90 0 0" width="1" height="1" color="#EEEEEE"></a-plane>
<a-plane id="square4" cursor-listener src="#square" position="0 0 0" rotation="-90 0 0" width="1" height="1" color="#EEEEEE"></a-plane>
<a-plane id="square5" cursor-listener src="#square" position="0 0 1" rotation="-90 0 0" width="1" height="1" color="#EEEEEE"></a-plane>
<a-plane id="square6" cursor-listener src="#square" position="1 0 -1" rotation="-90 0 0" width="1" height="1" color="#EEEEEE"></a-plane>
<a-plane id="square7" cursor-listener src="#square" position="1 0 0" rotation="-90 0 0" width="1" height="1" color="#EEEEEE"></a-plane>
<a-plane id="square8" cursor-listener src="#square" position="1 0 1" rotation="-90 0 0" width="1" height="1" color="#EEEEEE"></a-plane>
</a-entity>
<a-camera position="0 2 5" id="player1">
<a-cursor></a-cursor>
<a-box color="#998877"></a-box>
</a-camera>
</a-scene>
</body>
<script type="text/javascript">
function click_square(square_id) {
var image = "#circle";
document.querySelector("#" + square_id).setAttribute("src", image);
}
AFRAME.registerComponent('cursor-listener', {
init: function () {
this.el.addEventListener("click", function (evt) {
click_square(this.id);
})
}
})
</script>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment