indexStart.html


<html>
    <head>
        <title>IndexStart</title>
    </head>
    <body>
        <script src="js/three.min.js"></script>
        <script>

            function buildScene(){
                return new THREE.Scene();
            }

            function setRenderer(){
                var renderer = new THREE.WebGLRenderer();
                renderer.setSize(window.innerWidth, window.innerHeight);
                document.body.appendChild(renderer.domElement);
                return renderer;
            }

            function setCamera () {
                var view_angle = 45;
                var aspect = window.innerWidth / window.innerHeight;
                var near = 0.1;
                var far = 10000;
                var camera = new THREE.PerspectiveCamera(view_angle, aspect, near, far);
                camera.position.z = 500;
                return camera;
            }

            function cube(size){
                this.width = size;
                this.height = size;
                this.depth = size;

                this.buildCube = function(){
                    var geometry = new THREE.BoxGeometry(this.width, this.height, this.depth);

                    var material = new THREE.MeshLambertMaterial(
                    {
                      wireframe: true
                    });
                    
                    this.model = new THREE.Mesh(geometry, material);
                    scene.add(this.model);
                }

                this.updatePosition = function(){
                    //move cube along x-axis
                    //this.model.position.x += 1;

                    //rotate box around x axis
                    //this.model.rotation.y += .1;
                }
            }

            function init() {
                scene = buildScene();
                renderer = setRenderer();
                camera = setCamera(); 

                //add cube
                cube1 = new cube(50);
                cube1.buildCube();

                //add light
                //var light = new THREE.AmbientLight( 0xFFFFFF );
                //scene.add( light );  

                //draw scene
                render();
            }

            //this creates a loop that runs every 60th of a sec
            function render() {
                renderer.render(scene, camera);
                requestAnimationFrame(render);
                //cube1.updatePosition();
            }

            var scene, renderer, camera, cube1;

            init();
            
        </script>
    </body>
</html>