net - UK (2020-01)

PROJECTS
WebGL

WEBGL

View source

files here!

All the files you need for this

tutorial can be found at

https://netm.ag/2Co3ber

camera. Line 29 has a comment to start adding the

following code there.

let textureLoader = new THREE.TextureLoader();

let cl = textureLoader.load(“img/cloud.png”);

clouds = new THREE.Group();

material = new THREE.SpriteMaterial({

map: cl,

opacity: 0.7

});

This loads in the transparent cloud PNG image via

the texture loader, then creates a group that will

display the cloud sprites inside. This group will

make it easy to animate the sprites later. A material

INTEGRATE 2 D AND 3 D IN

YOUR SITE DESIGNS

Pdun#Vkxl·herwwrp explores what it takes to integrate 3D WebGL scenes

into your regular 2D sites

Thanks to the rise in popularity of WebGL

libraries such as three.js, it has never been

easier for web designers to add 3D content to their

web pages. This tutorial will focus on creating an

interactive scene around regular HTML. This will be

achieved by adding a cloud texture image to create a

sky scene, as well as loading a helicopter model

ready for display and interaction on the page. You

will have to run the code on a web server in order to

see it working; this can be hosted locally or

somewhere on the web.

To get started with this, open the start folder in

your code IDE and then open the main.js file. You’ll

see here the start of an init function that already

includes the basics of a 3D scene setup with a

ABOUT THE AUTHOR

MARK

SHUFFLEBOTTOM

w: webspaceinvader.com

t: @webspaceinvader

job: Professor of

interaction design,

Sheridan College

areas of expertise:

JavaScript, CSS, WebGL