正在加载视频...

视频加载失败

返回首页

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...

MengTo's profile picture

Meng To

188,470 subscribers

147,074 次观看 • 1 个月前 •via X (Twitter)

艺术科学技术教育
LIVE

Anya Rossi• Live Now

Private livecam show

59 条评论

🌞PPL🌞 的头像
🌞PPL🌞1 个月前

This project is so amazing that I have no choice but to request the open-source again ❤️

Meng To 的头像
Meng To1 个月前

Thanks for saying this. Don’t wanna overcrowd GitHub with all my projects

Delba 的头像
Delba1 个月前

I love the sound effects. :chef-kiss:

Meng To 的头像
Meng To1 个月前

glad you approve! anything to stand out from being generic, even adding little sounds.

ThreeJS Assets 的头像
ThreeJS Assets1 个月前

This looks really good! I wonder how long it’ll take before Three.js takes over interactive websites entirely 🤔

Meng To 的头像
Meng To1 个月前

each have their place. image/video still king. but threejs has a fighting chance now.

ThreeJS Assets 的头像
ThreeJS Assets1 个月前

Its soo good

Bishakh Neogi 的头像
Bishakh Neogi1 个月前

Meng please share some docs or md on it. Would love to recreate min!

Meng To 的头像
Meng To1 个月前

prepping the open-source process

Adel Bucetta 的头像
Adel Bucetta1 个月前

because the hard part was always rendering speed and data transfer, not writing code for interactive 3d in web apps. three.js has made this accessible, but don't underestimate the compute and storage implications of going fully 3d online

Meng To 的头像
Meng To1 个月前

it's all in one html file.

ollie 的头像
ollie1 个月前

yeah this is awesome, would if you open sourced!

Meng To 的头像
Meng To1 个月前

there you go:

ollie 的头像
ollie1 个月前

ty!!

Sarah Pan 的头像
Sarah Pan1 个月前

It's so beautiful! I think a lot of museums would love your design.

football.colmjude 的头像
football.colmjude1 个月前

I’d love to see this open source so that I could learn from it. It looks absolutely amazing

Meng To 的头像
Meng To1 个月前

from experience, having open-source projects really helped increase the quality of the 3d models

DeDi 的头像
DeDi1 个月前

轻量3D网站兼顾沉浸体验与加载性能

Mahfudz Idris 的头像
Mahfudz Idris1 个月前

🔥

薄荷清尘 的头像
薄荷清尘1 个月前

太酷了，请问能开源学习一下吗？

Meng To 的头像
Meng To1 个月前

yep preparing the process. soon.

薄荷清尘 的头像
薄荷清尘1 个月前

太好了，非常感谢！

cetusian 的头像
cetusian1 个月前

a detailed interactive 3d site under 2mb is the kind of performance flex that makes a 40mb hero video look personally offensive.

Nids Pacho 的头像
Nids Pacho1 个月前

This is amazing!

Sophia Data Queen 的头像
Sophia Data Queen1 个月前

When the “AI made this whole site” posts go crazy, the people who already refined the craft are usually ahead.

TheCoderBTW 的头像
TheCoderBTW1 个月前

Did the AI-generated textures and fx hold up across different weather and lighting conditions, or did you have to retouch some of them per scene?

Meng To 的头像
Meng To1 个月前

It's one general fault, and yes, the AI pretty much generated everything.

Abe 的头像
Abe1 个月前

My dude, do you ever sleep

Meng To 的头像
Meng To1 个月前

oh, i have way more projects than ths

Reynad 的头像
Reynad1 个月前

Looks cool! Would you be able to build a website using actual 3D objects, like with Tripo AI or Meshy AI? I hardly ever see anyone making websites like that, with 3D objects.

Meng To 的头像
Meng To1 个月前

need to experiment more, but i noticed that direct threejs is much lighter bc it's all code. but it's less consistent for sure.

紫苏子ACG 的头像
紫苏子ACG1 个月前

We look forward to the open-source version being shared with us so we can test it.

Meng To 的头像
Meng To1 个月前

it's shared on github:

Jared 宗源 的头像
Jared 宗源1 个月前

Could you tell me how these textures are created? And what about the building's objects? 😇

Meng To 的头像
Meng To1 个月前

using higgsfield/gpt image 2 to gen the textures. opus 5 can do 3d well.

Shaun Gold | Venture Comedy 的头像
Shaun Gold | Venture Comedy1 个月前

Two megs of magic.

Meng To 的头像
Meng To1 个月前

AI generating this level of 3d feels like magic

Ehsan Azish 的头像
Ehsan Azish1 个月前

the 1–2 MB is the most impressive part. interactive doesn't have to mean bloated when geometry, materials, and lighting replace a stack of pre-rendered assets.

Chris Tran (ex-Riot) 的头像
Chris Tran (ex-Riot)1 个月前

The trick is the design system underneath that keeps quality consistent. Avoiding 3D slop is the real flex. Nice job!

foryoupage archives 的头像
foryoupage archives1 个月前

This would be amazing for open source

Meng To 的头像
Meng To1 个月前

just published to github:

foryoupage archives 的头像
foryoupage archives1 个月前

thank you my friend

sandy-h 的头像
sandy-h1 个月前

yes pliz open source! gorgeous

Meng To 的头像
Meng To1 个月前

looks like another project to hit open-source soon.

Ignacio Montenegro 的头像
Ignacio Montenegro1 个月前

This is AWESOME. Is there a link to see it? It would be awesome if you open sourced it.

Meng To 的头像
Meng To1 个月前

yep, here's the link to github:

Aashir 的头像
Aashir1 个月前

You mentioend texuture for higgsfield. Did you use meshy or something else for models or right away used fable 5 or opus 5?

Meng To 的头像
Meng To1 个月前

no, i use gpt image 2 to generate the texture images which is applied to the 3d (in threejs)

Fiducial.ai 的头像
Fiducial.ai1 个月前

the whole site is under 2mb. one uncompressed hero image can be larger than that

Meng To 的头像
Meng To1 个月前

sites are so dang heavy nowadays

Adam Syed 的头像
Adam Syed1 个月前

what 3d models are you using to generate these? they look great

Meng To 的头像
Meng To1 个月前

Only Opus and references

Kimi Nguyen 的头像
Kimi Nguyen1 个月前

under 2mb with this level of detail is wild, especially with weather and time of day 💪

CryptoWars 的头像
CryptoWars1 个月前

1-2mb for all that is genuinely impressive. we pushed the same way but for a game, 100v100 in a browser tab with three.js no sign up, no wallet, no download, you just click and play. very early and we're after people to test it

Jc➔ followasy.com 的头像
Jc➔ followasy.com1 个月前

@daviaxs_

Kush 的头像
Kush1 个月前

Nice tool! List this on get a free DR21 backlink and a spot on our newsletter

Skaltek 的头像
Skaltek1 个月前

Keeping the experience under 1-2MB is the accomplishment here. Generating a scene is only step one; the constraint is making interaction and loading feel intentional on a real device.

Elizabeta Kuzevska 的头像
Elizabeta Kuzevska1 个月前

The combination of Three.js, AI, and optimized 3D assets opens up a lot of possibilities for web experiences

QDELMAGO.SOL 的头像
QDELMAGO.SOL1 个月前

Wow this is chilling

相关视频

I open-sourced my 3d towers building site and the skills I used to create well-textured three.js models. The entire site is 1.38mb gzipped, including all models, sounds and textures. Site: Github repo: Skills: - threejs-towers - threejs-weather - threejs-landscape With an open-source project you get a way better starting point. All you need is to ask what to change, how to improve it, and rebuild it for a different theme. I added Cambodia, Vietnam and Turkey, plus storms and blizzards, and those came out perfectly with one prompt. The foundation is done, so adapting it and pairing it with your taste is what takes it further. Try modern towers, different backgrounds, weather and styles. SimCity, Civilization, Warcraft, C&C, etc. It's really fun.
0:53

I open-sourced my 3d towers building site and the skills I used to create well-textured three.js models. The entire site is 1.38mb gzipped, including all models, sounds and textures. Site: Github repo: Skills: - threejs-towers - threejs-weather - threejs-landscape With an open-source project you get a way better starting point. All you need is to ask what to change, how to improve it, and rebuild it for a different theme. I added Cambodia, Vietnam and Turkey, plus storms and blizzards, and those came out perfectly with one prompt. The foundation is done, so adapting it and pairing it with your taste is what takes it further. Try modern towers, different backgrounds, weather and styles. SimCity, Civilization, Warcraft, C&C, etc. It's really fun.

Meng To

55,260 次观看 • 1 个月前

Okay, Fable 5.1 is crazy good at creating three.js sites. It’s faster, understands complex design instructions better, and recreates references with surgical precision. The English is also much easier to read. With this much power, it’s hard to settle for static sites, especially when so many AI-made sites look generic. A few things I noticed though: - It still creates generic AI illustrations if you don’t specify the images. - Difficult 3D subjects like people and dogs still become 3D slop unless I use Higgsfield 3D models. - You still have to push it to improve the textures, lighting, modeling, and small details. - Taste still matters. I had to fix overlapping elements, negative space, and scroll behavior. - I used and for the particle, VHS, and CRT effects. - Because it works faster, I go through tokens like there’s no tomorrow. Inspired by I can open-source this if anyone is interested.
0:42

Okay, Fable 5.1 is crazy good at creating three.js sites. It’s faster, understands complex design instructions better, and recreates references with surgical precision. The English is also much easier to read. With this much power, it’s hard to settle for static sites, especially when so many AI-made sites look generic. A few things I noticed though: - It still creates generic AI illustrations if you don’t specify the images. - Difficult 3D subjects like people and dogs still become 3D slop unless I use Higgsfield 3D models. - You still have to push it to improve the textures, lighting, modeling, and small details. - Taste still matters. I had to fix overlapping elements, negative space, and scroll behavior. - I used and for the particle, VHS, and CRT effects. - Because it works faster, I go through tokens like there’s no tomorrow. Inspired by I can open-source this if anyone is interested.

Meng To

182,396 次观看 • 25 天前

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

611,417 次观看 • 1 个月前

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

529,998 次观看 • 1 个月前

Opus 5 is so good at creating these exploded-view and wireframe three.js product sites. Give it a video reference and it can build the experience directly in three.js or Blender. Then keep improving the details, textures, and lighting with follow-up prompts. I got our entire design team to turn landing pages built around images and video into three.js sites. They're lighter and easier to prompt. Since everything is code, AI can make more precise changes with fewer iterations. The difference between the old image-based sites and the new three.js versions is staggering. I can also jump in after the team finishes and help refine the details. Btw, is getting 100K views a day, which is absolutely nuts. The repo reached 3.8K GitHub stars in 4 days. It's my fastest-growing open-source project by far. So I added 60 more components. I'm also looking for sponsors to help fund ThreeUI long-term so I can keep adding to it.
0:46

Opus 5 is so good at creating these exploded-view and wireframe three.js product sites. Give it a video reference and it can build the experience directly in three.js or Blender. Then keep improving the details, textures, and lighting with follow-up prompts. I got our entire design team to turn landing pages built around images and video into three.js sites. They're lighter and easier to prompt. Since everything is code, AI can make more precise changes with fewer iterations. The difference between the old image-based sites and the new three.js versions is staggering. I can also jump in after the team finishes and help refine the details. Btw, is getting 100K views a day, which is absolutely nuts. The repo reached 3.8K GitHub stars in 4 days. It's my fastest-growing open-source project by far. So I added 60 more components. I'm also looking for sponsors to help fund ThreeUI long-term so I can keep adding to it.

Meng To

233,584 次观看 • 1 个月前

This is a japanese house-tour landing page made in three.js with Fable 5.1 using the dream-loop skill. Live site: It's crazy how realistic it looks even though it's all code and under 1 MB (except images). You can tour every room, switch between seasons, see light rays through the house, and watch koi swim through realistic water. The secret sauce to ultra-realistic 3d in code is a loop like this: dream-loop gets the agent to generate a target image, compare the live 3d against it with a separate critic, and keep refining the result. Skill: Let me know if I should open-source the page.
1:19

This is a japanese house-tour landing page made in three.js with Fable 5.1 using the dream-loop skill. Live site: It's crazy how realistic it looks even though it's all code and under 1 MB (except images). You can tour every room, switch between seasons, see light rays through the house, and watch koi swim through realistic water. The secret sauce to ultra-realistic 3d in code is a loop like this: dream-loop gets the agent to generate a target image, compare the live 3d against it with a separate critic, and keep refining the result. Skill: Let me know if I should open-source the page.

Meng To

60,699 次观看 • 12 天前

It’s incredible that you can let Opus 5 run for two hours in Claude Code and get a cinematic Three.js movie inside one HTML file. It created the story, scenes, transitions, camera moves, and procedural world. Higgsfield generated the narration, sound effects, and music. I mostly helped with references for more realistic grass, added the skills I use, and asked it to keep verifying its work. It’s all open source, so you can play with the code. HTML Site: GitHub: Grass reference:
2:18

It’s incredible that you can let Opus 5 run for two hours in Claude Code and get a cinematic Three.js movie inside one HTML file. It created the story, scenes, transitions, camera moves, and procedural world. Higgsfield generated the narration, sound effects, and music. I mostly helped with references for more realistic grass, added the skills I use, and asked it to keep verifying its work. It’s all open source, so you can play with the code. HTML Site: GitHub: Grass reference:

Meng To

68,404 次观看 • 1 个月前

Here's a look behind the scenes of how I used a 3d model, generated from an image, as a "driver" for ai animation. In the near future we'll see more 3d tools that support these types of workflows, with much more emphasis on enhancing user input instead of just letting the ai do everything. I used the 3d model to generate keyframes that I then animated in Luma Dream. By using a 3d model with a diffusion "layer" done with Krea, I got quite high quality frames with a relatively high consistency as well since the AI didn't have to "hallucinate" that much. I upscaled and detailed the frames using Magnific. Using semi-detailed 3d models as drivers for gen ai is very powerful, and it allows us to use models that are sculpted in a more free-flowing type of workflow that doesn't rely so much on high surface detailing or very time-consuming finish, but instead relies more on gestural 3d sculpting. #art #ai
0:24

Here's a look behind the scenes of how I used a 3d model, generated from an image, as a "driver" for ai animation. In the near future we'll see more 3d tools that support these types of workflows, with much more emphasis on enhancing user input instead of just letting the ai do everything. I used the 3d model to generate keyframes that I then animated in Luma Dream. By using a 3d model with a diffusion "layer" done with Krea, I got quite high quality frames with a relatively high consistency as well since the AI didn't have to "hallucinate" that much. I upscaled and detailed the frames using Magnific. Using semi-detailed 3d models as drivers for gen ai is very powerful, and it allows us to use models that are sculpted in a more free-flowing type of workflow that doesn't rely so much on high surface detailing or very time-consuming finish, but instead relies more on gestural 3d sculpting. #art #ai

Martin Nebelong

48,280 次观看 • 2 年前

Astra can create beautiful three.js UIs entirely in code. You don't need an assets library or MCP to create detailed 3D models. These are all code and are easy to customize for your agent. Give Astra a video, URL, or code reference, then ask it to keep comparing the result against the reference and fixing mistakes. Liquid Glass, shaders, motion design, procedural three.js models, and full environments. All from a few prompts. Some prompts I used: "Recreate this in a single HTML file with three.js. Keep comparing it against the reference and fix any differences." "Add Liquid Glass buttons. On hover, animate the lighting around the borders and make the background gradients move slightly with the pointer. Add subtle particles." "Improve the lighting, edges, and modeling. Give the keys more depth and verify the result against the real MacBook." Too many projects I could open-source. Let me know which one should I release.
0:34

Astra can create beautiful three.js UIs entirely in code. You don't need an assets library or MCP to create detailed 3D models. These are all code and are easy to customize for your agent. Give Astra a video, URL, or code reference, then ask it to keep comparing the result against the reference and fixing mistakes. Liquid Glass, shaders, motion design, procedural three.js models, and full environments. All from a few prompts. Some prompts I used: "Recreate this in a single HTML file with three.js. Keep comparing it against the reference and fix any differences." "Add Liquid Glass buttons. On hover, animate the lighting around the borders and make the background gradients move slightly with the pointer. Add subtle particles." "Improve the lighting, edges, and modeling. Give the keys more depth and verify the result against the real MacBook." Too many projects I could open-source. Let me know which one should I release.

Meng To

105,156 次观看 • 21 天前

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 and components with a few direct prompts: - Open the hamburger menu as a 3D paper overlay {threeui 3D paper} - Add a peel effect to the footer {canvasui peel} - When the cursor passes through the heading, turn the letters into smoke {canvasui liquid object} Inspired by the amazing site. Let me know if I should open-source it.
0:37

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 and components with a few direct prompts: - Open the hamburger menu as a 3D paper overlay {threeui 3D paper} - Add a peel effect to the footer {canvasui peel} - When the cursor passes through the heading, turn the letters into smoke {canvasui liquid object} Inspired by the amazing site. Let me know if I should open-source it.

Meng To

39,688 次观看 • 27 天前

✨ I made a little demo of #vibejam sponsor Tripo and how you can use it to generate assets for your games In this case I'm generating an apartment flat that's half destroyed and open for my drone sim to fly around, take cover and shoot at enemies from First I write the prompt and select Nano Banana to generate an image first, I get a few different ones, and I select the one I like Then that one is converted into a 3d object called a Smart Mesh Smart Mesh is different than regular image-to-3d models because usually you get issues with uneven polygon distribution, too dense geometry and poor edge flow, so while you think you save time with generating it with AI you end up doing lots of editing after to fix the topology which kinda defeats the point Smart Mesh doesn't have any of this, it's fast and clean low-poly models you can drop into your game Anyway, after generating the model I can then see it in 3d, and if I don't like it, regenerate it, or if I like it start texturing it Once that's done, I export it as a GLB, FBX or OBJ and drop it in (usually I use GLB as ThreeJS seems to prefer that), in my case I just drop the URL into Cursor and let it figure out the placement of the asset into my game!
1:20

✨ I made a little demo of #vibejam sponsor Tripo and how you can use it to generate assets for your games In this case I'm generating an apartment flat that's half destroyed and open for my drone sim to fly around, take cover and shoot at enemies from First I write the prompt and select Nano Banana to generate an image first, I get a few different ones, and I select the one I like Then that one is converted into a 3d object called a Smart Mesh Smart Mesh is different than regular image-to-3d models because usually you get issues with uneven polygon distribution, too dense geometry and poor edge flow, so while you think you save time with generating it with AI you end up doing lots of editing after to fix the topology which kinda defeats the point Smart Mesh doesn't have any of this, it's fast and clean low-poly models you can drop into your game Anyway, after generating the model I can then see it in 3d, and if I don't like it, regenerate it, or if I like it start texturing it Once that's done, I export it as a GLB, FBX or OBJ and drop it in (usually I use GLB as ThreeJS seems to prefer that), in my case I just drop the URL into Cursor and let it figure out the placement of the asset into my game!

@levelsio

72,338 次观看 • 5 个月前

Derrick Milano about working with BTS 🙏🧎‍♀️ ‘The biggest part for me working with them is just really like, they really love creating music. It doesn't seem like they're in it for the money. It doesn't seem like they're in it for clout. It seems like they really genuinely and passionately love music. I think we need to see that more because it's a gift from God that we have and we can't take it for granted because at any point in time it can get taken away. So when you do have the opportunity and the luxury and you do have the pleasure to work with amazing people and you're able to put this stuff out, take advantage of it, and I think THEY take advantage of it to the fullest extent, from their music videos to the performance to the recording to the engineering to who they collaborate with. They use it to the fullest extent, and I think that's why it's so receptive and it's performing the way it is, because they go above and beyond for their work and their process and their product.’
0:52

Derrick Milano about working with BTS 🙏🧎‍♀️ ‘The biggest part for me working with them is just really like, they really love creating music. It doesn't seem like they're in it for the money. It doesn't seem like they're in it for clout. It seems like they really genuinely and passionately love music. I think we need to see that more because it's a gift from God that we have and we can't take it for granted because at any point in time it can get taken away. So when you do have the opportunity and the luxury and you do have the pleasure to work with amazing people and you're able to put this stuff out, take advantage of it, and I think THEY take advantage of it to the fullest extent, from their music videos to the performance to the recording to the engineering to who they collaborate with. They use it to the fullest extent, and I think that's why it's so receptive and it's performing the way it is, because they go above and beyond for their work and their process and their product.’

Lore ⊙⊝⊜ ᴀʀɪʀᴀɴɢ

27,070 次观看 • 5 个月前

This is one of the coolest open-source AI agent projects I've seen in a while: 'Understand Anything' It's a plugin for Claude Code, Codex, OpenCode etc. that analyzes your codebase and turns it into a knowledge base that you can interact with. It explains the codebase to you, rather than showing you the structure. It seems like it's designed for code but I opened my Obsidian vault of podcast highlights in Claude Code, then ran /understand. The result is a knowledge graph that I can search of highlights from 888 podcast episodes and 144K lines of markdown text.
0:22

This is one of the coolest open-source AI agent projects I've seen in a while: 'Understand Anything' It's a plugin for Claude Code, Codex, OpenCode etc. that analyzes your codebase and turns it into a knowledge base that you can interact with. It explains the codebase to you, rather than showing you the structure. It seems like it's designed for code but I opened my Obsidian vault of podcast highlights in Claude Code, then ran /understand. The result is a knowledge graph that I can search of highlights from 888 podcast episodes and 144K lines of markdown text.

Dan McAteer

174,887 次观看 • 3 个月前

Day 33 of vibe coding a game+engine using Cursor So I approached character animation from a different perspective this time. Instead of 3D -> 2D I went for native 2D via image to video method. This gives us much richer animations that the limited ones we get with 3D! Eliza is really cute with these! The downside is the time it takes to get them all done, even with Cursor skills/automation. Which ones did you like more? Check the previous posts for the 3D ones!
1:55

Day 33 of vibe coding a game+engine using Cursor So I approached character animation from a different perspective this time. Instead of 3D -> 2D I went for native 2D via image to video method. This gives us much richer animations that the limited ones we get with 3D! Eliza is really cute with these! The downside is the time it takes to get them all done, even with Cursor skills/automation. Which ones did you like more? Check the previous posts for the 3D ones!

Startracker 🔺

33,327 次观看 • 8 个月前

I made tons of money building websites for people and small companies. Most of that is now gone. You can now generate, customize, and deploy a website using natural language. I recorded myself building a site from scratch using 10Web.io. 4 minutes later, I had a full website generated just for me. Crazy! That's mostly how I paid rent when I graduated college: I'd either build you a new site or make changes to an existing one. It's nuts anyone can do that today by just asking. But this doesn't stop with generating a website. 10Web also released an AI Copilot that you can use to edit a website with a chat-based AI assistant. Here is what you can do with the AI Copilot: 1. You can edit individual elements and widgets on your site by selecting them and describing the changes you want. 2. You can generate new images, create sections, and generate or edit text. 3. You can also add any new elements to the site. The best way to understand how much progress we've made is by looking at the AI Copilot in action: And the funny part is that we are just figuring out how to use AI models. 2025 will be crazy.
4:17

I made tons of money building websites for people and small companies. Most of that is now gone. You can now generate, customize, and deploy a website using natural language. I recorded myself building a site from scratch using 10Web.io. 4 minutes later, I had a full website generated just for me. Crazy! That's mostly how I paid rent when I graduated college: I'd either build you a new site or make changes to an existing one. It's nuts anyone can do that today by just asking. But this doesn't stop with generating a website. 10Web also released an AI Copilot that you can use to edit a website with a chat-based AI assistant. Here is what you can do with the AI Copilot: 1. You can edit individual elements and widgets on your site by selecting them and describing the changes you want. 2. You can generate new images, create sections, and generate or edit text. 3. You can also add any new elements to the site. The best way to understand how much progress we've made is by looking at the AI Copilot in action: And the funny part is that we are just figuring out how to use AI models. 2025 will be crazy.

Santiago

57,967 次观看 • 1 年前

I built an entire Gothic basilica with Opus 5.5, and I’ve open-sourced it. ⛪✨ Basilica of Celestial Light is especially close to my heart. I genuinely loved creating this church. Working on it brought me a real sense of peace, and being able to share it with everyone feels just as meaningful. Everything was created with Opus 5.5, entirely in code. No external assets: no imported 3D models, image textures, or audio files. The architecture, stained glass, landscape, lighting, and soundscape are all generated at runtime with Three.js. You can walk through the nave, visit the crypt, climb the bell tower, explore the gardens, or take the guided tour, all directly in your browser. The project is open source under the MIT license. Explore it, learn from it, change it, fork it, and make something of your own. I’d genuinely love to see what others create from it. Source code: Play it here: I hope you find a little of the peace I felt while creating it.
1:53

I built an entire Gothic basilica with Opus 5.5, and I’ve open-sourced it. ⛪✨ Basilica of Celestial Light is especially close to my heart. I genuinely loved creating this church. Working on it brought me a real sense of peace, and being able to share it with everyone feels just as meaningful. Everything was created with Opus 5.5, entirely in code. No external assets: no imported 3D models, image textures, or audio files. The architecture, stained glass, landscape, lighting, and soundscape are all generated at runtime with Three.js. You can walk through the nave, visit the crypt, climb the bell tower, explore the gardens, or take the guided tour, all directly in your browser. The project is open source under the MIT license. Explore it, learn from it, change it, fork it, and make something of your own. I’d genuinely love to see what others create from it. Source code: Play it here: I hope you find a little of the peace I felt while creating it.

Token Gremlin

13,563 次观看 • 3 天前

Only if education could be this interactive ❤️‍🔥 I've had a looong wish to build something genuinely useful through vibe coding, and I finally did it. A 3D human anatomy application built with Three.js using GPT 5.6 Sol. It all started with a single design image that I created using GPT Image 2.0. I then used it to generate every 3D organ image, one by one. Next, I converted each of those images into 3D models using Tripo (and no, they didn't sponsor this 😄). After that, I opened Codex, wrote a master prompt based on the design, and gave it the prompt, the design image, and all the 3D models. Codex built the first version beautifully, but there was one big problem. Every single 3D model was nearly 120-150 MB. That obviously wasn't practical for the web and was giving a performance of 16fps. After a few iterations, Codex optimized each model down to roughly 2–5.5 MB while preserving the visual quality, reducing the total asset size from ~900 MB to just 28.6 MB. And each model loads on demand. Along the way, Codex also generated those anatomical illustrations showing where each organ sits in the human body, and even created the interactive hotspot markers that explain different parts of every organ. It handled all of that. The process wasn't exactly one shot, but it also wasn't difficult. You just have to do it step by step. It genuinely felt like building something that could make learning anatomy much more engaging. The inspiration came from Dilum Sanjaya's 3D animal plant cell project. I remember seeing it and thinking, "I want to build something like this one day." And I did it :D Live: Code:
0:43

Only if education could be this interactive ❤️‍🔥 I've had a looong wish to build something genuinely useful through vibe coding, and I finally did it. A 3D human anatomy application built with Three.js using GPT 5.6 Sol. It all started with a single design image that I created using GPT Image 2.0. I then used it to generate every 3D organ image, one by one. Next, I converted each of those images into 3D models using Tripo (and no, they didn't sponsor this 😄). After that, I opened Codex, wrote a master prompt based on the design, and gave it the prompt, the design image, and all the 3D models. Codex built the first version beautifully, but there was one big problem. Every single 3D model was nearly 120-150 MB. That obviously wasn't practical for the web and was giving a performance of 16fps. After a few iterations, Codex optimized each model down to roughly 2–5.5 MB while preserving the visual quality, reducing the total asset size from ~900 MB to just 28.6 MB. And each model loads on demand. Along the way, Codex also generated those anatomical illustrations showing where each organ sits in the human body, and even created the interactive hotspot markers that explain different parts of every organ. It handled all of that. The process wasn't exactly one shot, but it also wasn't difficult. You just have to do it step by step. It genuinely felt like building something that could make learning anatomy much more engaging. The inspiration came from Dilum Sanjaya's 3D animal plant cell project. I remember seeing it and thinking, "I want to build something like this one day." And I did it :D Live: Code:

The Bugged Dev

2,104,493 次观看 • 1 个月前

I've been working on web projects with Three.js more and more lately — 2D, 3D, XR — and the one thing I've noticed is the lack of tools compared to game engines. That's why I decided to start building on the side a library of 3D assets that are actually little programs, AI-native, and fully customizable. I called this @polyfork_ , and it's already being used by dozens of people that have an AI centric workflow, since the website can be fully understood and used by agents. Assets are being built each day, at a rate of 100+ a week, and I'm planning to make it the biggest programmatic-3D library on the internet. Almost half of the models are free, and I opened slots for "founding" members, who can make a one-time payment for lifetime access, with access to all current models and kits, plus everything built from now on. Get one before they run out.
0:29

I've been working on web projects with Three.js more and more lately — 2D, 3D, XR — and the one thing I've noticed is the lack of tools compared to game engines. That's why I decided to start building on the side a library of 3D assets that are actually little programs, AI-native, and fully customizable. I called this @polyfork_ , and it's already being used by dozens of people that have an AI centric workflow, since the website can be fully understood and used by agents. Assets are being built each day, at a rate of 100+ a week, and I'm planning to make it the biggest programmatic-3D library on the internet. Almost half of the models are free, and I opened slots for "founding" members, who can make a one-time payment for lifetime access, with access to all current models and kits, plus everything built from now on. Get one before they run out.

Lucas Martinic

40,010 次观看 • 1 个月前

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

467,269 次观看 • 1 个月前