CS 5331 Virtual Reality Introduction to Three.js 

<!DOCTYPE html>
<html>
  <head>
    <title>Basic skeleton of Threejs</title>
    <script src="js/three.min.js"></script>
    <style>
      html, body { margin: 0; padding: 0; overflow: hidden; }
    </style>
  </head>
  <body>
    <script>
     //Start your coding from here....
    </script>
  </body>
</html>

Scene Graph

Scene Graph

Scene Default

By default, both the canvas element’s size and the size of its drawing surface is 300 screen pixels wide and 150 screen pixels high

Scene FullScreen

scene = new THREE.Scene();
scene.background = new THREE.Color(0xffffff);
camera = new THREE.PerspectiveCamera(45, window.innerWidth/window.innerHeight,0.01,1000);
renderer = new THREE.WebGLRenderer();
renderer.setSize(window.innerWidth,window.innerHeight);

Scene Graph

Mesh

Manual Geometry

Geometry Primitives

var geo = new THREE.BoxGeometry( width, height, depth );
var geo = new THREE.SphereGeometry( 60, 24, 16 );
var geo = new THREE.CylinderGeometry( ... );
var geo = new THREE.TorusGeometry( ... );
var boxGeo = new THREE.BoxGeometry(5,5,5);
var boxMat = new THREE.MeshBasicMaterial({color:'gray'});
var boxMesh = new THREE.Mesh(boxGeo,boxMat);
scene.add(boxMesh);

Threejs Coordinates

Object3D Transforms

mesh.position.x = 0
mesh.position.x = -100
mesh.scale.set(2,2,2)
mesh.rotation.y = Math.PI / 4
mesh.rotation.y = Math.PI * 5 / 4

Unit Circle

mesh.rotation.y = THREE.Math.degToRad(45);

Unit Circle

mesh.position.x = Math.cos( time );
mesh.position.y = Math.sin( time );

Camera Controls

/three.js/examples/js/controls/OrbitControls.js

<script src="path/to/OrbitControls.js"></script>

controls = new THREE.OrbitControls( camera );

function render() {
  requestAnimationFrame( render );
  controls.update();
  renderer.render( scene, camera );
}

Materials

Materials

var material = new THREE.MeshBasicMaterial({ ... });
var material = new THREE.MeshLambertMaterial({ ... });
var material = new THREE.MeshPhongMaterial({ ... });
var material = new THREE.MeshNormalMaterial({ ... });
var material = new THREE.MeshNormalMaterial({ ... });

UVs

Texture Mapping

var loader = new THREE.TextureLoader();
var texture = loader.load("color-map.jpg");
map: texture
normalMap: texture
specularMap: texture
map: colorMap, specularMap: specMap, normalMap: normalMap
var material = new THREE.MeshPhongMaterial({
  color: 0xaaaaaa,
  specular: 0x333333,
  shininess: 15,
  map: colorMap,
  specularMap: specMap,
  normalMap: normalMap
});

Lights

Lights

light = new THREE.DirectionalLight( 0xdddddd, 0.8 );
light.position.set( -80, 80, 80 );
light.position.x = 80;
light.target.position = 160;
light.position.x = -80;
light = new THREE.DirectionalLight( 0xdddddd, 0.8 );
light = new THREE.DirectionalLight( 0xb4e7f2, 0.8 );
light = new THREE.DirectionalLight( 0xb4e7f2, 0.2 );
light = new THREE.DirectionalLight( 0xb4e7f2, 1.5 );
light = new THREE.DirectionalLight( 0xb4e7f2, 0.8 );
light = new THREE.PointLight( 0xb4e7f2, 0.8 );
light = new THREE.PointLight( 0xb4e7f2, 0.8 );
light = new THREE.SpotLight( 0xb4e7f2, 0.8 );
light.angle = Math.PI / 9;
light.angle = Math.PI / 5;
light = new THREE.AmbientLight( 0x444444 );
light = new THREE.AmbientLight( 0x000000 );
light = new THREE.AmbientLight( 0x444444 );

Model Loader

var loader = new THREE.ObjectLoader();

loader.load("teapot.json", function( group ) {
  mesh = group.children[0];
  mesh.material = new THREE.MeshPhongMaterial();
  scene.add( mesh );
});

Interaction

// normalized device coordinates
mouse.x = ( event.clientX / window.innerWidth ) * 2 - 1;
mouse.y = - ( event.clientY / window.innerHeight ) * 2 + 1;

raycaster = new THREE.Raycaster();

var vector = new THREE.Vector3( mouse.x, mouse.y, 1 ).unproject( camera );

raycaster.set( camera.position, vector.sub( camera.position ).normalize() );

var intersects = raycaster.intersectObjects( scene.children );

INTERSECTED = intersects[ 0 ].object;
‹ ›

/

Vinh Nguyen
Intro on GitHub