Tech­nique

Web Designer - - Web Workshop -

1. In­tro animation

To recre­ate the animation on the home­page of Twotwen­tytwo, a Threejs scene must be cre­ated. Here the scene, cam­era and project are added to the page. An am­bi­ent light is added to il­lu­mi­nate ev­ery­thing. var scene, cam­era, ren­derer, ob­ject, light, ma­te­rial; func­tion init() { if (!De­tec­tor.webgl) De­tec­tor. ad­dgetwe­bglmes­sage(); scene = new THREE.SCENE(); cam­era = new Three.per­spec­tive­cam­era(75, win­dow.in­ner­width / win­dow.in­ner­height, 0.1, 2000); ren­derer = new Three.we­bglren­derer({ an­tialias: true}); ren­derer.set­size(win­dow.in­ner­width, win­dow. in­ner­height); doc­u­ment.body.ap­pend­child(ren­derer. domele­ment); light = new Three.am­bi­ent­light(0xede155); scene.add(light);

2. Set­ting the ma­te­rial

Another light is added that will act as the main light source. A box ge­om­e­try is cre­ated to make cubes, then a ma­te­rial is cre­ated, which gives the box a yel­low colour. light = new Three.di­rec­tion­al­light(0xffffff, 0.5); light.po­si­tion.set(0, 1, 0); scene.add(light); var ge­om­e­try = new Three.box­ge­om­e­try(5, 5, 5); var ma­te­rial = new THREE. Mesh­lam­bert­ma­te­rial({ color: 0xe3db14 });

3. Ran­dom cubes

Twenty ran­dom cubes are cre­ated and th­ese are po­si­tioned from the top of the screen, and an animation is added to each so that they move down to­wards the cen­tre of the screen. for (var i = 0; i < 20; i++) { let cube = new Three.mesh(ge­om­e­try, ma­te­rial); cube.po­si­tion.x = 200 * Math.ran­dom() - 100; cube.po­si­tion.y = 100; cube.po­si­tion.z = 200 * Math.ran­dom() - 100; cube.ro­ta­tion.x = Math.ran­dom() * Math.pi; cube.ro­ta­tion.y = Math.ran­dom() * Math.pi; new Tween.tween(cube.po­si­tion).to({ y: 30 * Math.ran­dom() + 20}, 1000 + Math.ran­dom() * 3000).eas­ing(tween.eas­ing.qua­dratic.out). start(); scene.add(cube); }

4. More cubes

The next loop cre­ates another twenty cubes. This time they ap­pear off the bot­tom of the screen and ran­domly an­i­mate up the screen, so that now there are cubes an­i­mat­ing from the top and bot­tom. for (var i = 0; i < 20; i++) { let cube = new Three.mesh(ge­om­e­try, ma­te­rial); cube.po­si­tion.x = 200 * Math.ran­dom() - 100; cube.po­si­tion.y = -100; cube.po­si­tion.z = 200 * Math.ran­dom() - 100; cube.ro­ta­tion.x = Math.ran­dom() * Math.pi; cube.ro­ta­tion.y = Math.ran­dom() * Math.pi; new Tween.tween(cube.po­si­tion).to({y: 30 * Math.ran­dom()}, 1000 + Math.ran­dom() * 3000). eas­ing(tween.eas­ing.qua­dratic.out).start(); scene.add(cube); }

5. Fin­ish­ing the init

The cam­era is po­si­tioned at a height of 20 units on the ‘y’ axis and the ren­der func­tion is called. The ‘init’ func­tion is closed and the ren­der func­tion is started. This calls it­self to keep run­ning, which ro­tates the cam­era and up­dates the Tween en­gine. cam­era.po­si­tion.set(0, 20, 0); ren­der(); } func­tion ren­der() { re­ques­tani­ma­tion­frame(ren­der); cam­era.ro­ta­tion.y -= 0.001; Tween.up­date();

6. Fin­ish­ing the project

The cam­era and scene are ren­dered and dis­played on the screen. The ren­der func­tion is closed and the ‘init’ func­tion is called. Save the page and run it in the browser to see the cube animation run­ning. ren­derer.ren­der(scene, cam­era); } init();

Newspapers in English

Newspapers from UK

© PressReader. All rights reserved.