2019-05-01+net

PROJECTS
Three.js

object to the scene and push a reference to it into our

objects array.

var geometry = new THREE.BoxGeometry( 1,1,1 );

var material = new THREE.MeshStandardMaterial( { color:

0xee3333 } );

for ( i=0; i<=20;i++){

var object = new THREE.Mesh( geometry,

material );

object.position.x = Math.sin(i*360/20) * 10.0;

object.position.z = Math.cos(i*360/20) * 10.0;

object.castShadow = true;

scene.add( object );

objects.push(object);

}

STEP 4: ADD GROUND AND BACKGROUND

PLANES

To round out our scene, we’ll add a simple plane for

the ground and one for the background. This will

help define the space and give us a place to cast some

shadows. Try adding this code next:

// create a ground

var planeGeometry = new THREE.PlaneBufferGeometry(

500, 500, 32, 32 );

var planeMaterial = new THREE.MeshStandardMaterial( {

color: 0xeeaa33 } );

var plane = new THREE.Mesh( planeGeometry,

planeMaterial );

plane.rotation.x=Math.PI/180*-90;

plane.position.y=-6;

plane.receiveShadow = true;

scene.add( plane );

//Create a back wall

var plane = new THREE.Mesh( planeGeometry,

planeMaterial );

plane.position.z=-50;

plane.receiveShadow = true;

scene.add( plane );

We’ve created a plane geometry this time (another

built-in Three.js geometry) and another standard

material. We create a plane for the ground, rotate it

so it lies flat and position it below our objects. We

also set the receiveShadows to true. Then we repeat

this for our back wall, without the need to rotate it.

STEP 5: TURN ON SOME LIGHTS

Next we add a couple of lights to light the scene. You

can adjust the lights and colours of the elements to

your taste but this is just to get you a quick scene

setup. Add one ambient light and a point light and

salter the properties to enable them to cast shadows.

Add the following code next:

var light = new THREE.AmbientLight( 0xffeecc,.4 );

scene.add( light );

//Create a light and turn on shadows for the light

var light = new THREE.PointLight( 0xffffff, .6 );

scene.add( light );

light.position.set(3,4,15)

light.castShadow = true;

//Set up shadow properties for the light

light.shadow.mapSize.width = 2048;

light.shadow.mapSize.height = 2048;

light.shadow.camera.near = 0.1;

light.shadow.camera.far = 500;

STEP 6: ANIMATE THE SCENE

Finally we can render our scene and add some

animation. Add this code to get it working:

var animate = function () {

requestAnimationFrame( animate );

for ( i = 0 ; i<objects.length;i++){

Top left Final scene

with multiple built-in box

geometries

Above A single object view

of the custom geometry

Right Multiple objects

using our new custom

geometry