mpmckenna8/cuber.js

## readme.md

      
    Raw
  

              readme.md
            
          
    This is from the intro to threejs docs creating a scene. In the tutorial I was working on I was using CubeGeometry which I think now doesn't work and BoxGeometry works.

  
## cuber.js
// doing the example from the Docs to learn

var scene = new THREE.Scene();

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

var renderer = new THREE.WebGLRenderer();


renderer.setSize( window.innerWidth, window.innerHeight );

// tried this a little different from the example in docs
document.getElementById("webgl-container").appendChild(renderer.domElement);


//  This is where introtowebgl uses CubeGeometry
var geometry = new THREE.BoxGeometry(1,1,1);

var material = new THREE.MeshBasicMaterial({color:0x00ff20});

var cube = new THREE.Mesh(geometry,material);

console.log(cube.rotation);

scene.add(cube);

camera.position.z = 3;

function render (){
  requestAnimationFrame(render);
  cube.rotation.x +=.01;
  cube.rotation.y += .04;


  renderer.render(scene,camera);
}
render();

//console.log(this)
/*

	var scene = new THREE.Scene();
					var camera = new THREE.PerspectiveCamera( 75, window.innerWidth/window.innerHeight, 0.1, 1000 );

					var renderer = new THREE.WebGLRenderer();
					renderer.setSize( window.innerWidth, window.innerHeight );
					document.body.appendChild( renderer.domElement );

					var geometry = new THREE.CubeGeometry( 1, 1, 1 );
					var material = new THREE.MeshBasicMaterial( { color: 0x00ff00 } );
					var cube = new THREE.Mesh( geometry, material );
					scene.add( cube );

					camera.position.z = 5;

					var render = function () {
						requestAnimationFrame( render );

						cube.rotation.x += 0.1;
						cube.rotation.y += 0.1;

						renderer.render(scene, camera);
					};

					render();

*/

## 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="cuber.js"></script>

    </body>

</html>
	// doing the example from the Docs to learn

	var scene = new THREE.Scene();

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

	var renderer = new THREE.WebGLRenderer();


	renderer.setSize( window.innerWidth, window.innerHeight );

	// tried this a little different from the example in docs
	document.getElementById("webgl-container").appendChild(renderer.domElement);


	// This is where introtowebgl uses CubeGeometry
	var geometry = new THREE.BoxGeometry(1,1,1);

	var material = new THREE.MeshBasicMaterial({color:0x00ff20});

	var cube = new THREE.Mesh(geometry,material);

	console.log(cube.rotation);

	scene.add(cube);

	camera.position.z = 3;

	function render (){
	requestAnimationFrame(render);
	cube.rotation.x +=.01;
	cube.rotation.y += .04;


	renderer.render(scene,camera);
	}
	render();

	//console.log(this)
	/*

	var scene = new THREE.Scene();
	var camera = new THREE.PerspectiveCamera( 75, window.innerWidth/window.innerHeight, 0.1, 1000 );

	var renderer = new THREE.WebGLRenderer();
	renderer.setSize( window.innerWidth, window.innerHeight );
	document.body.appendChild( renderer.domElement );

	var geometry = new THREE.CubeGeometry( 1, 1, 1 );
	var material = new THREE.MeshBasicMaterial( { color: 0x00ff00 } );
	var cube = new THREE.Mesh( geometry, material );
	scene.add( cube );

	camera.position.z = 5;

	var render = function () {
	requestAnimationFrame( render );

	cube.rotation.x += 0.1;
	cube.rotation.y += 0.1;

	renderer.render(scene, camera);
	};

	render();

	*/
	<!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="cuber.js"></script>

	</body>

	</html>