正在加载视频...

视频加载失败

返回首页

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

MengTo's profile picture

Meng To

184,404 subscribers

68,868 次观看 • 18 小时前 •via X (Twitter)

艺术科学技术教育
LIVE

Anya Rossi• Live Now

Private livecam show

0 条评论

暂无评论

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

相关视频

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

524,762 次观看 • 20 天前

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

I open-sourced the Sylva three.js site and the skills behind it. I started with one reference and asked Opus 5 to recreate it in Three.js as a single HTML file (looped for 2 hours). The moss root is procedural geometry with around 130,000 instanced blades, and all the code is under 1 MB. Live site: Repo: I turned the main interactions into three reusable skills: - threejs-wireframe-scan-reveal - threejs-pointer-orbit - threejs-gpu-particle-spray Skills repo:
0:38

I open-sourced the Sylva three.js site and the skills behind it. I started with one reference and asked Opus 5 to recreate it in Three.js as a single HTML file (looped for 2 hours). The moss root is procedural geometry with around 130,000 instanced blades, and all the code is under 1 MB. Live site: Repo: I turned the main interactions into three reusable skills: - threejs-wireframe-scan-reveal - threejs-pointer-orbit - threejs-gpu-particle-spray Skills repo:

Meng To

131,716 次观看 • 19 天前

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

229,489 次观看 • 12 天前

I open-sourced ThreeUI, my library of three.js components and landing pages. 160+ are free, and the tool is free too. It includes procedural 3D hero sections, icons, and motion designs. Copy the prompt or source, give it to your agent, then change the theme, lighting, motion or layout. Live site: Repo: I'm adding a lot more soon. Pro comes with 50+ extra components, MCP, and skills. Early adopters get 50% off right now.
0:49

I open-sourced ThreeUI, my library of three.js components and landing pages. 160+ are free, and the tool is free too. It includes procedural 3D hero sections, icons, and motion designs. Copy the prompt or source, give it to your agent, then change the theme, lighting, motion or layout. Live site: Repo: I'm adding a lot more soon. Pro comes with 50+ extra components, MCP, and skills. Early adopters get 50% off right now.

Meng To

1,290,682 次观看 • 16 天前

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

From time to time, people ask me how I make models so close to the reference, so here it goes: I work in orthographic view on one screen for modeling, and on the other, I keep a viewport with the camera aligned and the reference in front at low opacity using PureRef or Kuadro
0:56

From time to time, people ask me how I make models so close to the reference, so here it goes: I work in orthographic view on one screen for modeling, and on the other, I keep a viewport with the camera aligned and the reference in front at low opacity using PureRef or Kuadro

Vicente Moscardó Ribes

53,280 次观看 • 1 年前

Here's what you get when you let Claude Code run wild on an idea. I didn't add any specific prompts for these details. The first prompt was to create a theme park, then let it keep iterating and improving. The result looks amazing
0:32

Here's what you get when you let Claude Code run wild on an idea. I didn't add any specific prompts for these details. The first prompt was to create a theme park, then let it keep iterating and improving. The result looks amazing

Dilum Sanjaya

16,310 次观看 • 7 个月前

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

37,422 次观看 • 6 天前

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 次观看 • 27 天前

Astra built this three.js game with gorgeous graphics, then recreated every scene in Blender and made the trailer too. It feels like a massive upgrade from Sol for 3D graphics and front-end design. The UI feels way more polished and less like AI slop. The rocks, trees, monuments, and characters are all procedural code, keeping the game under 2 MB before the image and music assets. The level of autonomy is unbelievable. It needed very little steering, though I still had to keep pushing it to work harder on the details. The UI icons, buttons, and ornaments were made as transparent PNGs with GPT Image 2.
1:13

Astra built this three.js game with gorgeous graphics, then recreated every scene in Blender and made the trailer too. It feels like a massive upgrade from Sol for 3D graphics and front-end design. The UI feels way more polished and less like AI slop. The rocks, trees, monuments, and characters are all procedural code, keeping the game under 2 MB before the image and music assets. The level of autonomy is unbelievable. It needed very little steering, though I still had to keep pushing it to work harder on the details. The UI icons, buttons, and ornaments were made as transparent PNGs with GPT Image 2.

Meng To

120,598 次观看 • 1 天前

A single 2D image → a 110,745-triangle 3D monster with 27 animations, running live in the browser. This is the Abyss Monster, built with img2threejs: The workflow: Image → 3D Reconstruction → Reference GLB + Specs → Rig → Animation Loops → VFX → Interactive Three.js 🔥 Inside this demo: 1/ 110,745 triangles reconstructed from the reference image 2/ 27 animation clips - Spin Flurry, Leap & Stomp, Charge, Collapse & more 3/ Reference-driven rig & animation workflow 4/ Dynamic lighting 5/ Real-time floating ember VFX 6/ Interactive WebGL character What I find most interesting is the workflow itself. The character and scene are built through a multi-prompt workflow, using visual references, GLB specs and animation loops to progressively construct the Three.js experience. Then, for the VFX, I used a single focused prompt to create the floating ember effect and integrate it into the scene. The final result is Three.js + TypeScript code - turning a visual reference into a programmable, interactive web experience. I’ll share the VFX prompt in the comments. 👇 #ThreeJS #WebGL #GameDev #TypeScript #Web3D #img2threejs
1:19

A single 2D image → a 110,745-triangle 3D monster with 27 animations, running live in the browser. This is the Abyss Monster, built with img2threejs: The workflow: Image → 3D Reconstruction → Reference GLB + Specs → Rig → Animation Loops → VFX → Interactive Three.js 🔥 Inside this demo: 1/ 110,745 triangles reconstructed from the reference image 2/ 27 animation clips - Spin Flurry, Leap & Stomp, Charge, Collapse & more 3/ Reference-driven rig & animation workflow 4/ Dynamic lighting 5/ Real-time floating ember VFX 6/ Interactive WebGL character What I find most interesting is the workflow itself. The character and scene are built through a multi-prompt workflow, using visual references, GLB specs and animation loops to progressively construct the Three.js experience. Then, for the VFX, I used a single focused prompt to create the floating ember effect and integrate it into the scene. The final result is Three.js + TypeScript code - turning a visual reference into a programmable, interactive web experience. I’ll share the VFX prompt in the comments. 👇 #ThreeJS #WebGL #GameDev #TypeScript #Web3D #img2threejs

Nick

11,026 次观看 • 5 天前

5 steps to create amazing videos like the one below from HTML for free: Install HyperFrames in your favorite coding harness (e.g., Codex or Claude Code). Then... 1. Gather your assets Create a project folder and add screenshots, logos, website captures, reference clips, and a frame md to give Hyperframes the raw material for your video. If you have a design md you can convert it to a frame md here: 📌 Watch Jake Moran cover all 5 steps live: ...or keep reading below 👇
0:54

5 steps to create amazing videos like the one below from HTML for free: Install HyperFrames in your favorite coding harness (e.g., Codex or Claude Code). Then... 1. Gather your assets Create a project folder and add screenshots, logos, website captures, reference clips, and a frame md to give Hyperframes the raw material for your video. If you have a design md you can convert it to a frame md here: 📌 Watch Jake Moran cover all 5 steps live: ...or keep reading below 👇

Peter Yang

24,954 次观看 • 2 个月前

Here's a little demo I made in Spline v2 using the new AI Agent Mode. This is in the editor, in preview mode. You can try it too, I just gave it this prompt: "Create a cloth simulation and make it interact with this sphere. Let me move the sphere around and grab the cloth. Add a floor and some obstacles." The code can update the geometry of any object in the scene, and play with vertices and normals. I'd love to see what you can create with Spline. Let's go!! 🚀
0:24

Here's a little demo I made in Spline v2 using the new AI Agent Mode. This is in the editor, in preview mode. You can try it too, I just gave it this prompt: "Create a cloth simulation and make it interact with this sphere. Let me move the sphere around and grab the cloth. Add a floor and some obstacles." The code can update the geometry of any object in the scene, and play with vertices and normals. I'd love to see what you can create with Spline. Let's go!! 🚀

Joseph Azar

21,398 次观看 • 16 天前

Fable 5 is back. So I gave it one of my favorite frontend tests: one prompt + one reference image. The task: rebuild a 3D globe dashboard.🌎 The result was almost too good. It did not just make a working page. The texture, lighting, spacing, depth, glass panels, and overall layout were all close to the reference. Some parts felt nearly pixel-level.
0:29

Fable 5 is back. So I gave it one of my favorite frontend tests: one prompt + one reference image. The task: rebuild a 3D globe dashboard.🌎 The result was almost too good. It did not just make a working page. The texture, lighting, spacing, depth, glass panels, and overall layout were all close to the reference. Some parts felt nearly pixel-level.

Kai

116,405 次观看 • 2 个月前

I'm not a 3d modeler. I barely know how to open blender let alone do anything functional in it. But with the siddharth ahuja blender MCP and Claude I was able to vibe code an entire environment for my upcoming grow a garden game in Portals Claude used the MCP to assemble and arrange every single asset in this space (i literally don't even know how to import an asset into blender lol) within the spawn of a few hours and with access to a folder of low poly assets. When I had it start doing its own modeling, it even matched the style of the environment to keep things consistent If you are building UGC games and you don't know anything about modeling or design like me, you gotta try it out...
0:45

I'm not a 3d modeler. I barely know how to open blender let alone do anything functional in it. But with the siddharth ahuja blender MCP and Claude I was able to vibe code an entire environment for my upcoming grow a garden game in Portals Claude used the MCP to assemble and arrange every single asset in this space (i literally don't even know how to import an asset into blender lol) within the spawn of a few hours and with access to a folder of low poly assets. When I had it start doing its own modeling, it even matched the style of the environment to keep things consistent If you are building UGC games and you don't know anything about modeling or design like me, you gotta try it out...

Hugh MFER (PORTALS Guy)

180,679 次观看 • 7 个月前

Kimi. Kimi. Kimi. 🔥 You can literally build a beautiful website in a couple of hours using Kimi.ai 3D effects, images, UI elements, everything gets generated on its own. You don't have to spend time finding assets, fonts, or any other design resources. This is the kind of intelligence I want from AI. Give it a prompt and a reference, and it should figure out the rest. Generate the assets, coordinate the sub agents, and ship a complete experience. That's the future. Live: Code: Design:
0:32

Kimi. Kimi. Kimi. 🔥 You can literally build a beautiful website in a couple of hours using Kimi.ai 3D effects, images, UI elements, everything gets generated on its own. You don't have to spend time finding assets, fonts, or any other design resources. This is the kind of intelligence I want from AI. Give it a prompt and a reference, and it should figure out the rest. Generate the assets, coordinate the sub agents, and ship a complete experience. That's the future. Live: Code: Design:

The Bugged Dev

30,724 次观看 • 1 个月前

After testing img2threejs by Nick, I used the exact same Canyon gravel bike image with Blender MCP. The difference is pretty clear: Blender produced a much more detailed and faithful reconstruction, especially around the frame geometry, cockpit, drivetrain and braking system. img2threejs remains incredibly fast for generating a procedural Three.js result directly from an image, while Blender MCP offers much more control and precision when you want to push the reconstruction further. Same reference image, two completely different workflows. Which result do you prefer?
0:39

After testing img2threejs by Nick, I used the exact same Canyon gravel bike image with Blender MCP. The difference is pretty clear: Blender produced a much more detailed and faithful reconstruction, especially around the frame geometry, cockpit, drivetrain and braking system. img2threejs remains incredibly fast for generating a procedural Three.js result directly from an image, while Blender MCP offers much more control and precision when you want to push the reconstruction further. Same reference image, two completely different workflows. Which result do you prefer?

Givros

31,979 次观看 • 1 个月前

How I turn my templates into real landing pages. Works for any vibe coding platform or site. This is my full guide. I start with Gemini 3. I copy the HTML code and paste to Cursor/v0/lovable and prompt "Create a new landing page /page-name using this design but adapted to {site_name}. Replace the header and footer with the ones from my site. Adapt the whole page, keep everything: {HTML_code}" Details that can to be adapted or improved: Fonts: "Use {font_name} Google font for headings and {font_name} for body text." Icons: "Use Iconify {icon_set} icons" Colors: "Change primary color to blue. Everything else should be monotone." Bonus: "Make the outlines subtle" for a cleaner design. Animation intro/on scroll: "Animate when in view observed, fade in, slide in, blur in, element by element. Use 'both' instead of 'forwards'. Don't use opacity 0." Static to animated: "Animate details with {animate_type} and decorations.". Example types: line, beam animation, noodles, grid, sonar, etc. Background animation: "Apply the background animation using Unicorn Studio {animation_code}" Details to make your layout stand out: "Add vertical container-size lines. Add 01 02 03 number details." Stand out from generic-looking: "Make this more upscale with large tall fonts, Newsreader font and black and white agency". Adapt content: "Adapt the content to {copy and paste site texts}". Buttons: "Change main button to {code}. Add a 1px border beam animation around the pill-shaped button on hover." Adding sections like testimonials: "Adapt a new section after {section} using this code: {component code}". You can copy the code from Codepen, 21st dev or Aura. Responsiveness: "Make this responsive. Add a hamburger menu for mobile. Hide this {element} for mobile." Making forms work: "Make the form send an email to {your_email}". Payments: "Link the buy button to {LemonSqueezy payment link}". I use composer-1 for quick fixes. I finish with Claude Opus 4.5 for code reviews "Please review the code for performance and robustness". The template HTML code should give you a blueprint for all these, but I think it's important to keep iterating for your specific site.
0:46

How I turn my templates into real landing pages. Works for any vibe coding platform or site. This is my full guide. I start with Gemini 3. I copy the HTML code and paste to Cursor/v0/lovable and prompt "Create a new landing page /page-name using this design but adapted to {site_name}. Replace the header and footer with the ones from my site. Adapt the whole page, keep everything: {HTML_code}" Details that can to be adapted or improved: Fonts: "Use {font_name} Google font for headings and {font_name} for body text." Icons: "Use Iconify {icon_set} icons" Colors: "Change primary color to blue. Everything else should be monotone." Bonus: "Make the outlines subtle" for a cleaner design. Animation intro/on scroll: "Animate when in view observed, fade in, slide in, blur in, element by element. Use 'both' instead of 'forwards'. Don't use opacity 0." Static to animated: "Animate details with {animate_type} and decorations.". Example types: line, beam animation, noodles, grid, sonar, etc. Background animation: "Apply the background animation using Unicorn Studio {animation_code}" Details to make your layout stand out: "Add vertical container-size lines. Add 01 02 03 number details." Stand out from generic-looking: "Make this more upscale with large tall fonts, Newsreader font and black and white agency". Adapt content: "Adapt the content to {copy and paste site texts}". Buttons: "Change main button to {code}. Add a 1px border beam animation around the pill-shaped button on hover." Adding sections like testimonials: "Adapt a new section after {section} using this code: {component code}". You can copy the code from Codepen, 21st dev or Aura. Responsiveness: "Make this responsive. Add a hamburger menu for mobile. Hide this {element} for mobile." Making forms work: "Make the form send an email to {your_email}". Payments: "Link the buy button to {LemonSqueezy payment link}". I use composer-1 for quick fixes. I finish with Claude Opus 4.5 for code reviews "Please review the code for performance and robustness". The template HTML code should give you a blueprint for all these, but I think it's important to keep iterating for your specific site.

Meng To

41,015 次观看 • 9 个月前