When you hear the word 3D, the first shape that is visualized is a cube. Without a cube, the concept of 3D drawing is incomplete. So, here is a recipe on cubes. This recipe is a demonstration of four cubes: the first with multicolored faces, the second with a wireframe, the third with the same texture on each face, and the fourth with different textures on each face. The output looks as follows:
The HTML code:
<html>
<head>
<title>Cubes</title>
<script src="../threeLib/build/three.min.js"></script>
<script src="cubes.js">
</script>
</head>
<body onload="init()">
<center>
<canvas width="1000" height="600" id="MyCanvasArea" style="border:2px solid blue;" tabindex="0">
Canvas tag is not supported by your browser
</canvas>
<h1>3D rotating cubes using three.js</h1>
<h1>Use arrow keys to make the shapes rotate.<br>
Press Enter key or spacebar to reset...