Hello World in GLAM


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