A Be­gin­ner’s Three.js Setup

net magazine - - WEBGL + THREE.JS -

Be­low is the most ba­sic setup of a 3D scene based off the Three.js doc­u­men­ta­tion. This pro­vides a brief in­tro­duc­tion into set­ting up your ren­derer, adding a cam­era and spin­ning a cube in your scene. The fol­low­ing in­stan­ti­ates your scene and cam­era. The cam­era ar­gu­ments al­low a field of view to be passed, along with an as­pect ra­tio and a near/far po­si­tion. The near and far plane de­fine the range at which your scene will be ren­dered. var scene = new THREE. Scene(); var cam­era = new THREE. Per­spec­tiveCam­era( 75, win­dow. in­nerWidth / win­dow. in­nerHeight, 0.1, 1000 ); The ren­derer dis­plays the fi­nal re­sult in We­bGL. var ren­derer = new THREE.We­bGLRen­derer(); ren­derer. setSize( win­dow. in­nerWidth, win­dow. in­nerHeight ); doc­u­ment. body. ap­pendChild( ren­derer. domEle­ment ); The fol­low­ing code will cre­ate a cube. An ob­ject on-screen is a mesh, and it re­quires a piece of ge­om­e­try and a ma­te­rial. var ge­om­e­try = new THREE. BoxGeom­e­try( 1, 1, 1 ); var ma­te­rial = new THREE. MeshBa­sicMa­te­rial( { color: 0x0ff0000 } ); var cube = new THREE. Mesh( ge­om­e­try, ma­te­rial ); scene. add( cube ); Here we set the cam­era to a po­si­tion on the z-axis so we can view the cube. cam­era. po­si­tion. z= 3; Your We­bGL ren­derer will al­ways have to be ren­dered at the frame rate. The code be­low is also ro­tat­ing the cube along the X and Y axes. func­tion an­i­mate() { cube. ro­ta­tion. x += 0.1; cube. ro­ta­tion.y += 0.1; re­questAn­i­ma­tionFrame( an­i­mate ); ren­derer. ren­der( scene, cam­era ); } an­i­mate();

Bend­ing our Tun­nel

The goal for this next step is to take our tex­tured, straight 3D tube and bend it along the X and Y axes. In or­der to bend our tun­nel in real-time, we’re go­ing to utilise a Three.js game ex­ten­sion by Jerome Eti­enne called Threex.Ver­tex­An­i­ma­tion. It’s a fan­tas­tic util­ity for fa­cil­i­tat­ing ver­tex an­i­ma­tions in 3D mod­els, by pro­vid­ing an ori­gin and po­si­tion of every ver­tex over time. This al­lows you to eas­ily de­form and morph 3D mod­els.

In ad­di­tion to ver­tex an­i­ma­tions, it’s def­i­nitely worth check­ing out the other util­i­ties un­der the Threex li­brary. The au­thor has many in­no­va­tive ad­di­tions, such as Vol­u­met­ric spot­light, 3D lasers, geo­met­ric glow ef­fects, and more prag­matic projects like ren­der statis­tics.

In or­der to bend the curve, we’re go­ing to take the 2D curve and ma­nip­u­late its con­trol points on

re­questAn­i­ma­tionFrame. By us­ing the getPoints method of THREE.Cat­mul­lRomCurve3, we can quickly get the in­ter­po­lated points along our curve given an amount of seg­ments, and store them in a vari­able. Note that I’m us­ing the tubu­larSeg­ments for the ver­tex to­tal, the same seg­ment to­tal that was used to cre­ate the TubeGeom­e­try.

This ma­nip­u­la­tion will be based off the mouse po­si­tion, so the curve of the tube goes along with mouse move­ment. The mouseRa­tio is where the mouse is on the screen – a value from zero to one. curve. points[2]. x= .6 * (1- win­dow. mouseRa­tioX) - .3; curve. points[4]. x= .6 * (1- win­dow. mouseRa­tioX) - .3; curve. points[2].y =.6 * (1- win­dow. mouseRa­tioY) - .3; curve. points[4].y =.6 * (1- win­dow. mouseRa­tioY) - .3; curveVer­tices = curve.getPoints( tubu­larSeg­ments);

Now to the ver­tex an­i­ma­tion. Us­ing the curveVer­tices we’ve set above, we’re go­ing to use this curve to ma­nip­u­late our piece of 3D ge­om­e­try. Since

curveVer­tices is just a spline, we need to loop through each ra­dial seg­ment of the 3D ge­om­e­try and off­set its ver­tices like this:

To bend our tun­nel in real-time, we’re go­ing to utilise a Three.js game ex­ten­sion called Threex.Ver­tex­An­i­ma­tion

When mov­ing the mouse with the code above, the tube will move quite lit­er­ally with your mouse with no eas­ing. If you’d like to add eas­ing, you can sim­ply re­place the po­si­tion x/y with this code. If you’d like more eas­ing, use a larger num­ber.

Em­u­lat­ing for­ward mo­tion

In or­der to fin­ish our tun­nel ef­fect, it needs to feel as though you’re mov­ing through it. There are a cou­ple of ap­proaches to mak­ing it feel like you’re trav­el­ling for­wards in the tun­nel.

The first ap­proach would be to move a mesh or piece of ge­om­e­try to­wards you in 3D space and loop it. This re­quires mov­ing the ac­tual piece of ge­om­e­try through 3D space. In­stead of do­ing that, we can do some­thing much sim­pler.

The same feel­ing can be given by util­is­ing the off­set prop­erty of a tex­ture. By sim­ply in­cre­ment­ing the off­set of the tex­ture over time, it feels as though you’re mov­ing through the tun­nel at high speeds.

In Con­clu­sion

We’ve cov­ered in-depth how to cre­ate an in­fi­nite tun­nel in 3D space. But this code can also in­spire you to do much more with mor­ph­ing and de­form­ing all sorts of ob­jects.

What do you think would be cool to cre­ate in 3D for your next project? There re­ally are no lim­its once you’ve grasped ver­tex an­i­ma­tions. The creative ap­pli­ca­tions are never-end­ing.

Anisotropy value The above im­age is an anisotropy com­par­i­son. The top im­age is when the prop­erty is set to 1, which is quite blurry. The bot­tom is the ad­justed, sharper im­age where the anisotropy value is set to 16

Con­trol points This is the re­sult of bend­ing the spline’s con­trol points and ap­ply­ing it to our tube. The red line in­di­cates the 2D curve

Newspapers in English

Newspapers from Australia

© PressReader. All rights reserved.