Introduction to three.js – KERALA JS OCT Meetup

Three.js is a javascript library that makes WebGL – 3D in the browser very easy. It reduces 100 ‘s of lines to few lines.
Three.js is maintained at github (https://github.com/mrdoob/three.js/) .
Official website – threejs.org
Docs can be found at threejs.org/docs
So if you are a person who like to create games in browser you should definitely check three.js. Using JS lib like three.js we can get native performance of games in browser (as it directly access the GPU from our machines)
Like gave a small talk on intro to three.js in the 1st anniversary meetup of keralaJS.
I just quickly ran over the features and basics of three.js .
Can download three.js lib from http://threejs.org/build/three.min.js 
If you are person who does not like coding and still interested in creating awesome structures you can use the threejs editor- http://threejs.org/editor/
so this is the basic code snippet to create cube which will explain three js at short and its important aspects.
code demonstration can be found @ http://jsfiddle.net/f17Lz5ux/
1. <script src=“js/three.min.js”></script> 
 
most important of all include the lib in your html 
 
2.To actually be able to display anything with Three.js, we need three things: A scene, a camera, and a renderer so we can render the scene with the camera
var geometry = new THREE.BoxGeometry( 1, 1, 1 );
var material = new THREE.MeshBasicMaterial( { color: RED } );var cube = new THREE.Mesh( geometry, material );scene.add( cube ); camera.position.z = 5;
To create a cube, we need a BoxGeometry. This is an object that contains all the points (vertices) and fill (faces) of the cube.
 we need a material to color it. Three.js comes with several materials, here we use MeshBasicMaterial and apply color red.
 A mesh is an object that takes a geometry, and applies a material to it, which we then can insert to our scene, and move freely around.
 scene.add() .This would cause both the camera and the cube to be inside each other. To avoid this, we simply move the camera out a bit.

function render() {
requestAnimationFrame( render );
renderer.render( scene, camera );
}
render();
This will create a loop that causes the renderer to draw the scene 60 times per second.
requestAnimationFrame has a number of advantages. Perhaps the most important one is that it pauses when the user navigates to another browser tab, hence not wasting their precious processing power and battery life.cube.rotation.x += 0.1;cube.rotation.y += 0.1;This will be run every frame (60 times per second), and give the cube a nice rotation animation

it will look like this 

<html>

<head>
<title>My first Three.js app</title>
<style>
body { margin: 0; }
canvas { width: 100%; height: 100% }
</style>
</head>
<body>
<script src=“js/three.min.js”></script>
<script>
var scene = new THREE.Scene();
var camera = new THREE.PerspectiveCamera( 75, window.innerWidth/window.innerHeight, 0.1, 1000 ); var renderer = new THREE.WebGLRenderer();
renderer.setSize( window.innerWidth, window.innerHeight );
document.body.appendChild( renderer.domElement ); var geometry = new THREE.BoxGeometry( 1, 1, 1 );
var material = new THREE.MeshBasicMaterial( { color: 0x00ff00 } );
var cube = new THREE.Mesh( geometry, material );
scene.add( cube ); camera.position.z = 5; var render = function () {
requestAnimationFrame( render ); cube.rotation.x += 0.1;
cube.rotation.y += 0.1; renderer.render(scene, camera);
}; render();
</script>
</body>
</html>
Advertisements

One thought on “Introduction to three.js – KERALA JS OCT Meetup

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s