Three.js primer

net magazine - - PROJECTS SHADERS -

You are us­ing Three.js as the We­bGL ren­derer in this tu­to­rial. If you are not fa­mil­iar with Three.js, here is a quick primer on the el­e­ments you will be us­ing.

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.


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.


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.


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 el­e­ments such as tex­tures maps, colour and opac­ity.


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.


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.

Newspapers in English

Newspapers from Australia

© PressReader. All rights reserved.