casual design – design is casual

rotating cube

May 25th, 2013 by brooks

Type of thing: 3d web webgl

four and a half years since rotating plane.

be sure jquery and three.js are included.

$(document).ready(function(){

var WIDTH = 605,
HEIGHT = 400;

var VIEW_ANGLE = 45,
ASPECT = WIDTH / HEIGHT,
NEAR = 0.1,
FAR = 10000;

var $container = $('#container');

var renderer = new THREE.WebGLRenderer();

var camera = new THREE.PerspectiveCamera(
	VIEW_ANGLE,
	ASPECT,
	NEAR,
	FAR);

var scene = new THREE.Scene();

camera.position.z = 300;

scene.add(camera);

renderer.setSize(WIDTH, HEIGHT);

$container.replaceWith(renderer.domElement);

var cubeMaterial = new THREE.MeshBasicMaterial(
  	{
  		color: 0xff0000
  	});

var width = 81,
height = 81,
depth = 81,
widthSegments = 9,
heightSegments = 9,
depthSegments = 9;

var cube = new THREE.Mesh(
	new THREE.CubeGeometry(
		width,
		height,
		depth,
		widthSegments,
		heightSegments,
		depthSegments),
		cubeMaterial);

scene.add(cube);

function animate() {
	
	cube.rotation.x += 0.03;
	cube.rotation.y += 0.03;
	cube.rotation.z += 0.003;
	
	renderer.render( scene, camera );
	
	requestAnimationFrame( animate );
	
}

animate();

});

you’ll need a div with id “container” in the markup.

< div id="container" >

   fallback for browsers that dont support
   webgl or canvas would go here.

< /div >

Have fun! switch WebGLRenderer with CanvasRenderer for slower/limited performance but wider support.