How to Create a Rotating 3D Cube in JavaScript

In this 10-minute (or so) JavaScript presentation, I walk you through how to create a 3D rotating cube using JavaScript in an HTML file. Some of the trigonometry is pretty tricky, so I don’t go into that in this video. (Maybe in a future video I will discuss this further). You can download the complete code below.

0:00 Introduction
0:39 HTML file setup
1:02 Constants
2:12 Canvas and Context
2:54 Dimensions
3:24 Colours and Lines
4:01 Animation Loop
5:21 Style and CSS
5:57 Cube Parameters
7:57 Draw the Cube
8:55 Rotate the Cube
10:46 Customisation

DOWNLOAD THE CODE SHOWN IN THE VIDEO

SOCIAL MEDIA

SOFTWARE USED TO PRODUCE THIS VIDEO

OUTRO MUSIC

#javascript #javascripttutorial #3dcube

[joshuaalan]

I've been looking to learn 3D canvas drawing for a while now without having to resort to ThreeJS
In 10 minutes you've enabled me to fully satisfy my "do it my damn self" prerogative, thank you

[vincentcleaver]

Went through this very fast but you didn't lose me

[eduartzina]

hello, awesome one, I do have a question. if I had to add images on the sides. how to do that?

[zylascope]

Thanks. Great tutorial. :) Subscribed!

[andreiscurtu]

Thank you so much keep up the awesome work

[warpixelcreative]

How do you change the depth of the cube? (Z axis length) ... I keep seeing this and ChatGPT came up with code very similar to this but when I tell it that there's nothing to change the Z size of the cube it just can't seem to do it, it keeps writing code that omits the Z axis and it's the same here.

You're rotating it on Z but there's no way to say make it a thinner cube. This is the part that I'm missing. I've made this all before but my calculation for Z axis length is flawed, it doesn't match the X and Y, so if I set X, Y, and Z to 200 each the cube is a bit deeper into the bg than it is wide and tall. And I can't seem to find anything about how to do this.

[cyberdeckcipher]

but why did you but the code on an google drive instead of an github? :~

[shubhamp_web]

It's not a "Tutorial", you're mostly pasting out pre-written code and reading it. Couldn't understand it's totally!

[thom]

Is it possible to put an image on the sides of the cube?