mpmckenna8/chicube.js

## chicube.js
var demo = (function(){

    "use strict";

    var scene=new THREE.Scene(),
        light= new THREE.AmbientLight(0xffffff),
        renderer,
        camera,
        renderer = new THREE.WebGLRenderer(),
        box,
        ground,
        controls=null;

        function initScene(){

            renderer.setSize( window.innerWidth, window.innerHeight );
            document.getElementById("webgl-container").appendChild(renderer.domElement);

            scene.add(light);

            camera = new THREE.PerspectiveCamera(
                    35,
                    window.innerWidth / window.innerHeight,
                    1,
                    1000
                );

            camera.position.set( 0, 0, 100 );

            scene.add(camera);

            box = new THREE.Mesh(
              new THREE.BoxGeometry(
                20,
                20,
                20),
              new THREE.MeshBasicMaterial({color: 0xFF0000}));

            scene.add(box);

            var childBox = new THREE.Mesh(
              new THREE.BoxGeometry(29,29,20),
              new THREE.MeshBasicMaterial({color:0x00FF00})
            );

            childBox.position.x = 30;


            box.add(childBox);


            console.log(childBox.position)

console.log(box.children);


            requestAnimationFrame(render);

        };

var keep = true;
function movebox() {
if(keep){
  if(box.position.x>-55){
        box.position.x -= .05;
        //console.log(box.position.x)
      }
      else{
        keep = false;

      }
    }
else{
  if(box.position.x<55){
    box.position.x += .05;
  }
  else{
    keep = true;
  }
}

      };


        function render() {
                renderer.render(scene, camera);
                box.rotation.x +=.01;
                box.rotation.y += .04;
                movebox();
                requestAnimationFrame(render);
        };

        window.onload = initScene;

})();

## index.html
<!DOCTYPE html>

<html>

    <head>
        <title>Intro to WebGL with three.js</title>
    </head>

    <body>

        <div id="webgl-container"></div>

        <script src="//cdnjs.cloudflare.com/ajax/libs/three.js/r68/three.js"></script>
        <script src="chicube.js"></script>

    </body>

</html>
	var demo = (function(){

	"use strict";

	var scene=new THREE.Scene(),
	light= new THREE.AmbientLight(0xffffff),
	renderer,
	camera,
	renderer = new THREE.WebGLRenderer(),
	box,
	ground,
	controls=null;

	function initScene(){

	renderer.setSize( window.innerWidth, window.innerHeight );
	document.getElementById("webgl-container").appendChild(renderer.domElement);

	scene.add(light);

	camera = new THREE.PerspectiveCamera(
	35,
	window.innerWidth / window.innerHeight,
	1,
	1000
	);

	camera.position.set( 0, 0, 100 );

	scene.add(camera);

	box = new THREE.Mesh(
	new THREE.BoxGeometry(
	20,
	20,
	20),
	new THREE.MeshBasicMaterial({color: 0xFF0000}));

	scene.add(box);

	var childBox = new THREE.Mesh(
	new THREE.BoxGeometry(29,29,20),
	new THREE.MeshBasicMaterial({color:0x00FF00})
	);

	childBox.position.x = 30;



	box.add(childBox);



	console.log(childBox.position)

	console.log(box.children);


	requestAnimationFrame(render);

	};

	var keep = true;
	function movebox() {
	if(keep){
	if(box.position.x>-55){
	box.position.x -= .05;
	//console.log(box.position.x)
	}
	else{
	keep = false;

	}
	}
	else{
	if(box.position.x<55){
	box.position.x += .05;
	}
	else{
	keep = true;
	}
	}

	};


	function render() {
	renderer.render(scene, camera);
	box.rotation.x +=.01;
	box.rotation.y += .04;
	movebox();
	requestAnimationFrame(render);
	};

	window.onload = initScene;

	})();
	<!DOCTYPE html>

	<html>

	<head>
	<title>Intro to WebGL with three.js</title>
	</head>

	<body>

	<div id="webgl-container"></div>

	<script src="//cdnjs.cloudflare.com/ajax/libs/three.js/r68/three.js"></script>
	<script src="chicube.js"></script>

	</body>

	</html>