Loading video...

Video Failed to Load

There was a problem loading this video. This could be due to a temporary network issue or the video might be unavailable.

Built a custom tool using Three.js 3RF by Poimandres to convert SVGs to 3D Models in real time ⚡️

Malay Vasa

1,957 subscribers

221,839 views • 2 years ago •via X (Twitter)

Science & Technology

Anya Rossi• Live Now

Private livecam show

10 Comments

Malay Vasa2 years ago

Update: We have color ⚡️🎨

Malay Vasa2 years ago

Update: We are now live! ⚡️✨

Fold2 years ago

@threejs @pmndrs

Anon 2.02 years ago

@threejs @pmndrs I'm just guessing but are you like taking the logo as base and extruding it on an axis creating the 3D model?

Malay Vasa2 years ago

@threejs @pmndrs Yeah! Using SVGLoader and ExtrudeGeometry, with a lot of parsing magic in between to handle multiple paths and subpaths in SVGs

Dima 🇺🇦2 years ago

@threejs @pmndrs Great work! Is it open source?

Grey2 years ago

@threejs @pmndrs Pretty cool. It becomes better If you can manage to add colors to the 3D object from the icon Itself.

Malay Vasa2 years ago

@threejs @pmndrs Definitely something I should look into!

Yiwei Ho2 years ago

@threejs @pmndrs @pheralb_ 👀

Maxim Werthmann2 years ago

@threejs @pmndrs awesome 😍

Related Videos

i made a "brand engineering" tool to let me convert the svgs into a 3d scene and then generate a sprite sheet to actually use on my site

Kelindi

108,933 views • 1 month ago

Morw test to more fine-tune the ClayPencil tool, to convert Grease Pencil animations into 3D characters in real time. This time using a reference from the lovely @pedroalpera #Blender #B3D #ClayPencil #GreasePencil #stopmotion #2D #2danimation

Morw test to more fine-tune the ClayPencil tool, to convert Grease Pencil animations into 3D characters in real time. This time using a reference from the lovely @pedroalpera #Blender #B3D #ClayPencil #GreasePencil #stopmotion #2D #2danimation

Daniel Martínez Lara 🔶

82,149 views • 1 year ago

Coded with Grok 4 - An interactive 3D visualizer with real-time audio reactivity, built using Three.js. Demo/code in reply. 👇🔊

Coded with Grok 4 - An interactive 3D visualizer with real-time audio reactivity, built using Three.js. Demo/code in reply. 👇🔊

Techartist

1,476,425 views • 11 months ago

Found a new free design tool that converts SVGS to 3D. Link on the thread.

Found a new free design tool that converts SVGS to 3D. Link on the thread.

Design Chief Priest

28,825 views • 6 months ago

Another FANART test to fine-tune the ClayPencil tool, to convert Grease Pencil animations into 3D characters in real time. Using a reference, from the one & only Olov Burman for Nounfest “Golden Goose” Check it out! #Blender #B3D #GreasePencil #stopmotion #2D #2danimation

Another FANART test to fine-tune the ClayPencil tool, to convert Grease Pencil animations into 3D characters in real time. Using a reference, from the one & only Olov Burman for Nounfest “Golden Goose” Check it out! #Blender #B3D #GreasePencil #stopmotion #2D #2danimation

Daniel Martínez Lara 🔶

209,686 views • 1 year ago

Couldn't get enough of Claude Fable 5, so I challenged it to build a fully 3D mechanical engine platform and it just did!! 😱 And no, these aren't pre made Blender models. Nah. Fable generated everything from scratch using custom geometry, built entirely using Three.js Zero assets. One prompt. Crazzzzy results

Couldn't get enough of Claude Fable 5, so I challenged it to build a fully 3D mechanical engine platform and it just did!! 😱 And no, these aren't pre made Blender models. Nah. Fable generated everything from scratch using custom geometry, built entirely using Three.js Zero assets. One prompt. Crazzzzy results

The Bugged Dev

82,068 views • 1 month ago

This video was made by the a16z video team. Many of the visuals were painstakingly built in 3D, rendered, and then treated. We custom composed a track to the video. A tool was built to sort through thousands of archived footage. A massive effort by incredible people. Enjoy.

This video was made by the a16z video team. Many of the visuals were painstakingly built in 3D, rendered, and then treated. We custom composed a track to the video. A tool was built to sort through thousands of archived footage. A massive effort by incredible people. Enjoy.

richard

266,472 views • 1 month ago

Built an MCP tool to generate 3D models and use them in ThreeJS or any app seamlessly. Check it out 🙏

Built an MCP tool to generate 3D models and use them in ThreeJS or any app seamlessly. Check it out 🙏

Visionary x AI

152,086 views • 1 year ago

Vibe coded something new today 😉 It’s a 3D Solana AI protocol website built using Gemini 3 Pro in Google AI Studio. All the Three.js models you see on the site have been built from scratch by AI using different geometries, PBR, Linear Interpolation, Lightformers (IBL), Shadows and more :D Live: Code:

Vibe coded something new today 😉 It’s a 3D Solana AI protocol website built using Gemini 3 Pro in Google AI Studio. All the Three.js models you see on the site have been built from scratch by AI using different geometries, PBR, Linear Interpolation, Lightformers (IBL), Shadows and more :D Live: Code:

The Bugged Dev

21,128 views • 6 months ago

KIMI K3 BUILDS A 3D SPACEX LAUNCH ATLAS IN 2.5 HOURS A developer used Moonshot AI's Kimi K3 to build an interactive 3D globe visualizing 20 years of SpaceX launches. Built with React 19, Three.js, and custom GLSL shaders, it parses real data across 708 missions to play back live launch animations in under three hours.

KIMI K3 BUILDS A 3D SPACEX LAUNCH ATLAS IN 2.5 HOURS A developer used Moonshot AI's Kimi K3 to build an interactive 3D globe visualizing 20 years of SpaceX launches. Built with React 19, Three.js, and custom GLSL shaders, it parses real data across 708 missions to play back live launch animations in under three hours.

0xMarioNawfal

53,415 views • 3 days ago

Generate animated 3D characters for your vibe coded Three.js game in <5 mins 1. Generate 2D character with Google Gemini 2. Convert to 3D with TRELLIS 3. Convert GLB to FBX 4. Import to valentina Mendez Mendez to animate 5. Export FBX + animations for your three.js game Here's an orc for my game

Generate animated 3D characters for your vibe coded Three.js game in <5 mins 1. Generate 2D character with Google Gemini 2. Convert to 3D with TRELLIS 3. Convert GLB to FBX 4. Import to valentina Mendez Mendez to animate 5. Export FBX + animations for your three.js game Here's an orc for my game

Majid Manzarpour

130,624 views • 1 year ago

Wild what's possible now: I can ship a 3D experience prototype to a museum in a single afternoon. Everything coded and generated with Omma, leveraging AI to iterate fast. 3D models generated in Omma. Scene built on top of Three.js. Prompted for dissolving shaders + particle systems?

Wild what's possible now: I can ship a 3D experience prototype to a museum in a single afternoon. Everything coded and generated with Omma, leveraging AI to iterate fast. 3D models generated in Omma. Scene built on top of Three.js. Prompted for dissolving shaders + particle systems?

Joseph Azar

93,343 views • 2 months ago

real-time procedural dungeon generator in Three.js, built with Fable 5 👇

real-time procedural dungeon generator in Three.js, built with Fable 5 👇

Majid Manzarpour

222,690 views • 23 days ago

Using Fable to build myself a 3d mockup tool

Using Fable to build myself a 3d mockup tool

Daniel Destefanis

59,647 views • 14 days ago

3d pencil tool + real-time generative previews + 3d model gen = powerfully fun way to iterate.

3d pencil tool + real-time generative previews + 3d model gen = powerfully fun way to iterate.

Unbound

10,815 views • 2 months ago

🎮 React Three Game on Three.js Resources Learn how to build 3D games using React Three Fiber and #threejs. A great starting point for understanding game logic, interactivity, and real-time 3D on the web. 👉 #threejs #WebGL #GameDev #ReactThreeFiber #3D #Learning

🎮 React Three Game on Three.js Resources Learn how to build 3D games using React Three Fiber and #threejs. A great starting point for understanding game logic, interactivity, and real-time 3D on the web. 👉 #threejs #WebGL #GameDev #ReactThreeFiber #3D #Learning

Three.js Resources

15,917 views • 5 months ago

Start building real apps for the modern web with the Google Antigravity coding agent and Firebase integration, now in Google AI Studio. Develop a real-time, 3D multiplayer snake arena built with Three.js and collect orbs to dominate the neon grid 🐍

Start building real apps for the modern web with the Google Antigravity coding agent and Firebase integration, now in Google AI Studio. Develop a real-time, 3D multiplayer snake arena built with Three.js and collect orbs to dominate the neon grid 🐍

Google AI Developers

33,151 views • 4 months ago

Really proud of what I was able to achieve developing 3D cell nuclei with custom geometry shaders using Three.js for a cancer care platform, all built with Google Gemini 3 Pro AI 💜 Had to approach the project twice, but had a lot of fun doing it :) Live:

Really proud of what I was able to achieve developing 3D cell nuclei with custom geometry shaders using Three.js for a cancer care platform, all built with Google Gemini 3 Pro AI 💜 Had to approach the project twice, but had a lot of fun doing it :) Live:

The Bugged Dev

19,510 views • 6 months ago

Tiny Update for Hana: - Pencil tool - Strokes Gradient - Pages - Fill as 3D texture - Copy & Paste from Figma All of this can be animated in real-time, react to interactivity, convert to vectors, combine with booleans, etc.

Tiny Update for Hana: - Pencil tool - Strokes Gradient - Pages - Fill as 3D texture - Copy & Paste from Figma All of this can be animated in real-time, react to interactivity, convert to vectors, combine with booleans, etc.

Spline

16,543 views • 5 months ago