BoilerGL

A simple boiler plate for those of us new to webgl.

Just grab a copy here: https://github.com/GSPBetaGroup/BoilerGL and get started by removing the default geometries.

You have two functions at the top of the script. One to “init” the experience:

[pastacode lang=”javascript” message=”” highlight=”” provider=”manual”]

/**
             * Init the page with defaults. Add your objects to the scene here. All the initialization is take care of.
             * 
             * By default, the scene initializes with mouse movement & click events. The scene animates with a fly in
             * and has user controls centered around (0,0,0).
             * 
             * @returns {undefined}
             */
            function init() {
                
                // ADD YOUR THINGS HERE
                
                // box
                var geometry = new THREE.BoxGeometry( 300, 300, 300 );
                var material = new THREE.MeshLambertMaterial( { color: 0x00FF00 } );
                var mesh = new THREE.Mesh( geometry, material );
                scene.add( mesh );
                interactiveObjects.push(mesh);
                objects.push(mesh);
                
                // sphere
                var geometry = new THREE.SphereGeometry( 50, 32, 32 );
                var material = new THREE.MeshBasicMaterial( {color: 0xffff00} );
                var sphere = new THREE.Mesh( geometry, material );
                sphere.position.x = 500;
                sphere.position.y = 500;
                scene.add( sphere );
                interactiveObjects.push(sphere);
                objects.push(sphere);
                
            }

[/pastacode]

You can see I’ve added a box and a sphere here, by default. Feel free to remove these. Then, a second function called “loop” where you can control the animations of the items:

[pastacode lang=”javascript” message=”” highlight=”” provider=”manual”]

/**
             * Tween is where you define your behavior. By default the scene automatically calls this function
             * every animation frame.
             * 
             * @returns {undefined}
             */
            function loop() {
                count += .001;
                for (var i = 0; i < objects.length; i++) {
                    var o = objects[i]
                    if (i % 3 == 0)
                        o.position.x += Math.sin(i + count) / 2
                    if (i % 3 == 1)
                        o.position.y += Math.cos(i + count) / 2
                    if (i % 3 == 2)
                        o.position.z += Math.cos(3 * i + count) / 2
                };
                
            }

[/pastacode]

You can see here, I’m the objects above are gently floating, but you can remove this as well!

That’s it. Two functions, should be fairly easy to get started now.

Thanks to Marpi for contributing the initial code to get this started. I simply re-worked his code to make it easier to use.