Render Cube using Planes geometry in Threejs

If you’re reading this article, there are high chances that you are also currently looking for a solution that I was looking back then when I needed it.

Cube rendered using planes in Threejs

Without further discussion, let’s get started with the implementation.

To build a cube geometry using plane geometry as the faces of the cube, we need to understand the cube from geometrical point of view. Cube has 6 faces. These faces in our case will be plane geometries. Each face of cube has some position & rotation relative to other faces.

We will be using Threejs to render our cube geometry. I recommend some basic understanding of Threejs to be able to understand the code ahead. But even if you’re not at all aware about anything related to coding, I still recommend you to give it a read because I assure you, it will give you a very good idea about the logic behind.

First of all, we’ll setup Scene, Camera & Renderer for Threejs.

const scene = new Scene();
const camera = new PerspectiveCamera(
  75,
  window.innerWidth / window.innerHeight,
  0.1,
  1000
);
const renderer = new WebGLRenderer();
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);

Now, we will write a function createPlane to create PlaneGeometry (which will act like face of the cube) for us of any desired size that we pass as argument to it.

const createPlane = (size) => {
  let planeGeometry = new PlaneGeometry(size, size, size);
  let material = new MeshBasicMaterial({
    color: 0xffffff * Math.random(),
    side: DoubleSide
  });
  return new Mesh(planeGeometry, material);
};

Next, we will have one more function createFacesOfCube that will create faces of the cube for us using the createPlane method.

const createFacesOfCube = () => {
  let cubeSize = 1;
  // Face 1
  let face1 = createPlane(cubeSize);
  // Face 2
  let face2 = createPlane(cubeSize);
  face2.position.z = cubeSize;
  // Face 3
  let face3 = createPlane(cubeSize);
  face3.position.x = cubeSize / 2;
  face3.rotation.y = Math.PI / 2;
  face3.position.z = cubeSize / 2;
  // Face 4
  let face4 = createPlane(cubeSize);
  face4.position.x = -cubeSize / 2;
  face4.rotation.y = Math.PI / 2;
  face4.position.z = cubeSize / 2;
  // Face 5
  let face5 = createPlane(cubeSize);
  face5.position.z = cubeSize / 2;
  face5.position.y = cubeSize / 2;
  face5.rotation.x = Math.PI / 2;
  // Face 6
  let face6 = createPlane(cubeSize);
  face6.position.z = cubeSize / 2;
  face6.position.y = -cubeSize / 2;
  face6.rotation.x = Math.PI / 2;

  return [face1, face2, face3, face4, face5, face6];
};

Okay, so now take some time to understand the above logic. Actually, it is very simple. You can see how we have just created the faces of the cube & re-positioned and re-rotated them in order for them to form a cube like geometry.

Let us now utilise the above written functions & make our cube come alive.

let faces = createFacesOfCube();
let cube = new Object3D();
cube.add(...faces);
scene.add(cube);

camera.position.z = Math.PI;
camera.position.x = Math.PI / 2;
camera.position.y = Math.PI / 2;

Here, we are getting the faces of the cube using the function that we’ve previously written. Thereafter, we’re grouping all the faces into a Threejs Object3D so as to actually make all the faces part of the cube.

Once this is done, we added our cube into the scene. Also, here we have set the camera positions to some pre-defined values just because these values are giving isometric-like look of our cube. So it’s easy to see like this.

const controls = new OrbitControls(camera, renderer.domElement);
controls.update();

const cubeUsingPlanesAndEdgesRenderer = function () {
  requestAnimationFrame(cubeUsingPlanesAndEdgesRenderer);

  controls.update();

  renderer.render(scene, camera);
};

cubeUsingPlanesAndEdgesRenderer();

Lastly, we will be rendering whatever we have been upto now. If you’re little familiar with the Threejs, above code will make sense to you. Else you can see get started section on Threejs webite here.

Note: We used OrbitControls in our code so as to make the scene interactive to mouse events. You can find the code for OrbitControls here.

Wanted to have a look on how the end result looks like? Here you go.

You can find the codesandbox link here in case the below embed does not work.

Render Cube using PlaneGeometry in Threejs

Thank you for taking out time to learn something new. I hope you learnt something from this article. I really appreciate if you give me feedback.

Connect with me.

Portfolio
LinkedIn
Email
Twitter
Github