Loading video...

Video Failed to Load

Go Home

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,376 subscribers

23,790 views • 6 days ago •via X (Twitter)

LIVE

Anya Rossi• Live Now

Private livecam show

0 Comments

No comments available

Comments from the original post will appear here

Related 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 views • 1 year ago

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 views • 2 months ago

Digital Metamorphosis... Interactive real-time 3D particle display of 60,000 points that smoothly morph between shapes with bloom, motion trails and color themes, built with Grok 4 from xAI using Three.js and GLSL shaders.
0:36

Digital Metamorphosis... Interactive real-time 3D particle display of 60,000 points that smoothly morph between shapes with bloom, motion trails and color themes, built with Grok 4 from xAI using Three.js and GLSL shaders.

Techartist

13,295 views • 11 months ago

An interactive 3D visualization using Three.js and WebGL. Button click activates energy pulses in this dynamic cosmic portal with custom shaders and post-processing effects. Source code link in the reply below. 👇🏼
0:43

An interactive 3D visualization using Three.js and WebGL. Button click activates energy pulses in this dynamic cosmic portal with custom shaders and post-processing effects. Source code link in the reply below. 👇🏼

Techartist

15,679 views • 1 year ago

🤯 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,767,977 views • 1 month ago

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

13,143 views • 1 month ago

Breath... A million 3D particles shift and reshape in constant motion. Built with Three.js and custom GLSL shaders, a button triggers a core surge that ripples light and motion across the swarm. 🔊
0:30

Breath... A million 3D particles shift and reshape in constant motion. Built with Three.js and custom GLSL shaders, a button triggers a core surge that ripples light and motion across the swarm. 🔊

Techartist

11,776 views • 11 months ago

A dynamic 3D particle system built with Three.js, styled with Tailwind CSS, and enhanced by custom GLSL shaders. Features interactive pattern transitions, camera controls, and animation toggles for an immersive visual experience. Source code link in the reply below. 👇🏼
0:31

A dynamic 3D particle system built with Three.js, styled with Tailwind CSS, and enhanced by custom GLSL shaders. Features interactive pattern transitions, camera controls, and animation toggles for an immersive visual experience. Source code link in the reply below. 👇🏼

Techartist

14,014 views • 1 year ago

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 views • 2 years ago

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 views • 1 year 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
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,917 views • 5 months ago

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 views • 6 months ago

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 Northern Africa

1,444,220 views • 1 month ago

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,551,297 views • 1 month ago

No Three.js. No fake web-based depth-of-field or focal-length emulation. Customize in web, render in Blender. While everyone is vibe-coding apps for flat pattern generators, or at most Three.js-based 3D scenes, we’re already one step ahead. We built an app that lets you use a web UI to control an actual Blender 3D render. Eevee engine is used for streaming quick previews back into the app, while Cycles renders the final image for better material quality and lighting. So simple to use that you can even give it to your client. Of course, built with Toolcraft.
1:15

No Three.js. No fake web-based depth-of-field or focal-length emulation. Customize in web, render in Blender. While everyone is vibe-coding apps for flat pattern generators, or at most Three.js-based 3D scenes, we’re already one step ahead. We built an app that lets you use a web UI to control an actual Blender 3D render. Eevee engine is used for streaming quick previews back into the app, while Cycles renders the final image for better material quality and lighting. So simple to use that you can even give it to your client. Of course, built with Toolcraft.

Alex Barashkov

75,301 views • 18 days ago

New work! We redesigned MetaMask 🦊 into a scalable digital design system, built with motion principles and WebGL-powered 3D animations of the reimagined mascot, the new face of web3. →
0:56

New work! We redesigned MetaMask 🦊 into a scalable digital design system, built with motion principles and WebGL-powered 3D animations of the reimagined mascot, the new face of web3. →

Antinomy Studio

26,176 views • 1 year ago

A 3D scene built with Three.js, WebGL, and JavaScript. Features shape changing with a click/tap, camera navigation via dragging and scrolling, and adjustable bloom effects and animation properties. Source code/CodePen link in the comment below. 👇
0:40

A 3D scene built with Three.js, WebGL, and JavaScript. Features shape changing with a click/tap, camera navigation via dragging and scrolling, and adjustable bloom effects and animation properties. Source code/CodePen link in the comment below. 👇

Techartist

11,390 views • 1 year ago

Mechanical Watch An interactive website that breaks down the mechanics of a watch, from mainspring to escapement, with detailed 3D models and animations. Move, zoom, and observe each piece in motion. Explore here (by Bartosz Ciechanowski): ciechanow .ski/mechanical-watch/
0:26

Mechanical Watch An interactive website that breaks down the mechanics of a watch, from mainspring to escapement, with detailed 3D models and animations. Move, zoom, and observe each piece in motion. Explore here (by Bartosz Ciechanowski): ciechanow .ski/mechanical-watch/

Leon

13,005 views • 11 months ago