PROJECTS
WebGL
CREATE YOUR OWN
3D MODEL
IN-DEPTHAt some point you will want to create your own 3D model and
not just use one that is provided for you. There are several
options available from commercial to free; here’s a round-up of
some of the best places to start looking. The 3D app market is huge
and it can be confusing knowing where to start. The easiest thing
about using a 3D modelling package is that when creating your
content it can all be positioned visually; this is particularly useful for
lighting, which is difficult to do in JavaScript code.Cinema 4D
https://www.maxon.net/en/
While not a free option, Cinema 4D is considered a good all-round
modelling package and is what was used to create the helicopter
model in this tutorial. It has a straightforward approach that makes
it quite simple to create advanced models with relative ease.SketchUp
https://www.sketchup.com/
SketchUp is well known and won’t cost you much. In fact there is a
free basic version of the software to enable you to test the waters
if you are new to working in 3D. The software runs right in the
web browser (using WebGL) so you don’t even have to download
anything to start using it.Blender
https://www.blender.org
Blender has been around for years and has a strong community to
aid its development. It’s open source and completely free but the
downside is that there has always been a very steep learning curve
attached to Blender. However, if you can handle that and decide
to commit to learning how it works, you’ll never have to buy 3D
software again.The model of the helicopter is initially a little large,
so it needs to be scaled down and then rotated
towards the camera, before being added to the scene.
It’s worth noting here that rotation is in radians and
not degrees, so PI * 2 or 6.28 is the equivalent of 360º.
The helicopter model is stored in a global variable of
chopper for easy access when it comes to animating it
later.dae.scale.x = dae.scale.y = dae.scale.z = 0.5;
dae.rotation.y = Math.PI / 3;
dae.position.x = 40;
dae.updateMatrix();
scene.add(dae);
chopper = dae;Now each of the individual moving parts of the
helicopter model are referenced in the scene and
then added into variables, again for easy access when
they are animated later.rotor = scene.getObjectByName(“Rotor”, true);
blade = scene.getObjectByName(“blade”, true);turbineL = scene.getObjectByName(“TurbineL”, true);
turbineR = scene.getObjectByName(“TurbineR”, true);The model format that’s been chosen supports
lights, so the next part is to reference the spotlight
and make this cast shadows into the scene. As
everything is loaded and ready to go, the render
function is called before the closing of the loader
callback brackets.let light = scene.getObjectByName(“spLight”, true);
light = light.children[0];
light.castShadow = true;
light.distance = 1000;
light.penumbra = 1;
render();
});“The camera is set to
react to the mouse
movement while
looking to the left of the
helicopter. This will
force the model to move
over to the right”