net - UK (2020-02)

PROJECTS
three.js

var camera, scene, renderer;

var mouse = new THREE.Vector2();

var clock = new THREE.Clock();

STEP 4: CREATE A 3D SCENE

Next, set up the three.js scene. This will be the

container for all your objects. You can also set a

default background colour using a hex value for the

colour of your choice.

scene = new THREE.Scene();

scene.background = new THREE.Color( 0xbfd1e5 );

STEP 5: ADD A CAMERA

To see the scene, add a camera. Use a

PerspectiveCamera for a 3D scene. The first attribute

is the field of view. The second is the aspect ratio,

which should match the aspect of the visible window.

The third and fourth parameters are for near and far

clipping planes. Use the position property to set the

location of the camera in the scene.

camera = new THREE.PerspectiveCamera( 35, window.

innerWidth / window.innerHeight, 1, 2000 );

camera.position.set( 0,100,50 );

scene.add( camera );

STEP 6: SORT THE RENDERER

Create the renderer next, which handles drawing

the scene to the HTML canvas element. You can

define the pixel ratio and size so it adapts to the

screen space. In this example we are also turning on

shadows to allow casting of shadows in the scene.

renderer = new THREE.WebGLRenderer( { antialias: true } );

renderer.setPixelRatio( window.devicePixelRatio );

renderer.setSize( window.innerWidth, window.innerHeight

);

renderer.shadowMap.enabled = true;

renderer.shadowMap.type = THREE.PCFSoftShadowMap;

document.body.appendChild( renderer.domElement );

STEP 7: ADD LIGHTS

To make a scene look 3D, you need some type of

directional lighting. Typically you should use an

ambient light to control the overall light and at

least one directional or spot type light to cast some

shading and shadows in your scene. You can add a

directional light with shadows turned on using the

following code:

light = new THREE.DirectionalLight( 0xddeeff,.5 );

light.position.set( -10,50,10 );

light.castShadow = true;

light.shadow.camera.right = 50;

light.shadow.camera.left = - 50;

light.shadow.camera.top = 50;

light.shadow.camera.bottom = - 50;

light.shadow.mapSize.width = 2048;

light.shadow.mapSize.height = 2048;

scene.add( light );

STEP 8: ADD POINTS GEOMETRY

Next, create a BufferGeometry to hold the many

vertices that will be used to position each point in

our particle system. Apply some random values to

the position of each particle and push it into the

vertices array. Use the following code to do this:

var geometry = new THREE.BufferGeometry();

var vertices = [];

var materials = [], parameters;

for ( var i = 0; i < 1500; i ++ ) {

var x = Math.random() * 60 - 30;

var y = Math.random() * 60 - 30;

var z = Math.random() * 60 - 30;

vertices.push( x, y, z );

}

STEP 9: SUPPLY VERTICES TO THE

BUFFER GEOMETRY

Now that you have an array of vertices (positions

in 3D space), you can apply them to the geometry

you are creating. We are making our own custom

Top Rain particles falling

towards the camera against

a dark sky can be achieved

with this tutorial

Above Snow particles

would enhance this winter

scene as they fall past the

camera