How to build a 3D textured cube using Three.js

virginie Bonnet
Nov 27, 2020
2 min read

Updated: Dec 17, 2020

There are different shapes and animation features we can choose from on threejs.org. For this tutorial, we will focus on a simple revolving cube to which we can apply the texture of our choice.

1. HTML template

Save the following html template locally along with a copy of three.js in the js/directory of your choice and open it in your browser.

<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8" />

<title>My first three.js app</title>

<style>

body {

margin: 0;

}

canvas {

display: block;

}

</style>

body { margin: 0; } canvas { width: 100%; height: 100%; }

</head>

<body>

<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r122/three.min.js"></script>

<script src="main.js">

// Our Javascript will go here.

</script>

</body>

</html>

2. Create a Scene, a Camera and a Renderer

Before we can use the Three.js technology, we first need to set up three things: “a scene” (allows us to set up what and where is to be rendered), a camera and a renderer (to render the scene using the camera).

The scene is where you set up your object, light and camera – yes, it does sound like the shooting of a movie.

function init() {

let scene, camera, renderer, cube;

scene = new THREE.Scene();

The init function is used to initialize so the background doesn’t resize when we change the size of the window.

Create a camera: there are different cameras you can choose from. In this example, we will use the Perspective projection (P), which takes the following arguments:

- Fov: vertical field of view

- Aspect: aspect ratio

- Near: near plane

- Far: far plane

camera = new THREE.PerspectiveCamera(

75,

window.innerWidth /window.innerHeight,

0.1,

1000

);

Set the size of the Renderer:

renderer.setSize(window.innerWidth, window.innerHeight);

Render the renderer in the html. We get a black background at this point where we can render our object:

document.body.appendChild(renderer.domElement);

3. Time to create our object

We are going to use a BoxGeometry: BoxGeometry is a geometry class for a rectangular cuboid to which we give a certain 'width', 'height', and 'depth'. There is a code example mentioned in the documentation that we can use:

const geometry = new THREE.BoxGeometry( 2, 2, 2 );

We are mentioning the depth, width and height in the parenthesis.

If we want to paint the cube with a certain color, this is how we do it:

const material = new THREE.MeshBasicMaterial( {color: 0xFF00FF} );

If, like in this tutorial, we prefer using a texture/material fabric, we can render it that way:

const texture = new THREE.TextureLoader().load("textures/6.jpg");

const material = new THREE.MeshBasicMaterial( {map: texture} )

cube = new THREE.Mesh( geometry, material);

Let’s now add our cube to the scene…

scene.add( cube );

… and adjust the camera position. We need to reposition the camera before calling the function animate:

camera.position.z = 5;

Now we need a function. We are going to create a loop that makes the render draw the scene every time it is refreshed:

function animate () {

requestAnimationFrame(animate);

cube.rotation.x += 0.01; //this is the speed)

cube.rotation.y += 0.01; // this makes it rotate

renderer.render(scene, camera);

}

After that, we need to fix the resizing of the window:

function onWindowResize() {

// set camera aspect ratio

camera.aspect = window.innerWidth/window.innerHeight;

//update the camera with the below method

camera.updateProjectionMatrix();

// set the rendering size again

renderer.setSize(window.innerWidth, window.innerHeight);

}

4. Event Listener

Finally, we need to set up an event listener to call the function above:

window.addEventListener("resize", onWindowResize, false)

Let’s now call init and animate:

init();

animate();

There you go! You can play with different textures and colors if you'd like.

Comments