Загрузка видео...

Не удалось загрузить видео

На главную

Insane what you can create with three.js nowadays. I made a game-quality 3D experience in the browser with water ripples, smoke effects, a 3D paper menu, underwater UI, and a peeling footer. The whole thing is pure code and only 183 KB. Seriously, no loading screen needed. I combined...

MengTo's profile picture

Meng To

183,188 subscribers

27,196 просмотров • 20 часов назад •via X (Twitter)

Наука и технологииОбразованиеИгры
LIVE

Anya Rossi• Live Now

Private livecam show

Комментарии: 0

Нет доступных комментариев

Здесь появятся комментарии из оригинального поста

Похожие видео

I made a three.js landing page with 3D scrolling for every section of the site. Since AI got so good with 3D, you can replace videos with 3D instead. Apart from images, the whole site is 922 KB on disk, 290 KB gzipped. That's insane when a scrolling video site runs 20-100mb at 1080p depending on length. As usual I had to prompt for improved textures, lighting and alpha masking. I used Claude Code (desktop) with Opus 5, Higgsfield for images, and for the cloth effect on them. Inspiration was Daniel Snow's awesome landing page: Let me know if I should open-source. Don't wanna share too many without people asking.
0:38

I made a three.js landing page with 3D scrolling for every section of the site. Since AI got so good with 3D, you can replace videos with 3D instead. Apart from images, the whole site is 922 KB on disk, 290 KB gzipped. That's insane when a scrolling video site runs 20-100mb at 1080p depending on length. As usual I had to prompt for improved textures, lighting and alpha masking. I used Claude Code (desktop) with Opus 5, Higgsfield for images, and for the cloth effect on them. Inspiration was Daniel Snow's awesome landing page: Let me know if I should open-source. Don't wanna share too many without people asking.

Meng To

606,422 просмотров • 24 дней назад

I’m blown away by the quality of the landing pages that Opus 5 can create in Three.js. Prompting it with "orbit using mouse" is enough to create a 3D parallax effect. The same goes for "add particles to pointer." It’s like creating a living, breathing world. More prompts I used: - Add a butterfly that flies to the branch and flies away when I mouse over it. - During the intro, first load a wireframe of the branches, similar to the field-scanning effect in Death Stranding. - Add a scan effect to the card images while they load. Then I asked it to use the shader buttons and nav bar I made in previous projects. As explained in my last video, I started with an inspiration and the prompt, “Recreate this in Three.js in a single HTML file. Self-verify until perfect.” Opus 5 ran for two hours. All the code is less than 1 MB. Inspiration: Let me know if I should open-source this.
0:31

I’m blown away by the quality of the landing pages that Opus 5 can create in Three.js. Prompting it with "orbit using mouse" is enough to create a 3D parallax effect. The same goes for "add particles to pointer." It’s like creating a living, breathing world. More prompts I used: - Add a butterfly that flies to the branch and flies away when I mouse over it. - During the intro, first load a wireframe of the branches, similar to the field-scanning effect in Death Stranding. - Add a scan effect to the card images while they load. Then I asked it to use the shader buttons and nav bar I made in previous projects. As explained in my last video, I started with an inspiration and the prompt, “Recreate this in Three.js in a single HTML file. Self-verify until perfect.” Opus 5 ran for two hours. All the code is less than 1 MB. Inspiration: Let me know if I should open-source this.

Meng To

520,931 просмотров • 14 дней назад

I open-sourced the Kage landing page and the three.js skills behind it. The whole thing is under 1mb of three.js and code, 3mb with the hq png images. For a site where every section scrolls through a 3D world, that's surprisingly good. Live site: Repo: Skills: - build-threejs-scroll-worlds - falling-leaves - pointer-trail-emitter Btw this took a lot of tokens and prompts. A follow helps if you want more of these.
0:34

I open-sourced the Kage landing page and the three.js skills behind it. The whole thing is under 1mb of three.js and code, 3mb with the hq png images. For a site where every section scrolls through a 3D world, that's surprisingly good. Live site: Repo: Skills: - build-threejs-scroll-worlds - falling-leaves - pointer-trail-emitter Btw this took a lot of tokens and prompts. A follow helps if you want more of these.

Meng To

463,221 просмотров • 23 дней назад

Bring your stories to life with a 3D camera. Start with a single frame and turn it into a 3D scene you can move through, shot by shot. Control the camera. Set the pace. Shape the story.
0:43

Bring your stories to life with a 3D camera. Start with a single frame and turn it into a 3D scene you can move through, shot by shot. Control the camera. Set the pace. Shape the story.

Moonvalley

18,713 просмотров • 1 год назад

Why do we still buy stadium tickets without ever seeing what the view from the seat actually looks like? ☠️ So I prototyped an idea. A 3D seat view experience for a football stadium built with Fable 5 + Three.js, where you can preview exactly what you'll see from your seat before buying. The entire 3D experience was working after the first prompt, and the whole prototype came together in just five prompts. This is the kind of 3D experience I'd love to see more of, tbh. Feels so good. Right now, buying a ticket gives you almost no sense of what the experience will actually feel like. We're still relying on static seat maps, charts, and boring UI layouts, when interactive 3D experiences could make that decision so much easier. If you think, 3D development has the potential to create genuinely useful experiences. This feels like the direction we should be heading. 3D is the future. I can already imagine this for cinemas, cricket stadiums, Wimbledon, concerts, and so many other venues. I'm planning to take this further. What should I build next? More stadium features, or should I try another venue? Let me know :D Code: Live:
0:54

Why do we still buy stadium tickets without ever seeing what the view from the seat actually looks like? ☠️ So I prototyped an idea. A 3D seat view experience for a football stadium built with Fable 5 + Three.js, where you can preview exactly what you'll see from your seat before buying. The entire 3D experience was working after the first prompt, and the whole prototype came together in just five prompts. This is the kind of 3D experience I'd love to see more of, tbh. Feels so good. Right now, buying a ticket gives you almost no sense of what the experience will actually feel like. We're still relying on static seat maps, charts, and boring UI layouts, when interactive 3D experiences could make that decision so much easier. If you think, 3D development has the potential to create genuinely useful experiences. This feels like the direction we should be heading. 3D is the future. I can already imagine this for cinemas, cricket stadiums, Wimbledon, concerts, and so many other venues. I'm planning to take this further. What should I build next? More stadium features, or should I try another venue? Let me know :D Code: Live:

The Bugged Dev

1,678,108 просмотров • 1 месяц назад

I made a Dark Souls-inspired Three.js game with Sol Ultra using Codex Sites. It's fully playable in the browser. I handled the prompts, references, and libraries like img2threejs. The game has shield blocking, dodge rolls, archery, and a full inventory system. Still blows my mind that you can build a 3D game like this in a single afternoon.
0:56

I made a Dark Souls-inspired Three.js game with Sol Ultra using Codex Sites. It's fully playable in the browser. I handled the prompts, references, and libraries like img2threejs. The game has shield blocking, dodge rolls, archery, and a full inventory system. Still blows my mind that you can build a 3D game like this in a single afternoon.

Meng To

169,453 просмотров • 1 месяц назад

I made an interactive three.js site that constructs towers with weather and time of day effects. I went from making mostly static sites with huge images to three.js with highly textured, detailed 3D models, and the entire site is under 1-2mb. Because it's 3D, you can ask AI to customize everything: themed towers from different countries, ancient and modern styles, weather like snow and rain, lighting from morning to night. The surprising part is that with a solid foundation it creates those changes pretty much one-shot. It's like starting a design system, where the AI figures out how to stay consistent in quality with the rest of the design. The hard part is avoiding 3D slop, which is easier thanks to Opus 5 and open-source projects. I used Claude Code for the harness, Higgsfield to generate textures and soundfx/music. Let me know if you'd like the open-source. Inspiration: Btw, I love that we get auto-translated posts from around the world. It really expands our horizon in terms of inspiration.
0:57

I made an interactive three.js site that constructs towers with weather and time of day effects. I went from making mostly static sites with huge images to three.js with highly textured, detailed 3D models, and the entire site is under 1-2mb. Because it's 3D, you can ask AI to customize everything: themed towers from different countries, ancient and modern styles, weather like snow and rain, lighting from morning to night. The surprising part is that with a solid foundation it creates those changes pretty much one-shot. It's like starting a design system, where the AI figures out how to stay consistent in quality with the rest of the design. The hard part is avoiding 3D slop, which is easier thanks to Opus 5 and open-source projects. I used Claude Code for the harness, Higgsfield to generate textures and soundfx/music. Let me know if you'd like the open-source. Inspiration: Btw, I love that we get auto-translated posts from around the world. It really expands our horizon in terms of inspiration.

Meng To

144,302 просмотров • 22 дней назад

I built an autonomous 3D Python Game Visulizer Agent team with browser use and DeepSeek R1. It has 4 AI agents working as a team to open, code, run, and visualize the game in the browser - all on autopilot. 100% Opensource code with step-by-step tutorial.
0:54

I built an autonomous 3D Python Game Visulizer Agent team with browser use and DeepSeek R1. It has 4 AI agents working as a team to open, code, run, and visualize the game in the browser - all on autopilot. 100% Opensource code with step-by-step tutorial.

Shubham Saboo

20,047 просмотров • 1 год назад

What a tough project! As the 3D director, I oversaw the 3D team and contributed to anims, lighting, effects etc. Gathering all the assets we needed to make this a reality. Thanks to TL and the 3D team whose talent and hard work made this possible. I hope you all enjoyed it! 🌟
0:57

What a tough project! As the 3D director, I oversaw the 3D team and contributed to anims, lighting, effects etc. Gathering all the assets we needed to make this a reality. Thanks to TL and the 3D team whose talent and hard work made this possible. I hope you all enjoyed it! 🌟

Liquid Enigma

21,763 просмотров • 2 лет назад

I pasted the Three.js code from the previous 3D scene in Grok 4 from xAI and prompted it to create a variation with new shapes. The scene leverages custom GLSL shaders for particle behavior and click morphs between shapes. Open source code and workflow in the thread below. 🧵👇
0:25

I pasted the Three.js code from the previous 3D scene in Grok 4 from xAI and prompted it to create a variation with new shapes. The scene leverages custom GLSL shaders for particle behavior and click morphs between shapes. Open source code and workflow in the thread below. 🧵👇

Techartist

3,104,340 просмотров • 1 год назад

And it works!!!!!!! 😍👌 Made a whole computer room from 1995 with Three.js on the web using Claude Code (on the server) in just a few hours I can connect to the internet and surf the web, play DOOM and mIRC and read the news, all in 3d now I like going super close to the screen and see the pixels I can't get blended occlusion to work yet though (so screen still shows as a perpetual overlay), maybe mrdoob knows how to fix And I have to figure out how to add that border-radius/distortion to the screen too But very nice progress for today 😊
2:28

And it works!!!!!!! 😍👌 Made a whole computer room from 1995 with Three.js on the web using Claude Code (on the server) in just a few hours I can connect to the internet and surf the web, play DOOM and mIRC and read the news, all in 3d now I like going super close to the screen and see the pixels I can't get blended occlusion to work yet though (so screen still shows as a perpetual overlay), maybe mrdoob knows how to fix And I have to figure out how to add that border-radius/distortion to the screen too But very nice progress for today 😊

@levelsio

458,821 просмотров • 1 год назад

2D is what the camera sees.👀 3D is what the world is. 🌍 Today, we’re proudly open-sourcing QuerySplat — an open-source feed-forward 3D model that turns a few unposed images into a navigable 3D scene in seconds (run on 4090🪶). Your input: a few unposed images Our output: a sharp, navigable 3D scene — generated in seconds! 🚀 🧠 organize scenes with 3D queries, not pixel-bound Gaussians 📷 no camera poses or manual calibration required ⚡ reconstruct new scenes in a single forward pass ✨ preserve sharp geometry and high-frequency appearance 🏆 achieve state-of-the-art results on DL3DV-Evaluation 🔓 code and model weights are now open-source From pixels to scenes, we are making 3D generation scalable. Try our free iOS app — it’s a lot of fun! 😆 🔗 Try it on the Web: 🔗 Paper: 🔗 Code & weights: 🔗 Project page: 🔗 #AIGC #3DGS #AI #Computervision #3D #artist #3dartist #3d
1:13

2D is what the camera sees.👀 3D is what the world is. 🌍 Today, we’re proudly open-sourcing QuerySplat — an open-source feed-forward 3D model that turns a few unposed images into a navigable 3D scene in seconds (run on 4090🪶). Your input: a few unposed images Our output: a sharp, navigable 3D scene — generated in seconds! 🚀 🧠 organize scenes with 3D queries, not pixel-bound Gaussians 📷 no camera poses or manual calibration required ⚡ reconstruct new scenes in a single forward pass ✨ preserve sharp geometry and high-frequency appearance 🏆 achieve state-of-the-art results on DL3DV-Evaluation 🔓 code and model weights are now open-source From pixels to scenes, we are making 3D generation scalable. Try our free iOS app — it’s a lot of fun! 😆 🔗 Try it on the Web: 🔗 Paper: 🔗 Code & weights: 🔗 Project page: 🔗 #AIGC #3DGS #AI #Computervision #3D #artist #3dartist #3d

InSpatio｜影溯

29,524 просмотров • 28 дней назад

This was way too easy... I created a cute 3D character in minutes instead of hours using this combo: Unbound + Tripo I’m not a 3D artist, but this made the whole process feel simple, playful, and actually accessible. Unbound helped me shape the character idea, then Tripo turned it into a 3D model without the usual complicated workflow If you are a 3D artist or you are just starting, try Unbound. It’s free, open for everyone to experiment with, and a fun way to create characters, creatures, and 3D models without feeling overwhelmed I had so much fun using it today, and I think many visual creators are going to love it. Link in the first comment 👇🏻
0:39

This was way too easy... I created a cute 3D character in minutes instead of hours using this combo: Unbound + Tripo I’m not a 3D artist, but this made the whole process feel simple, playful, and actually accessible. Unbound helped me shape the character idea, then Tripo turned it into a 3D model without the usual complicated workflow If you are a 3D artist or you are just starting, try Unbound. It’s free, open for everyone to experiment with, and a fun way to create characters, creatures, and 3D models without feeling overwhelmed I had so much fun using it today, and I think many visual creators are going to love it. Link in the first comment 👇🏻

Amira Zairi

186,621 просмотров • 4 месяцев назад

I made a cute 3D wizard in minutes... for free The combo was simple: Unbound + Tripo. Unbound helped me shape the character idea, then Tripo turned it into a 3D model without the usual heavy workflow. The whole process felt fast, playful, and easy to experiment with If you’re a 3D artist, a visual creator, or just starting to explore 3D, try Unbound while it’s still free for a limited time. You can use it to create characters, creatures, and 3D models without feeling overwhelmed I'm sure many visual creators are going to love this Link in the first comment 👇🏻
0:38

I made a cute 3D wizard in minutes... for free The combo was simple: Unbound + Tripo. Unbound helped me shape the character idea, then Tripo turned it into a 3D model without the usual heavy workflow. The whole process felt fast, playful, and easy to experiment with If you’re a 3D artist, a visual creator, or just starting to explore 3D, try Unbound while it’s still free for a limited time. You can use it to create characters, creatures, and 3D models without feeling overwhelmed I'm sure many visual creators are going to love this Link in the first comment 👇🏻

Amira Zairi

18,116 просмотров • 4 месяцев назад

I prompted Omma to build a #threejs app with real dynamic lighting on a 3D mesh - generated from a single image, using Depth Anything v2 + Transformers from Hugging Face ⚡ Depth estimation in the browser 🫧 3D mesh from the depth map 💡 Dynamic lighting reacting to the geometry No manual code. Pure AI prompting. The future of 3D on the web feels wide open.
0:40

I prompted Omma to build a #threejs app with real dynamic lighting on a 3D mesh - generated from a single image, using Depth Anything v2 + Transformers from Hugging Face ⚡ Depth estimation in the browser 🫧 3D mesh from the depth map 💡 Dynamic lighting reacting to the geometry No manual code. Pure AI prompting. The future of 3D on the web feels wide open.

Joseph Azar

14,041 просмотров • 4 месяцев назад

Someone just built a tool that turns any object image into a fully coded, animation-ready 3d model in your browser. just drop a photo and it sculpts the object in pure Three.js code, animation-ready with pivots, physics anchors, and PBR materials. 100% free.
0:20

Someone just built a tool that turns any object image into a fully coded, animation-ready 3d model in your browser. just drop a photo and it sculpts the object in pure Three.js code, animation-ready with pivots, physics anchors, and PBR materials. 100% free.

Superman

37,025 просмотров • 1 месяц назад

Today, we’re releasing a significant upgrade to our specialized reasoning mode, Gemini 3 Deep Think. Deep Think is built to drive practical applications, enabling researchers to interpret complex data and engineers to model physical systems through code. With the updated Deep Think, you can turn a sketch into a 3D-printable reality. Deep Think analyzes the drawing, builds the complex shape, and generates a file so you can create the physical object with 3D printing. This is rolling out now to Google AI Ultra subscribers. Select the "Deep Think" option in the tools menu to get started. Learn more here:
0:35

Today, we’re releasing a significant upgrade to our specialized reasoning mode, Gemini 3 Deep Think. Deep Think is built to drive practical applications, enabling researchers to interpret complex data and engineers to model physical systems through code. With the updated Deep Think, you can turn a sketch into a 3D-printable reality. Deep Think analyzes the drawing, builds the complex shape, and generates a file so you can create the physical object with 3D printing. This is rolling out now to Google AI Ultra subscribers. Select the "Deep Think" option in the tools menu to get started. Learn more here:

Google Gemini

5,056,892 просмотров • 6 месяцев назад

Here’s my submission for the Paper x Contra challenge, it's a tool I built called Visual Poetry. I write poems and randomly associate them with things like flowers or butterflies. I built this little tool that lets me turn the words in the poems into pixels to literally draw out any object (inspired by typewriter and ASCII art). I used Pretext to render the text and Paper to tweak the whole UI, and used Cursor to help me build it I was super close to the deadline and finally managed to finish it up just in time, phew!
0:21

Here’s my submission for the Paper x Contra challenge, it's a tool I built called Visual Poetry. I write poems and randomly associate them with things like flowers or butterflies. I built this little tool that lets me turn the words in the poems into pixels to literally draw out any object (inspired by typewriter and ASCII art). I used Pretext to render the text and Paper to tweak the whole UI, and used Cursor to help me build it I was super close to the deadline and finally managed to finish it up just in time, phew!

Keerthi

15,461 просмотров • 4 месяцев назад

I'm sharing a tutorial on creating interactive 3D experiences, combining Three.js and MediaPipe hand tracking 👋💠 In this 🧵: - a step-by-step guide including the 4 prompts I used to build this demo - the open source code - Other thoughts about vibe coding
0:31

I'm sharing a tutorial on creating interactive 3D experiences, combining Three.js and MediaPipe hand tracking 👋💠 In this 🧵: - a step-by-step guide including the 4 prompts I used to build this demo - the open source code - Other thoughts about vibe coding

AA

151,255 просмотров • 1 год назад