net - UK (2020-01)

WebGL

In order to understand the interaction between 2D and 3D,

it’s useful to know exactly how the content is organised on

the page. The background to the page is the light blue colour that

can be seen at the back, then positioned over this is the box with a

gradient background and round corners; this just sits on the page

using the default relative layout, because it is the next element on

the screen.

The WebGL content is not in the HTML structure if you look at

the index.html page. That’s because this gets added dynamically

to the page from the JavaScript and is placed in a canvas element.

This needs to go over the top of the gradient box, so is positioned

using absolute in the top-left corner; there is a CSS rule informing

the canvas to be positioned here. The WebGL content is instructed

to render with a transparent background so that the existing page

content can be seen through it.

The final content to be added is the text content and navigation.

This again is positioned using absolute in the top-left corner but

is given a higher z-index so that it will be visible on the screen.

It’s important to have any interactive content above the WebGL

content, as the user will not be able to click on the navigation bar if

this is behind the WebGL content.

LAYOUT STRUCTURE

OF THE PAGE

IN-DEPTH

is created using the cloud image, with the Opacity
set a little lower at 70%. In order to make 20 sprites,
a for loop can be implemented. Here the x, y and
z positions of the sprites are generated, with the
material added to the individual sprite. The position
is set using the local variables of x, y and z, then
the sprite is scaled up so that the clouds will fit the
sizing of the model and scene.

for (i = 0; i < 20; i++) {
let x = 600 Math.random() - 300;
let y = 200 Math.random() - 100;
let z = 1200 * Math.random() - 600;
sprite = new THREE.Sprite(material);
sprite.position.set(x, y, z);
sprite.scale.x = sprite.scale.y = sprite.scale.z = 100;
clouds.add(sprite);
}
scene.add(clouds);

At the end of the for loop, each sprite is added into
the clouds group and then finally the whole group
of clouds is added into the scene. With just these
few lines of code, the scene is filled with randomly
positioned clouds.
Now to load the model, which is an XML-based
format. The chopper model is loaded and each model
is set to receive and cast shadows inside the scene.

let loader = new THREE.ColladaLoader();
loader.options.convertUpAxis = true;
loader.load(‘chopper.dae’, function (collada) {
let dae = collada.scene;
dae.traverse(function (child) {
if (child instanceof THREE.Mesh) {
child.castShadow = true;
child.receiveShadow = true;
}
});

“The helicopter is set to bob

up and down on the screen

using a sine wave. This will

give the illusion it’s moving”

Top Understanding the page structure is crucial to ensuring everything works

Above Clouds are randomly generated to give a sense of depth and movement in the scene.
This is created by making a sprite from the cloud.png image