Three.js

you can create cameras, objects, lights, materials and more , and you have a choice of rendrer,

decide if you want your scene to be drawn using HTML 5's canvas, WebGL or SVG,  And since it's open source

have at least a passing knowledge of 3D, and reasonable proficiency with Javascript.

1 A scene

2  A render

3 A camera

4  An Object or two (with materials)

 

SUPPORT

Chrome supports Canvas, WebGL and SVG, and it's blazingly fast

SET THE SCENE

all the rendering technologies  canvas or WebGL,

WebGL  runs on your grahics card's GPU

YOur CPU an concentrate on other non-rendering tasks like any physics or user interaction

your're trying to do.

Irrespective  of your chosen render you should bear

in mind that the JS will need to optimised for performance

3D isn't a lightweight task for a  browser(and it's awesome that it's even possible )

any bottlenecks are in your code, and remove them if you can!

setting up a scene  

var WIDTH = 400;

HEIGHT = 300;

var VIEW_ANGLE = 45,

ASPECT = WIDTH/HEIGHT,

NEAR =0.1,

FAR = 10000;

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

var render = new  THREE.WEBGLRender();

var camera = new THREE.PerspectiveCamera(

　　VIEW_ANGLE,

　　ASPECT,

　　NEAR,

　　FAR);

 

var scene = new THREE.Scene();

scene.add(camera);

camera.position.z = 300;

render.setSize(WIDTH,HEIGHT);

$container.append(renderer.domElement);

4 MAKING A MESH

So we have a scene, a camera and a render(I opted for a WebGL one in my sample code )

Primitives are geometric meshes relatively basic ones like Spheres , Planes, Cubes and Cylinders .....

var radius = 50,

　　segments = 16,

　　rings = 16;

var sphere = new THREE.Mesh(

　　new THREE.SphereGeometry(radius,segments,rings),sphereMaterial

);

scene.add(sphere);

5. METARIALS

1 "Basic" - which just means that it renders unlit  as far as i can tell

Lambert

3 Phong

var sphereMaterial =

new THREE.MeshLambertMaterial({color:0xcc0000});

It's worth pointing out as well that there are other properties you can specify when you create a material besides the colorr

6.  LIGHTS!

a red circle. Even though we have a Lambert material applied

there's no light in  the scene so by default

There.js will revert to a full ambient light.

which is the same as flat colouring . let's fix

that with a simple point of light:

var pointLight =

new THREE.PointLight(0xFFFFFF);

pointLight.position.x = 10;

pointLight.position.y = 50;

pointLight.position.z = 130;

scene.add(pointLight);

renderer.render(scene,camera)

8 COMMON OBJECT PROPERTIES

inherit from OBject3D 

position, rotation  and scale information.

our Sphere  is a Mesh which inherits from Object 3D, to which it adds its own properties:geometry and materials.

sphere.geometry.vertices

sphere.rotation

sphere.scale

DIRTY LITTLE SECRETS

I just want to quickly point out  a quick gotcha

for there.js   

sphere.geometry.dynamic = true;

sphere.geometry._dirtyVertices = true;

sphere.geometry._dirtyNormals = true