Loading video...

Video Failed to Load

Go Home

Three.js explained for visual learners 📺 Bookmark this for future reference 🫡 Share what you are building with Three.js below 👇

54,827 views • 6 months ago •via X (Twitter)

68 Comments

AI Developer's profile picture
AI Developer6 months ago

Crazy what is possible in Three.js, in the browser! What is everyone else cooking up?

⭕ AI & Design (Marco)'s profile picture
⭕ AI & Design (Marco)6 months ago

@threejs Terminus Breach! Also playable here:

AI Developer's profile picture
AI Developer6 months ago

@threejs That actually looks awesome! Will test it out soon 🫡

⭕ AI & Design (Marco)'s profile picture
⭕ AI & Design (Marco)6 months ago

@threejs Thanks! My crown piece so far! :)

AI Developer's profile picture
AI Developer6 months ago

@threejs "So Far" 🫡

⭕ AI & Design (Marco)'s profile picture
⭕ AI & Design (Marco)6 months ago

@threejs Correct :)

K2's profile picture
K26 months ago

@threejs Building K2 where participation is the new currency

AI Developer's profile picture
AI Developer6 months ago

@threejs Using Three.JS?

ComputerChip's profile picture
ComputerChip6 months ago

@threejs Building CHAMPION Nexus - a platformer racer made in @JamangoGame, rendered in three.js. Even the keyart uses it - the character's made in @NiloTechInc's platform!

AI Developer's profile picture
AI Developer6 months ago

@threejs @JamangoGame @NiloTechInc Nice! Any vids yet? We love voxel looks!

ComputerChip's profile picture
ComputerChip6 months ago

@threejs @JamangoGame @NiloTechInc Some gameplay teasers - more content is on the way though

AI Developer's profile picture
AI Developer6 months ago

@threejs @JamangoGame @NiloTechInc Nice! You should try set something like this up, a semi-transparent block with the placement

ComputerChip's profile picture
ComputerChip6 months ago

@threejs @JamangoGame @NiloTechInc That would be cool! Probably is a platform-level change or requires some plugin implementation though, the creator kit itself is just a template that uses the Jamango editor.

Tresee Design's profile picture
Tresee Design6 months ago

@threejs

AI Developer's profile picture
AI Developer6 months ago

@threejs Nice! How is that different from a Splat?

Tresee Design's profile picture
Tresee Design6 months ago

@threejs thanks! I used triangulated geometry output by scanning apps... easier to use/switch textures, and plays better with 'legacy' 3D models... but splatting looks a lot better lately, have to look into it more; still seems to me like splatting and three.js is somewhat new?

AI Developer's profile picture
AI Developer6 months ago

@threejs Not sure how new it is honestly, but it's there :) I've seen some demos (in browser) that are just really crazy high quality, real places.

All Your Loot's profile picture
All Your Loot6 months ago

@threejs Amazing video, so much I learned here

AI Developer's profile picture
AI Developer6 months ago

@threejs Yeah, after making this I saw what is truly possible in Three.JS...the visuals and the names to go along with it! SO many ideas flowing now.

Neil Sainsbury's profile picture
Neil Sainsbury6 months ago

@threejs Get this up on youtube friend :-)

AI Developer's profile picture
AI Developer6 months ago

@threejs Will do!

Carl Bateman's profile picture
Carl Bateman6 months ago

@threejs AI slop. At least ten mistakes, the animation being particularly egregious. Also, what's the point of learning Three.js if AI can do it better?

AI Developer's profile picture
AI Developer6 months ago

I was wondering when someone would say that. As the legend themselves say: I know for a fact there are minor issues in this, and I could have spent hours more fixing them...OR, I could have shipped something that will help thousands of people. Go look at the docs for Three.JS...and tell me how a newbie is meant to learn easily from them? Random code, and some hard to find and go through demos. This gives you the visual intro to actually know WHAT is possible, and the names for them. The fact a few minor things are incorrect is irrelevant, you are not going to internalise so much, the memory cannot hold that much info. The key is you SEE what is possible, and the visual memory is far more powerful. When it comes to making something, you can easily go okay, that is what I want...that is the name, and then look up the docs or use your AI Agent to do it for you. I have experience in 3D animation and photography/cinematography, and I was using 3JS through another SDK, but not the actual library. I generated this FOR MYSELF, first the text/mapping...and then the images. It was so helpful that I wanted to share it, simple as that. Imagine if you could give this to yourself before you ever studied any of it...I guarantee you it would accelerate your learnings :) Anyway, just look at all of the people who learnt alot and are inspired, embrace the new world, you can achieve things you never dreamt of! P.S I made all of these in a few hours of effort.

Three.js's profile picture
Three.js6 months ago

@CarlBateman 100%

AI Developer's profile picture
AI Developer6 months ago

@CarlBateman Appreciate your support...I got something new cooking too ;) This will be running the real code, so no 'AI SLOP' or inaccuracies possible there :D

Barbedouce's profile picture
Barbedouce6 months ago

@threejs Some tests ! May need a desktops and gamepad for full experience.

Ray's profile picture
Ray6 months ago

@NeuralPixelAI @threejs 👀

AI Developer's profile picture
AI Developer6 months ago

@NeuralPixelAI @threejs The power of Three.js is insane when you look into it!

m4g's profile picture
m4g6 months ago

@threejs is there a written version of this? lol

AI Developer's profile picture
AI Developer6 months ago

@threejs I'll get you one 🫡 Do you mean the pics, or actual text btw?

m4g's profile picture
m4g6 months ago

@threejs Legend! Whichever is easiest for you!

AI Developer's profile picture
AI Developer6 months ago

@threejs Making a website for you now!

m4g's profile picture
m4g6 months ago

@threejs The best! Thank you sir! 🫡

AI Developer's profile picture
AI Developer6 months ago

@threejs Here you go :)

m4g's profile picture
m4g6 months ago

@threejs Leegeeeend! Thank you!

AI Developer's profile picture
AI Developer6 months ago

@threejs No problem, hope it helps :)

chriscampbell.eth's profile picture
chriscampbell.eth6 months ago

@threejs great work my friend

AI Developer's profile picture
AI Developer6 months ago

@threejs Thanks 🫡 Got some inspiration 🤔:D?

Magpie's profile picture
Magpie6 months ago

@threejs Ty helpful, cheers

AI Developer's profile picture
AI Developer6 months ago

@threejs Awesome, happy to help!

Poulas's profile picture
Poulas6 months ago

@threejs Goated info , thanks for sharing quality informations @AIOnlyDeveloper 🙏

AI Developer's profile picture
AI Developer6 months ago

@threejs No problem! You planning on making a game :)?

Poulas's profile picture
Poulas6 months ago

@threejs Yes I do , I have 0 experience on that but with those tools of AI and the studio of @threejs i think i can . It will take some time but when i have something I’ll post . Me dream is coming true of developing my own game ! Thank you for igniting it 😁

AI Developer's profile picture
AI Developer6 months ago

@threejs You don't need experience, just time and patience...and an Agent or 2 :) Start with Claude Code...or Codex :D PLANS, not API (and no, not cursor either :D).

Poulas's profile picture
Poulas6 months ago

@threejs I’ll give it a go for sure , I’m so excited about it !

AI Developer's profile picture
AI Developer6 months ago

@threejs Awesome! Let us know how u go, u know where to find me :D

꙲'s profile picture
꙲6 months ago

@threejs This is so good

AI Developer's profile picture
AI Developer6 months ago

@threejs Thanks :D Was fun to make and learn from myself!

Hovhannes Mkhitaryan's profile picture
Hovhannes Mkhitaryan6 months ago

@AwokeKnowing @threejs Bookmarked for later

AI Developer's profile picture
AI Developer6 months ago

@AwokeKnowing @threejs 🫡 Legend, hopefully it helps :)

Daniel Spitzwieser's profile picture
Daniel Spitzwieser6 months ago

@threejs goated

AI Developer's profile picture
AI Developer6 months ago

@AdonisHY @threejs Thanks, hopefully it helps you too :D

Daniel Spitzwieser's profile picture
Daniel Spitzwieser6 months ago

@threejs Very helpful resource 🔥🔥

⚖️ Balance's profile picture
⚖️ Balance6 months ago

@threejs These would be great in step by step learning app

AI Developer's profile picture
AI Developer6 months ago

@threejs Website is here btw:

⚖️ Balance's profile picture
⚖️ Balance6 months ago

@threejs We could build that into an app on balance? This what we have so far Still in production but mostly cosmetically and maybe a few extra added function

⚖️ Balance's profile picture
⚖️ Balance6 months ago

@threejs @Project2Balance

pedroil's profile picture
pedroil6 months ago

@threejs awesome

AI Developer's profile picture
AI Developer6 months ago

@threejs Hope it helps :)

🇯🇲's profile picture
🇯🇲6 months ago

@threejs thank you for this its been on my mind on how to learn threejs, this literally has all the terminology with explanations i needed for prompting

AI Developer's profile picture
AI Developer6 months ago

@threejs Yeah, this is exactly it! I was struggling too...I mapped out the code, but it wasn't enough, I needed to 'see' what it meant...and here we are! What Agents are you using?

🇯🇲's profile picture
🇯🇲6 months ago

@threejs anything frontend/design i use kimi2.5 its given me the most consistent results and even exceeded my expectations when i don't have all the right terminology

ChineseTechBro's profile picture
ChineseTechBro6 months ago

@threejs A very good summary

AI Developer's profile picture
AI Developer6 months ago

@threejs Thanks :) What are you working on :O?

Rodrigo's profile picture
Rodrigo6 months ago

@threejs link?

AI Developer's profile picture
AI Developer6 months ago

@threejs

Alvaro アルバロ's profile picture
Alvaro アルバロ6 months ago

@threejs Is a website?

AI Developer's profile picture
AI Developer6 months ago

@threejs Yes you can see it

Related Videos