Video wird geladen...

Video konnte nicht geladen werden

Zur Startseite

Built a web app with AI using Three.js + WebGL that turns motion, mechanics and symmetry into an interactive 3D experience featuring a gear mechanism, gyroscope, turbine, coil and geometric structures. Workflow ↓

techartist_'s profile picture

Techartist

14,571 subscribers

24,529 Aufrufe • vor 1 Monat •via X (Twitter)

LIVE

Anya Rossi• Live Now

Private livecam show

0 Kommentare

Keine Kommentare verfügbar

Kommentare vom Original-Post werden hier angezeigt

Ähnliche Videos

Interactive simulation built with Three.js, WebGL, and GLSL shaders featuring dynamic lattice structures, particle effects, and a UI for scene controls. Source code link in the comment below. 👇 #OpenSource #Threejs #JavaScript
0:29

Interactive simulation built with Three.js, WebGL, and GLSL shaders featuring dynamic lattice structures, particle effects, and a UI for scene controls. Source code link in the comment below. 👇 #OpenSource #Threejs #JavaScript

Techartist

18,168 Aufrufe • vor 1 Jahr

Built an interactive 3D microbial visualisation web app exploring bacteria structures through procedural organic shaders, detailed organism simulations and microscopy-inspired visuals.
0:25

Built an interactive 3D microbial visualisation web app exploring bacteria structures through procedural organic shaders, detailed organism simulations and microscopy-inspired visuals.

Techartist

20,282 Aufrufe • vor 3 Monaten

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 Aufrufe • vor 7 Tagen

This is genuinely mind-blowing. This guy literally built a fully interactive 3D human anatomy app with Three.js using GPT-5.6 Sol 🤯 100% free and open-source. demo + repo in 🧵↓
0:31

This is genuinely mind-blowing. This guy literally built a fully interactive 3D human anatomy app with Three.js using GPT-5.6 Sol 🤯 100% free and open-source. demo + repo in 🧵↓

Charly Wargnier

12,953 Aufrufe • vor 1 Monat

🤯 This is a website, a simple web-based game built with WebGL and Three.js. Website: It's honestly surprising how far web development has come.
0:40

🤯 This is a website, a simple web-based game built with WebGL and Three.js. Website: It's honestly surprising how far web development has come.

probiex007

5,807,941 Aufrufe • vor 2 Monaten

From 48 World Cup nations to an interactive 3D flower world. Tripo turns each nation into photorealistic 3D flowers, each designed with its own form, color palette, material texture, and cultural reference, and brings them into an interactive experience with GPT-5.5. The full collection is interactive, so every flower can be viewed, rotated, and explored in 3D. Tripo AI turns ideas into 3D experiences you can actually see, share, and explore.
0:45

From 48 World Cup nations to an interactive 3D flower world. Tripo turns each nation into photorealistic 3D flowers, each designed with its own form, color palette, material texture, and cultural reference, and brings them into an interactive experience with GPT-5.5. The full collection is interactive, so every flower can be viewed, rotated, and explored in 3D. Tripo AI turns ideas into 3D experiences you can actually see, share, and explore.

Tripo 🔜 gamescom

13,551 Aufrufe • vor 2 Monaten

Turn a single 2D image into a fully interactive, animated 3D character - running directly in your browser.🥊 This is the Ringside Boxer, built with img2threejs v1.5.1. Live showcase: 2D Image → 3D Reconstruction (TripoAI/Hyper3D) → Reference GLB + Specs → Rig & Animation Setup → Animation Loops → Physics VFX → Playable Three.js Scene ( 100% pure typescript ) 🔥 Under the hood: • ~97.5K triangle 3D reconstruction • 41-bone character rig • 19 combat animation clips • Jab, Hook, Body Shot, Footwork, Victory, Defeat & more • Physics-based sweat particles with gravity • Impact shock-ring VFX • Fully interactive 360° orbit + zoom And the important part: 1. The final result is generated as pure Three.js + TypeScript code. 2. No traditional 3D authoring workflow. 3. No Blender setup. 4. Just code that can be inspected, modified, and dropped directly into a WebGL experience. This is where I want img2threejs to go: Image → 3D → Animation → Interactive Web Experience. And this is only v1.5.1. 🚀 #ThreeJS #GameDev #TypeScript #Web3D #img2threejs
1:06

Turn a single 2D image into a fully interactive, animated 3D character - running directly in your browser.🥊 This is the Ringside Boxer, built with img2threejs v1.5.1. Live showcase: 2D Image → 3D Reconstruction (TripoAI/Hyper3D) → Reference GLB + Specs → Rig & Animation Setup → Animation Loops → Physics VFX → Playable Three.js Scene ( 100% pure typescript ) 🔥 Under the hood: • ~97.5K triangle 3D reconstruction • 41-bone character rig • 19 combat animation clips • Jab, Hook, Body Shot, Footwork, Victory, Defeat & more • Physics-based sweat particles with gravity • Impact shock-ring VFX • Fully interactive 360° orbit + zoom And the important part: 1. The final result is generated as pure Three.js + TypeScript code. 2. No traditional 3D authoring workflow. 3. No Blender setup. 4. Just code that can be inspected, modified, and dropped directly into a WebGL experience. This is where I want img2threejs to go: Image → 3D → Animation → Interactive Web Experience. And this is only v1.5.1. 🚀 #ThreeJS #GameDev #TypeScript #Web3D #img2threejs

Nick

47,316 Aufrufe • vor 9 Tagen

Built a low-poly autumn world with Three.js, featuring dynamic traffic, procedural terrain, falling leaves, atmospheric lighting and interactive controls.
0:20

Built a low-poly autumn world with Three.js, featuring dynamic traffic, procedural terrain, falling leaves, atmospheric lighting and interactive controls.

Techartist

15,772 Aufrufe • vor 1 Monat

Machine learning meets 3D web dev 🚗 I used Proximal Policy Optimization to train an AI to navigate a 3D racetrack, combining tensorflow.js and three.js Live: Code: Car driving mechanics from Bruno Simon #MachineLearning #AI #TensorFlow #threejsJourney #threejs
0:42

Machine learning meets 3D web dev 🚗 I used Proximal Policy Optimization to train an AI to navigate a 3D racetrack, combining tensorflow.js and three.js Live: Code: Car driving mechanics from Bruno Simon #MachineLearning #AI #TensorFlow #threejsJourney #threejs

Fredrik

13,756 Aufrufe • vor 2 Jahren

I gave Gemini 3.7 Flash a handful of reference images and a rough idea of what I wanted. Ran /grill-me to align on the vision. Hit /goal & /teamwork-preview and let it cook. A couple of iterations later, this is what came out! An interactive kind of experience.. built with Three.js, WebGL, GLSL shaders, and Web Audio engine. Turn up your volume a bit...
1:58

I gave Gemini 3.7 Flash a handful of reference images and a rough idea of what I wanted. Ran /grill-me to align on the vision. Hit /goal & /teamwork-preview and let it cook. A couple of iterations later, this is what came out! An interactive kind of experience.. built with Three.js, WebGL, GLSL shaders, and Web Audio engine. Turn up your volume a bit...

Bee

969,046 Aufrufe • vor 22 Tagen

Marblie is a web-based 3D marble run game that explores interactive building mechanics and real-time physics simulation in the browser.
1:21

Marblie is a web-based 3D marble run game that explores interactive building mechanics and real-time physics simulation in the browser.

Three.js

15,524 Aufrufe • vor 1 Jahr

🎮 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
1:05

🎮 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,990 Aufrufe • vor 7 Monaten

Old Art to full 3D using Cinema 4D . Created a free and open-source plugin to bring Hunyuan 3D directly into Cinema 4D. This workflow combines multiple tools that are available today into a single, cohesive pipeline. I wanted to show that AI is never an end product by itself, it’s not the finality. Used properly, AI becomes an extremely powerful tool that lets you build exactly what you want. I hope you like it. The final step will be to bake all textures so I can share the project as a WebGL experience, a small interactive website to explore it directly in the browser. Made with heart, and with fal ❤️
2:05

Old Art to full 3D using Cinema 4D . Created a free and open-source plugin to bring Hunyuan 3D directly into Cinema 4D. This workflow combines multiple tools that are available today into a single, cohesive pipeline. I wanted to show that AI is never an end product by itself, it’s not the finality. Used properly, AI becomes an extremely powerful tool that lets you build exactly what you want. I hope you like it. The final step will be to bake all textures so I can share the project as a WebGL experience, a small interactive website to explore it directly in the browser. Made with heart, and with fal ❤️

Lovis Odin

21,909 Aufrufe • vor 7 Monaten

Manetho is digitizing the museum experience with AI. Using computer vision and NLP, it translates hieroglyphs in real time and turns artifacts into interactive learning tools. Built on Huawei Cloud, ModelArts, and MindSpore, it supports deeper access to Egyptian history.
1:23

Manetho is digitizing the museum experience with AI. Using computer vision and NLP, it translates hieroglyphs in real time and turns artifacts into interactive learning tools. Built on Huawei Cloud, ModelArts, and MindSpore, it supports deeper access to Egyptian history.

Huawei

1,552,492 Aufrufe • vor 3 Monaten