Home Upgrade Search Memberlist Extras Hacker Tools Award Goals Help Wiki Contact

Javascript 

THREE.js Starter Page - Rotating Cube (3D) in JavaScript, HTML, CSS

Hey all, I am giving away this THREE.js starter page which features a 3D cube (neon green) rotating around. You can use this as a good starting point for another object for any splash screens, loading screens, or even more elaborate things like your own web game.

I generated this with GPT, fixed some bugs, and used it for something else. I am giving it away here to hopefully help some of you :) Enjoy!


Live Preview:
https://raw.githack.com/LNodesL/3D-Rotat...index.html

Source code:
https://github.com/LNodesL/3D-Rotating-Cube-THREE.js

Mirror / Source code:
https://pastebin.com/fqaikc2s
Am I really the first guy to reply to this?
Not only is the code simple(obviously) but it works. I'm yet to start working in Three.js and this already gave me an insight on the library itself. I've even used my logic to change it from a cube to a circle. Without proper knowledge.
Oh well. If you know one thing, you'll soon learn another.

I can imagine this being used by edgy hax0r simulators..
(Feb 15, 2024 02:19 PM)youuuuuuuuureeeey Wrote:  Am I really the first guy to reply to this?
Not only is the code simple(obviously) but it works. I'm yet to start working in Three.js and this already gave me an insight on the library itself. I've even used my logic to change it from a cube to a circle. Without proper knowledge.
Oh well. If you know one thing, you'll soon learn another.

I can imagine this being used by edgy hax0r simulators..

Thank you - I really appreciate your reply. It is simple, but it works and it's a lot better than trying to do all this from scratch. This is exactly why I shared it!!
Let me know if you need any help. I have a version of this where you can control the cube with WASD movements + Q/E strafing, spacebar to jump, w/ 3rd-person camera follow. It's basically World of Warcraft's movement keys for the cube & I added a flat 2D platform for the ground. I did use GPT but it still took me hours to accomplish the movements because GPT kept forgetting my requirements and could never get it all working in 1 set of code.
Its pretty dam cool! Thanks for sharing.

[Image: 524153e9b46fce5de591a5a53bbf59f2.png]
(Feb 15, 2024 03:02 PM)Popular Wrote:  Its pretty dam cool! Thanks for sharing.

[Image: 524153e9b46fce5de591a5a53bbf59f2.png]

Thanks, no problem! If you add lighting & shaders it's a lot easier to make out the cube. Without the lighting and shadows it's hard to see the cube's edges, but hope this can be a good starting point for you.
(Feb 15, 2024 03:03 PM)Hackers Wrote:  Thanks, no problem! If you add lighting & shaders it's a lot easier to make out the cube. Without the lighting and shadows it's hard to see the cube's edges, but hope this can be a good starting point for you.

For sure!

I'm going to mess around with it and make something for fun.
(Feb 15, 2024 03:56 PM)Popular Wrote:  For sure!

I'm going to mess around with it and make something for fun.

sounds good ! let us know or make a thread for it when you are done
I think you should upload this to git for your portfolio, that way others can initialize it.
[Image: 12XdAdJ.gif]
(Mar 2, 2024 02:30 PM)Hexicidal Wrote:  I think you should upload this to git for your portfolio, that way others can initialize it.

That's a great idea, here it is!

Live Preview:
https://raw.githack.com/LNodesL/3D-Rotat...index.html

Repo:
https://github.com/LNodesL/3D-Rotating-Cube-THREE.js
Very interesting, thanks for the information.
(Nov 27, 2024 04:34 AM)mikeyp Wrote:  Very interesting, thanks for the information.

No problem… don’t spam, you posted same rely everywhere


Possibly Related Threads...
Thread / Author Replies Views Last Post
by HackersJun 8, 2025 08:30 AM 9 567 Jun 8, 2025 08:30 AM
Last Post: ro0ti
[Javascript]  by N3kketNov 4, 2024 11:19 AM 0 158 Nov 4, 2024 11:19 AM
Last Post: N3kket
[Javascript]  by flexing_99Apr 29, 2023 12:02 AM 3 270 Apr 29, 2023 12:02 AM
Last Post: Zgh600