casual design – design is casual

interactive design for web, video games, and apps.

javascript and/or css is disabled.

rotating cube



still-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

20130213-110234.jpg

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.

requires flash player

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.