+- Hack Forums (https://hackforums.net)
+-- Forum: Tech (https://hackforums.net/forumdisplay.php?fid=444)
+--- Forum: Coding (https://hackforums.net/forumdisplay.php?fid=151)
+---- Forum: Web Development (https://hackforums.net/forumdisplay.php?fid=183)
+---- Thread: [Javascript] THREE.js Starter Page - Rotating Cube (3D) in JavaScript, HTML, CSS (/showthread.php?tid=6263715)
THREE.js Starter Page - Rotating Cube (3D) in JavaScript, HTML, CSS - Hackers - Feb 13, 2024
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-Rotating-Cube-THREE.js/main/index.html
Source code:
https://github.com/LNodesL/3D-Rotating-Cube-THREE.js
Mirror / Source code:
https://pastebin.com/fqaikc2s
RE: THREE.js Starter Page - Rotating Cube (3D) in JavaScript, HTML, CSS - youuuuuuuuureeeey - Feb 15, 2024
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..
RE: THREE.js Starter Page - Rotating Cube (3D) in JavaScript, HTML, CSS - Hackers - Feb 15, 2024
(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.
RE: THREE.js Starter Page - Rotating Cube (3D) in JavaScript, HTML, CSS - Popular - Feb 15, 2024
Its pretty dam cool! Thanks for sharing.
![[Image: 524153e9b46fce5de591a5a53bbf59f2.png]](https://i.gyazo.com/524153e9b46fce5de591a5a53bbf59f2.png)
RE: THREE.js Starter Page - Rotating Cube (3D) in JavaScript, HTML, CSS - Hackers - Feb 15, 2024
(Feb 15, 2024 03:02 PM)Popular Wrote: Its pretty dam cool! Thanks for sharing.
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.
RE: THREE.js Starter Page - Rotating Cube (3D) in JavaScript, HTML, CSS - Popular - Feb 15, 2024
(Feb 15, 2024 03:03 PM)nodes 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.
RE: THREE.js Starter Page - Rotating Cube (3D) in JavaScript, HTML, CSS - Hackers - Feb 27, 2024
(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
RE: THREE.js Starter Page - Rotating Cube (3D) in JavaScript, HTML, CSS - Hexicidal - Mar 2, 2024
I think you should upload this to git for your portfolio, that way others can initialize it.
RE: THREE.js Starter Page - Rotating Cube (3D) in JavaScript, HTML, CSS - Hackers - Mar 2, 2024
(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-Rotating-Cube-THREE.js/main/index.html
Repo:
https://github.com/LNodesL/3D-Rotating-Cube-THREE.js
RE: THREE.js Starter Page - Rotating Cube (3D) in JavaScript, HTML, CSS - mikeyp - Nov 27, 2024
Very interesting, thanks for the information.
RE: THREE.js Starter Page - Rotating Cube (3D) in JavaScript, HTML, CSS - Hackers - Nov 27, 2024
(Nov 27, 2024 04:34 AM)mikeyp Wrote: Very interesting, thanks for the information.
No problem… don’t spam, you posted same rely everywhere