3D Programming in JS

We (still) ain't in 2D any more

Brought to you by @makenai with <3 … D

What is?

• 3D! Web! (not VRML)
• Abstracts WebGL 3D stuff (and canvas, SVG)
• Weighs 396k

BootStrap Codes

var scene = new THREE.Scene();

var aspect_ratio = window.innerWidth / window.innerHeight;
var camera = new THREE.PerspectiveCamera(75, aspect_ratio, 1, 10000);
camera.position.z = 500;
scene.add(camera);

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

var shape = new THREE.SphereGeometry(100);
var cover = new THREE.MeshNormalMaterial(); 
var ball = new THREE.Mesh(shape, cover); 
scene.add(ball);

renderer.render(scene, camera);

Scene

var scene = new THREE.Scene();

• Contains the whole world

Canvas Creation

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

• Creates a canvas or svg tag so we can see the things

Makin' Shapes

var shape = new THREE.SphereGeometry(100);
var cover = new THREE.MeshNormalMaterial(); 
var ball = new THREE.Mesh(shape, cover); 
scene.add(ball);

• Geometry = abstract shape
• Material = skin
• Geometry + Material = Mesh (a thing!)

TA-DA!

More Complicated Shapes via STL files!

var loader = new THREE.STLLoader();
loader.addEventListener( 'load', function ( event ) {
	var cover = new THREE.MeshNormalMaterial();
	var cat = new THREE.Mesh( event.content, cover );
	scene.add( cat );
	renderer.render(scene,camera);
});
loader.load( './img/yellowcat.stl' );

!WO3M

Oops.. let's fix her rotation and bring her closer.

Let's Rotate That Kitty

var loader = new THREE.STLLoader();
loader.addEventListener( 'load', function ( event ) {
	var cover = new THREE.MeshNormalMaterial();
	var cat = new THREE.Mesh( event.content, cover );
	cat.rotation.x = -75 * Math.PI / 180;
	cat.rotation.z = -20 * Math.PI / 180;
	cat.position.z = 400;
	scene.add( cat );
	renderer.render(scene,camera);
});
loader.load( './img/yellowcat.stl' );

MEOW!

Amineeshun

function animate () {
	requestAnimationFrame(animate);
	cat.rotation.z += 0.05;
	renderer.render(scene,camera);
}
animate();

• Do this instead of just a render

MeeeeeeoooooooweeeeeeeewwwwwoooooooooM

Real World Examples

treedee.net

Lathe-R-Beam

Hackthon Way

findSceneLoc : function(x, y) {
var xPos = (x - (canvasWidth / 2 )) * (magicNumber * 2 / canvasWidth),
    yPos = ((canvasHeight / 2) - y) * (magicNumber * 2 / canvasHeight);
return {'xPos': xPos, 'yPos': yPos}
},

Right Way

function findSceneLoc : function(x, y) {
	// Calculate the x,y on the near plane of 
	// the camera between -1 and 0
	var vector = new THREE.Vector3( ( x / canvasWidth ) * 2 - 1,  
	-( y / canvasHeight ) * 2 + 1, 0.5 );
	// Translate from the 2D coordinate to the 3D world
	projector.unprojectVector( vector, self.camera );
	// Zoom our point away from our camera to the right 
	// point on the Z scale mostly (0)
	var direction = vector.sub( self.camera.position ).normalize(),
	// Cast a ray from in the camera in direction of the click
	ray = new THREE.Ray( self.camera.position, direction ),
	// Calculate the scale of the distance
	distance_ratio = -self.camera.position.z / direction.z,
	// Get final position on Z plane by multiplying 
	// by our correct distance ratio
	pos = self.camera.position.clone().add( 
		direction.multiplyScalar( distance_ratio ) );
	return {'xPos': pos.x, 'yPos': pos.y }
}

THE END

by @makenai