casual design – design is casual

real-time virtual production

rotating cube

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.

type

sierpinski gasket

uvi architecture solutions

January Quick Post

It is a new year and the first month is over. So far this year I have been headed into interactive space more and more. I made a little headway back into Flash and 3D, using ActionScript 3 and Papervision. I also want to take a minute to check out Loworks website. I liked reading the thinking by Haruki Higashi in the winter issue of Computer Arts Projects. It is a good year for change and continuation.

The animation above is from the basic example to test Papervision. The example on Google Code did not work, so here is the code I used (rocketclowns pointed me in the right direction).

package {
	
	import flash.display.Sprite;
	import flash.events.Event;
	
	import org.papervision3d.objects.primitives.Plane;
	import org.papervision3d.materials.ColorMaterial;
	import org.papervision3d.view.BasicView;

	public class ExampleTransformationRotate extends BasicView {
		
		private var plane:Plane;
		
		public function ExampleTransformationRotate() {
			
			super();
			
			var material:ColorMaterial = new ColorMaterial();
			material.doubleSided = true;
			material.fillColor = 0xFF0000;
			material.fillAlpha = 1.0;
			
			plane = new Plane(material, 300, 300, 1, 1);
			
			scene.addChild(plane);
			
			stage.addEventListener(Event.ENTER_FRAME, render);
			
		} 
		
		private function render(event:Event):void {
			
			plane.rotationX += 4.35;
			plane.rotationY += 6.55;
			plane.rotationZ += 0.55;
			
			singleRender();
			
		}
		
	}
	
}

Let me know if this helps anybody.