Christmas tree with three.js - Script Tutorials

Today’s article refers to the Christmas and new year in the most direct manner. I prepared a remarkable and relevant demonstration of possibilities of three.js library in the form of an interactive Christmas card. This postcard has everything we need – the Christmas tree with toys, the star in the top, snow, snowflakes in the air – all to raise new year spirit of Christmas time. In this tutorial I will show you how to work with 3D scene, fog, cameras, textures, materials, basic objects (meshes), ground, lights, particles and so on.

Our result works good for all modern browsers (using the HTML5 technology). To start, let’s look at the result and online demo:

Contents

Skeleton
Scene, camera, action
Materials
Trunk (CylinderGeometry)
Branches
The star on the tree
Christmas toys
Ground
Snowflakes
Light
Finishing touches
Event handlers functions
Render
Conclusion

Live Demo

First of all, I want to say a few words about three.js. Today’s lesson is the first where we use this library, which is really amazing, because it lets you get really good results with the minimum of effort. Almost all the necessary things for creating 3d scenes have already been implemented in this library, which harnesses the power of WebGL. I think that next year we will come back to WebGL more than once.

Now, if you are ready to develop it – let’s start. In the beginning, create a blank html file (index.html) and put the following code:

<!DOCTYPE html> 
  
<html lang="en" > 
  
    <head> 
  
        <meta charset="utf-8" /> 
  
        <meta name="author" content="Script Tutorials" /> 
  
        <title>Christmas tree with three.js | Script Tutorials</title> 
  
        <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no"> 
  
        <!-- add styles --> 
  
        <link href="css/main.css" rel="stylesheet" type="text/css" /> 
  
    </head> 
  
    <body> 
  
        <!-- add scripts --> 
  
        <script src="js/three.min.js"></script> 
  
        <script src="js/script.js"></script> 
  
    </body> 
  
</html>

Could it be simpler? Indeed, all you see is the basic HTML markup with few meta tags, and two javascript files, the first of which is the library itself (three.min.js), and the second file with the code of our Christmas card (script.js). Pay attention, that both javascript files are in the ‘js’ folder. Don’t forget to create this folder (‘js’) in the same folder where you saved your index.html file.

Next step – you will need to download three.min.js library. You can find it in the Internet, and it is also available here. This file should be placed in the ‘js’ folder which you prepared earlier. Starting from the current moment we begin to understand the process of creation of all the scene elements. Now create a new blank javascript file, save it in the ‘js’ folder with the ‘script.js’ name. And let’s start from the beginning

Skeleton

To begin, we define the global variables and the application skeleton

var container; 
  
var camera, scene, renderer, group; 
  
var targetRotation = 0; 
  
var targetRotationOnMouseDown = 0; 
  
var mouseX = 0; 
  
var mouseXOnMouseDown = 0; 
  
var windowHalfX = window.innerWidth / 2; 
  
var windowHalfY = window.innerHeight / 2; 
  
// initialize and start animation 
  
init(); 
  
animate(); 
  
function init() { 
  
} 
  
function animate() { 
  
    requestAnimationFrame(animate); 
  
    render(); 
  
} 
  
function render() { 
  
    renderer.render(scene, camera); 
  
}

This is fairly common structure of application built with three.js. Almost everything will be initialized and created in the ‘init’ function. Then we will add few more function for user interaction.

Scene, camera, action

This is a preparatory stage on which we prepare container for our scene, display some intro description, initialize the scene, fog, camera, and then we prepare the group (THREE.Object3D) on which we will put elements of the scene. Add the following code in the ‘init’ function:

// prepare the container 
  
container = document.createElement('div'); 
  
document.body.appendChild(container); 
  
// display Info 
  
var info = document.createElement('div'); 
  
info.style.position = 'absolute'; 
  
info.style.top = '10px'; 
  
info.style.width = '100%'; 
  
info.style.textAlign = 'center'; 
  
info.innerHTML = 'This Christmas tree is prepared by <a target="_blank" href="https://www.script-tutorials.com/">Script Tutorials</a> team.<br/>Drag to spin'; 
  
container.appendChild(info); 
  
// initialize the scene 
  
scene = new THREE.Scene(); 
  
// add the fog 
  
scene.fog = new THREE.Fog(0xcce0ff, 500, 10000); 
  
// set the camera 
  
camera = new THREE.PerspectiveCamera(50, window.innerWidth / window.innerHeight, 1, 10000); 
  
camera.position.set(0, 100, 500); 
  
scene.add(camera); 
  
// create the empty scene group 
  
group = new THREE.Object3D(); 
  
scene.add(group);

Materials

Materials is one of the most interesting chapters in the graph. Especially when it comes to shiny surfaces and BumpMapping. Add the following code in the ‘init’ function:

// prepare materials 
  
var imgTexture = THREE.ImageUtils.loadTexture('img/texture.jpg'); 
  
imgTexture.repeat.set(1, 1); 
  
imgTexture.wrapS = imgTexture.wrapT = THREE.RepeatWrapping; 
  
imgTexture.anisotropy = 16; 
  
imgTexture.needsUpdate = true; 
  
var shininess = 50, specular = 0x333333, bumpScale = 1, shading = THREE.SmoothShading; 
  
var materials = []; 
  
materials.push( new THREE.MeshPhongMaterial( { map: imgTexture, bumpMap: imgTexture, bumpScale: bumpScale, color: 0xff0000, ambient: 0xffffff, specular: specular, shininess: shininess, shading: shading } ) ); 
  
materials.push( new THREE.MeshPhongMaterial( { map: imgTexture, color: 0x008800, ambient: 0xffffff, specular: specular, shininess: shininess, shading: shading } ) ); 
  
materials.push( new THREE.MeshPhongMaterial( { map: imgTexture, color: 0x584000, ambient: 0xffffff, shading: shading } ) ); 
  
materials.push( new THREE.MeshPhongMaterial( { map: imgTexture, color: 0xff0000, ambient: 0xffffff, shading: shading } ) );

Thus we have prepared four materials

Trunk (CylinderGeometry)

This is the first basic object on the scene: the truncated cylinder. Add the following code in the ‘init’ function:

// add the Trunk 
  
var trunk = new THREE.Mesh(new THREE.CylinderGeometry(2, 20, 300, 30, 1, false), materials[2]); 
  
group.add(trunk);

We choosed the third material for the trunk. Params of the CylinderGeometry are: radiusTop, radiusBottom, height, radiusSegments, heightSegments, openEnded.

Branches

In our example, the branch is a polygonal star. The upper row has the lowest number of teeth (branches), each subsequent row has one branch more. I prepared a special function ‘addBranch’ to generate the polygonal star. Add the following code in the ‘init’ function:

// add branch function 
  
function addBranch(count, x, y, z, opts, material, rotate) { 
  
    // prepare star-like points 
  
    var points = [], l; 
  
    for (i = 0; i < count * 2; i++) { 
  
        if (i % 2 == 1) { 
  
            l = count * 2; 
  
        } else { 
  
            l = count * 4; 
  
        } 
  
        var a = i / count * Math.PI; 
  
        points.push( new THREE.Vector2(Math.cos(a) * l, Math.sin(a) * l)); 
  
    } 
  
    var branchShape = new THREE.Shape(points); 
  
    var branchGeometry = new THREE.ExtrudeGeometry(branchShape, opts); 
  
    var branchMesh = new THREE.Mesh(branchGeometry, material); 
  
    branchMesh.position.set(x, y, z); 
  
    // rotate 90 degrees 
  
    if (rotate) { 
  
        branchMesh.rotation.set(Math.PI / 2, 0, 0); 
  
    } else { 
  
        branchMesh.rotation.set(0, 0, Math.PI / 2); 
  
    } 
  
    // add branch to the group 
  
    group.add(branchMesh); 
  
}

Where ‘count’ is amount of branches at row; x, y, z – initial position, opts – options, and so on. The function generates the star mech object on the basis of calculated points in the figure.

Empirically I decided to display 14 rows of branches. Continue to add the code:

// options 
  
var options = { 
  
    amount: 6, 
  
    bevelEnabled: true, 
  
    bevelSegments: 5, 
  
    steps: 2 
  
}; 
  
// add 10 branches 
  
var iBranchCnt = 14; 
  
for (i1 = 0; i1 < iBranchCnt; i1++) { 
  
    addBranch(iBranchCnt + 3 - i1, 0, -125 + i1*20, 0, options, materials[1], true); 
  
}

The star on the tree

The star on the tree is a star consisting of 5 rays. We may use the ready function ‘addBranch’ to show it:

// add the star 
  
var starOpts = { 
  
    amount: 4, 
  
    bevelEnabled: false 
  
}; 
  
addBranch(5, 0, 160, -2, starOpts, materials[3], false);

The only difference is that we have to turn this star 90% on the Z-axis

Christmas toys

Christmas toys are a good decoration of the Christmas tree. They need to be located on the branches of the tree. So I decided to slightly modify the function ‘addBranch’, by adding the code to add the balls. Now back to this function, find the row:

`1`	`points.push(` `new` `THREE.Vector2(Math.cos(a) * l, Math.sin(a) * l));`

and add the following code below it:

if (rotate && i % 2 == 0) { 
  
    var sphGeometry = new THREE.SphereGeometry(8); 
  
    sphMesh = new THREE.Mesh(sphGeometry, materials[0]); 
  
    sphMesh.position.set(Math.cos(a) * l*1.25, y, Math.sin(a) * l*1.25); 
  
    group.add(sphMesh); 
  
}

All balls are spheres (SphereGeometry) with radius of 8.

Ground

Next step is to add the earth, for which we will use a different texture. As the surface (ground) we will use PlaneGeometry. Add the following code right after the place you finished adding the Star:

// add the ground 
  
var groundColor = new THREE.Color(0xd2ddef); 
  
var groundTexture = THREE.ImageUtils.generateDataTexture(1, 1, groundColor); 
  
var groundMaterial = new THREE.MeshPhongMaterial({ color: 0xffffff, specular: 0x111111, map: groundTexture }); 
  
var groundTexture = THREE.ImageUtils.loadTexture('img/ground.jpg', undefined, function() { groundMaterial.map = groundTexture }); 
  
groundTexture.wrapS = groundTexture.wrapT = THREE.RepeatWrapping; 
  
groundTexture.repeat.set(25, 25); 
  
groundTexture.anisotropy = 16; 
  
var groundMesh = new THREE.Mesh( new THREE.PlaneGeometry(20000, 20000), groundMaterial); 
  
groundMesh.position.y = -150; 
  
groundMesh.rotation.x = - Math.PI / 2; 
  
group.add(groundMesh);

Snowflakes

Another important element – snowflakes. They represent a Particle System. Continue to add the code:

// add snowflakes 
  
var sfMats = []; 
  
var sfTexture = THREE.ImageUtils.loadTexture('img/snowflake.png'); 
  
var sfGeometry = new THREE.Geometry(); 
  
for (i = 0; i < 10000; i++) { 
  
    var vertex = new THREE.Vector3(); 
  
    vertex.x = Math.random() * 2000 - 1000; 
  
    vertex.y = Math.random() * 2000 - 1000; 
  
    vertex.z = Math.random() * 2000 - 1000; 
  
    sfGeometry.vertices.push(vertex); 
  
} 
  
var states = [ [ [1.0, 0.2, 0.9], sfTexture, 10 ], [ [0.90, 0.1, 0.5], sfTexture, 8 ], [ [0.80, 0.05, 0.5], sfTexture, 5 ] ]; 
  
for (i = 0; i < states.length; i++) { 
  
    color  = states[i][0]; 
  
    sprite = states[i][1]; 
  
    size   = states[i][2]; 
  
    sfMats[i] = new THREE.ParticleSystemMaterial({ size: size, map: sprite, blending: THREE.AdditiveBlending, depthTest: false, transparent : true }); 
  
    sfMats[i].color.setHSL(color[0], color[1], color[2]); 
  
    particles = new THREE.ParticleSystem(sfGeometry, sfMats[i]); 
  
    particles.rotation.x = Math.random() * 10; 
  
    particles.rotation.y = Math.random() * 10; 
  
    particles.rotation.z = Math.random() * 10; 
  
    group.add(particles); 
  
}

Light

Basically – everything is ready and we can start adding the last element of the scene – light. Light sources will be a few: AmbientLight, the flying white PointLight and the secondary blue DirectionalLight. Add the following code:

// Add lights: 
  
// add ambient (global) light 
  
scene.add( new THREE.AmbientLight(0x222222)); 
  
// add particle of light 
  
particleLight = new THREE.Mesh( new THREE.SphereGeometry(5, 10, 10), new THREE.MeshBasicMaterial({ color: 0xffffff })); 
  
particleLight.position.y = 250; 
  
group.add(particleLight); 
  
// add flying pint light 
  
pointLight = new THREE.PointLight(0xffffff, 1, 1000); 
  
group.add(pointLight); 
  
pointLight.position = particleLight.position; 
  
// add directional blue light 
  
var directionalLight = new THREE.DirectionalLight(0x0000ff, 2); 
  
directionalLight.position.set(10, 1, 1).normalize(); 
  
group.add(directionalLight);

Finishing touches

Let’s add the latest lines of code in the ‘init’ function to create the render object (WebGLRenderer), and adjust it’s properties. We also need to add several UI event handlers. Add the following code:

// prepare the render object and render the scene 
  
renderer = new THREE.WebGLRenderer({ antialias: true, alpha: false }); 
  
renderer.setClearColor(scene.fog.color); 
  
renderer.setSize(window.innerWidth, window.innerHeight); 
  
container.appendChild(renderer.domElement); 
  
renderer.gammaInput = true; 
  
renderer.gammaOutput = true; 
  
renderer.physicallyBasedShading = true; 
  
// add events handlers 
  
document.addEventListener('mousedown', onDocumentMouseDown, false); 
  
document.addEventListener('touchstart', onDocumentTouchStart, false); 
  
document.addEventListener('touchmove', onDocumentTouchMove, false); 
  
window.addEventListener('resize', onWindowResize, false);

Event handlers functions

Here all the features added in response to the events of the user interface. You need to add this code immediately after the ‘init’ function:

function onWindowResize() { 
  
    windowHalfX = window.innerWidth / 2; 
  
    windowHalfY = window.innerHeight / 2; 
  
    camera.aspect = window.innerWidth / window.innerHeight; 
  
    camera.updateProjectionMatrix(); 
  
    renderer.setSize( window.innerWidth - 20, window.innerHeight - 20 ); 
  
} 
  
function onDocumentMouseDown(event) { 
  
    event.preventDefault(); 
  
    document.addEventListener('mousemove', onDocumentMouseMove, false); 
  
    document.addEventListener('mouseup', onDocumentMouseUp, false); 
  
    document.addEventListener('mouseout', onDocumentMouseOut, false); 
  
    mouseXOnMouseDown = event.clientX - windowHalfX; 
  
    targetRotationOnMouseDown = targetRotation; 
  
} 
  
function onDocumentMouseMove(event) { 
  
    mouseX = event.clientX - windowHalfX; 
  
    targetRotation = targetRotationOnMouseDown + (mouseX - mouseXOnMouseDown) * 0.02; 
  
} 
  
function onDocumentMouseUp(event) { 
  
    document.removeEventListener('mousemove', onDocumentMouseMove, false); 
  
    document.removeEventListener('mouseup', onDocumentMouseUp, false); 
  
    document.removeEventListener('mouseout', onDocumentMouseOut, false); 
  
} 
  
function onDocumentMouseOut(event) { 
  
    document.removeEventListener('mousemove', onDocumentMouseMove, false); 
  
    document.removeEventListener('mouseup', onDocumentMouseUp, false); 
  
    document.removeEventListener('mouseout', onDocumentMouseOut, false); 
  
} 
  
function onDocumentTouchStart(event) { 
  
    if (event.touches.length == 1) { 
  
        event.preventDefault(); 
  
        mouseXOnMouseDown = event.touches[0].pageX - windowHalfX; 
  
        targetRotationOnMouseDown = targetRotation; 
  
    } 
  
} 
  
function onDocumentTouchMove(event) { 
  
    if (event.touches.length == 1) { 
  
        event.preventDefault(); 
  
        mouseX = event.touches[0].pageX - windowHalfX; 
  
        targetRotation = targetRotationOnMouseDown + (mouseX - mouseXOnMouseDown) * 0.02; 
  
    } 
  
}

Render

Finally, add a little more interactivity: making rotate the scene, move the source of light, and the camera zoom in and out of the scene. We need to modify the ready ‘render’ function:

function render() { 
  
    var timer = Date.now() * 0.00025; 
  
    group.rotation.y += (targetRotation - group.rotation.y) * 0.01; 
  
    particleLight.position.x = Math.sin(timer * 7) * 300; 
  
    particleLight.position.z = Math.cos(timer * 3) * 300; 
  
    camera.position.x = Math.cos(timer) * 1000; 
  
    camera.position.z = Math.sin(timer) * 500; 
  
    camera.lookAt(scene.position); 
  
    renderer.render(scene, camera); 
  
}

Live Demo

[sociallocker]

download in package

[/sociallocker]

Conclusion

I think that we have built a great Christmas card today. I hope we have not wasted time and you like the result. Merry Christmas and Happy New Year.

PS: I also wanted to report that was recently completed a redesign of our website, it is now fully responsive and works on mobile devices. This year we also launched a new section of web languages references. Also recently launched a new section of premium resources. It contains the most interesting scripts in the boxed version. If you either want to buy something, or even if you just want to make a donation – you are welcome.