正在加载视频...

视频加载失败

加载此视频时出现问题。这可能是由于临时网络问题，或视频可能不可用。

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

Meng To

185,202 subscribers

611,417 次观看 • 1 个月前 •via X (Twitter)

科学技术教育

Anya Rossi• Live Now

Private livecam show

0 条评论

暂无评论

原始帖子的评论将显示在这里

相关视频

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.

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 个月前

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.

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

147,074 次观看 • 1 个月前

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.

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

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 个月前

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.

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 天前

This looks straight out of Blender, but it's all code in a single HTML file at about 186 KB. Astra can create these ultra-realistic 3D product demos for landing pages. A few three.js skills let you keep looping on the details, textures, lighting, and interactions until everything feels right. Live site: Our team has been adding five landing pages and dozens of components to every week. Reusing the same components and skills has improved the quality so much.

This looks straight out of Blender, but it's all code in a single HTML file at about 186 KB. Astra can create these ultra-realistic 3D product demos for landing pages. A few three.js skills let you keep looping on the details, textures, lighting, and interactions until everything feels right. Live site: Our team has been adding five landing pages and dozens of components to every week. Reusing the same components and skills has improved the quality so much.

Meng To

58,001 次观看 • 5 天前

I made a page-flipping sketchbook inspired by Matthew Yu's concept. Books and pages are some of the most interesting UIs to explore. AI gives you the basics unless you hand it a solid open-source to work from. So I asked for drag to paginate, which took many fixes for shadows, clipping, alpha masks and logic. Then a magnifying glass that has to move out of the way when you flip a page. For images I used gpt image 2 and it's very good at these Singapore sketches. I also love adding minimal background textures like japanese paper, water painting and ornaments. That's where the personality comes from. FYI I'm using Claude Code on the desktop app. My Codex is utterly out of limits after GPT 5.6 Sol ate all my $200/m plan 2-3x faster than 5.5. From testing, Opus 5 at Extra is more efficient. Let me know if I should open-source this or give the prompts.

I made a page-flipping sketchbook inspired by Matthew Yu's concept. Books and pages are some of the most interesting UIs to explore. AI gives you the basics unless you hand it a solid open-source to work from. So I asked for drag to paginate, which took many fixes for shadows, clipping, alpha masks and logic. Then a magnifying glass that has to move out of the way when you flip a page. For images I used gpt image 2 and it's very good at these Singapore sketches. I also love adding minimal background textures like japanese paper, water painting and ornaments. That's where the personality comes from. FYI I'm using Claude Code on the desktop app. My Codex is utterly out of limits after GPT 5.6 Sol ate all my $200/m plan 2-3x faster than 5.5. From testing, Opus 5 at Extra is more efficient. Let me know if I should open-source this or give the prompts.

Meng To

133,571 次观看 • 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.

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 pretty much one-shotted this Japanese garden landing page with MiniMax Code. It got the design and frontend right, then generated the ink-wash images, ambient video, and soundtrack inside the same project. I usually need Codex or Claude Code plus Higgsfield and several MCPs for a page like this. MiniMax had everything built in, and it's at a fraction of the token cost.$

I pretty much one-shotted this Japanese garden landing page with MiniMax Code. It got the design and frontend right, then generated the ink-wash images, ambient video, and soundtrack inside the same project. I usually need Codex or Claude Code plus Higgsfield and several MCPs for a page like this. MiniMax had everything built in, and it's at a fraction of the token cost.

Meng To

76,915 次观看 • 26 天前

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:

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 个月前

I made a learning site for grades 1–7 with books for math, English, and science. My kids loved it. I used GPT-6 Astra with the Hyper3D Rodin MCP to create the 3D shelf souvenirs, candles, lamps, and pins. What stood out was the speed and quality. Rodin gave me richly detailed, high-quality, production-ready assets for the site. You can see the detail in the metalwork on the candelabra and lantern.

I made a learning site for grades 1–7 with books for math, English, and science. My kids loved it. I used GPT-6 Astra with the Hyper3D Rodin MCP to create the 3D shelf souvenirs, candles, lamps, and pins. What stood out was the speed and quality. Rodin gave me richly detailed, high-quality, production-ready assets for the site. You can see the detail in the metalwork on the candelabra and lantern.

Meng To

21,441 次观看 • 9 天前

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.

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 个月前

I recorded my entire 32mins session with In 32mins, I was able to produce a landing page with a product comparison chart. Video is uncut and at normal speed. I just added music so you don't get bored. I made this for those who haven't used and are interested to see how it works. This might be useful also for those asking me how I prompt. 700K tokens used for this session.

I recorded my entire 32mins session with In 32mins, I was able to produce a landing page with a product comparison chart. Video is uncut and at normal speed. I just added music so you don't get bored. I made this for those who haven't used and are interested to see how it works. This might be useful also for those asking me how I prompt. 700K tokens used for this session.

Melvin Vivas

56,340 次观看 • 1 年前

I tried to see how far I could push my current AI + 3D workflow and build a playable 3D game prototype in just 3 days😶 Not by asking AI to make the whole game in one prompt. I had my own idea, knew what I wanted to build, and used AI as a tool: - for concepting, - asset generation & texturing, - gameplay logic with the new UE 5.8 MCP + Claude Code. And honestly, it is crazy how far you can get now with the right workflow. Full video - #UE5 #ClaudeCode #AI3D #3DAI

I tried to see how far I could push my current AI + 3D workflow and build a playable 3D game prototype in just 3 days😶 Not by asking AI to make the whole game in one prompt. I had my own idea, knew what I wanted to build, and used AI as a tool: - for concepting, - asset generation & texturing, - gameplay logic with the new UE 5.8 MCP + Claude Code. And honestly, it is crazy how far you can get now with the right workflow. Full video - #UE5 #ClaudeCode #AI3D #3DAI

Stefan 3D AI

21,406 次观看 • 2 个月前

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

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 年前

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.

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 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 👇🏻

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 次观看 • 5 个月前

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:

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,807,567 次观看 • 2 个月前

I really like 's interactive landing page My favorite landing pages are the ones that drop you straight into the application and let you use it, you barely see that though I think it makes sense because why would you even need to sell to a customer with a big sales-y landing page if your product is impressive enough to convince them to buy it just by using it? ElevenLabs does a great mix of being able to actually use all the basic features as a demo while still being a traditional landing page This is easier with sites like Nomad List, because people just browse cities and it doesn't cost me much, but it's much harder to do this with AI apps because they cost a lot of money for every time you generate something (like photo, audio or text). One idea I had for Photo AI is to pre-generate a lot of combos of photos then on the landing page make a little demo and let them choose default models (like white man, black woman, etc.) and prompts etc. Then I just pre-gen all those combinations (like 10,000 pics, maybe $100) and I can have a demo on the landing page Unaffiliated with ElevenLabs btw, just like the website!

I really like 's interactive landing page My favorite landing pages are the ones that drop you straight into the application and let you use it, you barely see that though I think it makes sense because why would you even need to sell to a customer with a big sales-y landing page if your product is impressive enough to convince them to buy it just by using it? ElevenLabs does a great mix of being able to actually use all the basic features as a demo while still being a traditional landing page This is easier with sites like Nomad List, because people just browse cities and it doesn't cost me much, but it's much harder to do this with AI apps because they cost a lot of money for every time you generate something (like photo, audio or text). One idea I had for Photo AI is to pre-generate a lot of combos of photos then on the landing page make a little demo and let them choose default models (like white man, black woman, etc.) and prompts etc. Then I just pre-gen all those combinations (like 10,000 pics, maybe $100) and I can have a demo on the landing page Unaffiliated with ElevenLabs btw, just like the website!

@levelsio

256,002 次观看 • 1 年前