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