The power of HTML is hyperlinking, and although it is not nearly as simple as typing <a href=""/>, it isn't very hard to do. This is GLAM's best feature.
First, let's start off with some simple cubes.
<html>
<head>
<meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
<script src="glam.min.js" ></script>
<style>
body{
margin: 0px;
background-color: #ffffff;
}
#redCube {
diffuse-color:red;
}
#blueCube {
diffuse-color:blue;
}
#greenCube {
diffuse-color:green;
}
</style>
</head>
<body>
<div id="container" style="width: 100%; height: 100%; position: absolute;">
<glam>
<scene>
<renderer type="cardboard"></renderer>
<controller type="deviceOrientation"></controller>
<box id="redCube" z="-9" rx="45deg"></box>
<box id="blueCube" x="-9" rx="45deg"></box>
<box id="greenCube" x="+9" rx="45deg"></box>
</scene>
</glam>
</div>
</body>
</html>
What we want to do here is add a javascript event listener to the red box. The first step is to add an event listener on load, so that we call the script after all the page elements have loaded.
window.addEventListener('load', function(){
glam.ready();
scene = document.getElementsByTagName('scene')[0];
addLinkListener()
}, false);
Then we create the addLinkListener() method, which will set up the events on the redCube object. GLAM has two events, "viewover" and "viewout" which are called when the object is in the centre of the view. We will use this to put the object into a selectedLink variable whenever it is looked at inside cardboard.
var selectedLink = null;
function addLinkListener() {
redCube = document.getElementById('redCube');
console.log('redCube: ' + redCube);
redCube.href = 'http://vrambling.com/helloworld.html'
redCube.addEventListener("viewover", function(event) {
console.log('redCube viewover');
selectedLink = redCube;
});
redCube.addEventListener("viewout", function(event) {
console.log('redCube viewout');
selectedLink = null;
});
}
I have added console.log statements for debugging purposes. Best to remove them after all of your testing is finished. As you can see, we assign an "href" property to the object which we will use to navigate.
Finally, we will add a touchstart event to the window to detect the cardboard touch event.
var canvas = glam.Graphics.instance.renderer.domElement;
canvas.addEventListener("touchstart", function(event) {
console.log('click on window, selected link: ' + selectedLink);
if (selectedLink != null && selectedLink.href != null) {
window.location.href = selectedLink.href;
}
});
Here is the finished code, with a working link on the red box:
<html>
<head>
<meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
<script src="glam.min.js" ></script>
<style>
body{
margin: 0px;
background-color: #ffffff;
}
#redCube {
diffuse-color:red;
}
#blueCube {
diffuse-color:blue;
}
#greenCube {
diffuse-color:green;
}
</style>
<script>
var selectedLink = null;
window.addEventListener('load', function(){
glam.ready();
scene = document.getElementsByTagName('scene')[0];
var canvas = glam.Graphics.instance.renderer.domElement;
canvas.addEventListener("touchstart", function(event) {
console.log('click on window, selected link: ' + selectedLink);
if (selectedLink != null && selectedLink.href != null) {
window.location.href = selectedLink.href;
}
});
addLinkListener()
}, false);
function addLinkListener() {
redCube = document.getElementById('redCube');
console.log('redCube: ' + redCube);
redCube.href = 'http://vrambling.com/helloworld.html'
redCube.addEventListener("viewover", function(event) {
console.log('redCube viewover');
selectedLink = redCube;
});
redCube.addEventListener("viewout", function(event) {
console.log('redCube viewout');
selectedLink = null;
});
}
</script>
</head>
<body>
<div id="container" style="width: 100%; height: 100%; position: absolute;">
<glam>
<scene>
<renderer type="cardboard"></renderer>
<controller type="deviceOrientation"></controller>
<box id="redCube" z="-9" rx="45deg"></box>
<box id="blueCube" x="-9" rx="45deg"></box>
<box id="greenCube" x="+9" rx="45deg"></box>
</scene>
</glam>
</div>
</body>
</html>
