First, you will need to get a copy of the glam JS library. Here is where I found mine.
Next you will need to create a "viewport", import the library and add a container with a glam scene.
If you are working with cardboard, you will need to import the renderer and the controller. If you just want to look at the 3D scene on a webpage, you can comment these lines out. Be warned, though - sometimes the cardboard orientation can be different than that of the browser.
Here is hello world in GLAM working on a cardboard device:
<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>
#helloText {
diffuse-color:cornflowerblue;
}
</style>
</head>
<body>
<div id="container" style="width: 100%; height: 100%; position: absolute;">
<glam>
<scene>
<renderer type="cardboard"></renderer>
<controller type="deviceOrientation"></controller>
<group z="-3">
<text id="helloText" value="hello, world"></text>
</group>
</scene>
</glam>
</div>
</body>
</html>
http://vrambling.com/helloworld.html
Background reading:
http://tparisi.github.io/glam/docs/#Manual/Key_Concepts/Key_concepts
No comments:
Post a Comment