Three.js Core El­e­ments

net magazine - - PROJECTS | SHADERS AND THREE.JS -

The scene

The scene is a con­tainer ob­ject that en­cap­su­lates the other ob­jects and el­e­ments that we wish to show.

Cam­era

Three.js has a few dif­fer­ent cam­era classes in­clud­ing a per­spec­tive cam­era, which we will use for 3D, and an or­tho­graphic cam­era, used for ren­der­ing 2D scenes or UI el­e­ments.

Ren­derer

The ren­derer han­dles the dis­play of the 3D scene us­ing We­bGL. It tar­gets an HTML <can­vas> el­e­ment to draw into. Typ­i­cally you will call the ren­derer to ren­der each frame.

Ma­te­ri­als

Three.js comes with sev­eral ma­te­ri­als, such as Nor­mal, Ba­sic, Lam­bert, Phong and Shader. Ma­te­ri­als are used to tex­ture the faces of an ob­ject’s ge­om­e­try. At­tributes in­clude things such as tex­ture maps, colour and opac­ity.

Ge­om­e­try

Ge­om­e­try de­fines the ver­tices of an ob­ject to draw it. Faces cre­ated by these ver­tices are also de­fined, which can be filled by a ma­te­rial. It can be de­fined man­u­ally through code or as pre­de­fined prim­i­tives such as planes or spheres. It can also be loaded from ex­ter­nal files ex­ported from 3D-mod­el­ling soft­ware.

Mesh

A mesh is the com­bi­na­tion of a ge­om­e­try and a ma­te­rial. This mesh ob­ject is what we would typ­i­cally think of as a phys­i­cal ob­ject be­cause it now has enough in­for­ma­tion to be seen.

Three.js is a pow­er­ful We­bGL li­brary for web apps and sites

Newspapers in English

Newspapers from Australia

© PressReader. All rights reserved.