Getting started

Few words about threejs, ami and XTK

Basics

THREE.JS

WebGL Renderer

Manages all the rendering, at the GPU level. Many properties can be tweaked. It allows us to render a scene.

Typical usage:

// Get container in the DOM
var container = document.getElementById('container');

// Create renderer
var renderer = new THREE.WebGLRenderer({
  antialias: true
});
renderer.setSize(container.clientWidth, container.clientHeight);
renderer.setClearColor(0x2196F3, 1);

// Attach renderer to the DOM
container.appendChild(renderer0.domElement);

...
// Render to screen
renderer.render(scene, camera);
...

Official documentation

Create a scene

Scene

Contains all elements to be rendered.

Typical usage:

// create scene
var scene = new THREE.Scene();

...
// add mesh to the scene
scene.add( mesh );

// add light to the scene
scene.add( light );
...

Camera

Defines the way we look at the scene.

Typical usage:

// create the camera
var  camera = new THREE.PerspectiveCamera(45, container.offsetWidth / container.offsetHeight, 0.01, 10000000);
camera.position.x = 150;
camera.position.y = 150;
camera.position.z = 100;

...
scene.add( mesh );
scene.add( light );
...

Controls

Modifies the camera's position/orientation in order to update the scene to be rendered.

Typical usage:

// create the camera
var  controls = new THREE.Trackball(camera, container);
camera.position.x = 150;
camera.position.y = 150;
camera.position.z = 100;

...
scene.add( mesh );
scene.add( light );
...

AMI

Loaders

Get an array buffers from urls.

Parsers

Parse loader's output and convert it to a user friendly JS object.

Models

Base elements that contains all element specific required methods.

Helpers

Elements that connect loaders, parsers and models for common actions.

Next

Look at the lessons to see how the pieces work together.