Video yükleniyor...

Video Yüklenemedi

Ana Sayfaya Dön

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

185,649 subscribers

104,246 görüntüleme • 4 gün önce •via X (Twitter)

SanatBilim & TeknolojiEğitim
LIVE

Anya Rossi• Live Now

Private livecam show

0 Yorum

Yorum bulunmuyor

Orijinal gönderinin yorumları burada görünecek

Benzer Videolar

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

526,986 görüntüleme • 24 gün önce

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 görüntüleme • 1 ay önce

I asked Astra to create a Catan game in three.js and it came out incredibly well. I played it, and the animations make it so much fun. The instructions and info cards make the game easy to learn. It even has AI players and trading. Astra used another game I had started building as a reference. The more games I build, the more skills and assets I have for the next one. It can remix the UI, 3D models, pages, and sounds instead of rebuilding everything. Now I want to see how many other board games I can make from this foundation.
1:26

I asked Astra to create a Catan game in three.js and it came out incredibly well. I played it, and the animations make it so much fun. The instructions and info cards make the game easy to learn. It even has AI players and trading. Astra used another game I had started building as a reference. The more games I build, the more skills and assets I have for the next one. It can remix the UI, 3D models, pages, and sounds instead of rebuilding everything. Now I want to see how many other board games I can make from this foundation.

Meng To

561,632 görüntüleme • 2 gün önce

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

132,339 görüntüleme • 23 gün önce

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

231,466 görüntüleme • 16 gün önce

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,303,837 görüntüleme • 20 gün önce

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 görüntüleme • 1 yıl önce

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 görüntüleme • 1 yıl önce

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 görüntüleme • 7 ay önce

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

38,892 görüntüleme • 10 gün önce

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

146,166 görüntüleme • 1 ay önce

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

132,023 görüntüleme • 5 gün önce

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,242 görüntüleme • 9 gün önce

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 görüntüleme • 20 gün önce

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 görüntüleme • 2 ay önce

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 görüntüleme • 7 ay önce

You know I had to do it!! gpt-6-astra (High), one prompt, Terreiro do Paço in Lisbon (Blender, not Three.js!) This one hits home personally 5 years ago, in college, I had a whole course in Computer Graphics. For the final project, every group had to recreate Praça do Comércio / Terreiro do Paço in Blender (our project delivery is in the comments). I wanted to see how Astra would perform. For one-shot, it's pretty damn good. Astra is a beast in Spatial 3d, and Blender is not like Three.js! It's significantly more complex, with a broader range of modeling, materials, lighting, etc. Generational leap (and I will run a few more prompts here)
0:30

You know I had to do it!! gpt-6-astra (High), one prompt, Terreiro do Paço in Lisbon (Blender, not Three.js!) This one hits home personally 5 years ago, in college, I had a whole course in Computer Graphics. For the final project, every group had to recreate Praça do Comércio / Terreiro do Paço in Blender (our project delivery is in the comments). I wanted to see how Astra would perform. For one-shot, it's pretty damn good. Astra is a beast in Spatial 3d, and Blender is not like Three.js! It's significantly more complex, with a broader range of modeling, materials, lighting, etc. Generational leap (and I will run a few more prompts here)

Gonçalo Canhoto 🇵🇹

310,788 görüntüleme • 5 gün önce

Today we're launching Jitsu MCP. This is an MCP server that lets your agent run your entire event pipeline directly in Claude Code, Claude Desktop, Cursor, or VS Code. Here's how it works: Add the server: claude mcp add --transport http jitsu Run this prompt: "Route my web stream into ClickHouse, but only purchase and signup events. Send a test event, check Live Events, and if anything errors, find the function in the path and fix it." Approve the OAuth prompt once, and all 26 tools are live Your agent wires the streams, watches Live Events, and rewrites a function when one of them throws. It runs the fix against a real event before shipping it, so nothing is persisted until it works. Every change lands in the audit log tagged mcp, so you can tell what the agent did from what a person did. It's all MIT licensed, and it runs against your own deployment. Jitsu is one of the fastest growing open-source CDPs with 5,000+ GitHub stars. Capturing events is unlimited and free, and delivery is free up to 200k events a month. Comment Jitsu and I'll DM you the exact prompts I run in Claude Code to build an event pipeline end to end.
0:51

Today we're launching Jitsu MCP. This is an MCP server that lets your agent run your entire event pipeline directly in Claude Code, Claude Desktop, Cursor, or VS Code. Here's how it works: Add the server: claude mcp add --transport http jitsu Run this prompt: "Route my web stream into ClickHouse, but only purchase and signup events. Send a test event, check Live Events, and if anything errors, find the function in the path and fix it." Approve the OAuth prompt once, and all 26 tools are live Your agent wires the streams, watches Live Events, and rewrites a function when one of them throws. It runs the fix against a real event before shipping it, so nothing is persisted until it works. Every change lands in the audit log tagged mcp, so you can tell what the agent did from what a person did. It's all MIT licensed, and it runs against your own deployment. Jitsu is one of the fastest growing open-source CDPs with 5,000+ GitHub stars. Capturing events is unlimited and free, and delivery is free up to 200k events a month. Comment Jitsu and I'll DM you the exact prompts I run in Claude Code to build an event pipeline end to end.

Soham Mehta

255,390 görüntüleme • 2 gün önce

Gave Astra a 3D scan of my parents old home to make it an editable scene. Then I turned down gravity and opened a portal. Turns out multimodal LLMs might have crossed the chasm on inverse graphics. Tremendous implications for everything from VFX and AR/VR to robotics. Process: ~400 2D photos I took in 2019 went through RealityScan and became a photogrammetry mesh. That’s the classical reconstruction step. Then I dropped that mesh into Blender and used Astra to turn it into a fully editable, cleaned up 3D scene. Asked it to use textures from my photo scan and create procedural 3D shaders for the rest. It's good but it’s definitely not perfect -- funny thing is some of the mistakes are inherited from the reference mesh RealityScan produced i.e. the bird statue’s legs, contours of the furniture etc. This is where humans still have much better “spatial autocomplete” and can take an output like this all the way. My next step will be to see if I can let it use CUA with the photoscan software to interactively reference the source pixel imagery and refine its work in Blender and get even closer to reality.
0:30

Gave Astra a 3D scan of my parents old home to make it an editable scene. Then I turned down gravity and opened a portal. Turns out multimodal LLMs might have crossed the chasm on inverse graphics. Tremendous implications for everything from VFX and AR/VR to robotics. Process: ~400 2D photos I took in 2019 went through RealityScan and became a photogrammetry mesh. That’s the classical reconstruction step. Then I dropped that mesh into Blender and used Astra to turn it into a fully editable, cleaned up 3D scene. Asked it to use textures from my photo scan and create procedural 3D shaders for the rest. It's good but it’s definitely not perfect -- funny thing is some of the mistakes are inherited from the reference mesh RealityScan produced i.e. the bird statue’s legs, contours of the furniture etc. This is where humans still have much better “spatial autocomplete” and can take an output like this all the way. My next step will be to see if I can let it use CUA with the photoscan software to interactively reference the source pixel imagery and refine its work in Blender and get even closer to reality.

Bilawal Sidhu

49,885 görüntüleme • 4 gün önce

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,824 görüntüleme • 1 ay önce