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.

▵ Triplex is the React Three Fiber editor where your code is the source of truth! ✨ v0.58.0 has released, sound on! 🔊 🌏 Set provider component props in the UI 🐥 Edit child elements without leaving your open file 😍 Much more #threejs #r3f #reactjs

mike douges

2,969 subscribers

284,798 views • 3 years ago •via X (Twitter)

Science & Technology Gaming Arts #threejs #r3f #reactjs

Anya Rossi• Live Now

Private livecam show

10 Comments

Michael Dougall3 years ago

Almost 200 folks in Discord! Come join in the fun, we have pancakes 🥞

Jason Lengstorf3 years ago

WHOA any chance you'd be down to teach me about this on @LWJShow? 👀

Michael Dougall3 years ago

@LWJShow 👀 definitely!

Fitz Muzenda3 years ago

Looks great, why desktop over web?

Ha Son Nguyen3 years ago

Would be awesome if it support the nextjs

Michael Dougall3 years ago

@s0nhaaa It supports all frameworks and bundlers

Dami Dina3 years ago

🔥

Oskai3 years ago

awesome stuff. Any plans to support Linux?

Michael Dougall3 years ago

Yes! Coming soon.

Zagreus3 years ago

@JorgePAJ

Related Videos

✨ Introducing Triplex — the React Three Fiber editor, now in public alpha! Here's a video fleshing out a scene, sound on! 🔊 🧵👇 Continue into the thread below for more information and what's coming next for Triplex. #threejs #react #webgamedev #r3f #gamedev #3dartwork

✨ Introducing Triplex — the React Three Fiber editor, now in public alpha! Here's a video fleshing out a scene, sound on! 🔊 🧵👇 Continue into the thread below for more information and what's coming next for Triplex. #threejs #react #webgamedev #r3f #gamedev #3dartwork

mike douges

219,794 views • 3 years ago

Demo of a Google AR & VR 3D Tiles editor in Poimandres' react-three-fiber, drei and NextJS. Completely hackable! ⚡️ 🌏 Edit the world from anywhere, from your browser! ⏳No need to install 3D engines 📖 Open source

Demo of a Google AR & VR 3D Tiles editor in Poimandres' react-three-fiber, drei and NextJS. Completely hackable! ⚡️ 🌏 Edit the world from anywhere, from your browser! ⏳No need to install 3D engines 📖 Open source

Alberto

64,004 views • 3 years ago

Following ☄︎ work, I'm experimenting with some react three fiber with #threejs webGPU. We no longer need an EffectComposer to use post-processing effects in #r3f. Now, everything is done by composing TSL nodes. I created a small component that helps in rendering post-processing effects. All you need to do is import the effects you want and add them to the final composition. I will share the link to the demo and source code on Monday 😍. Another thing I want to highlight is how amazing the Screen Space Reflection effect is. It generates reflections not only on the ground, as we had before in r3f in webgl. It is able to calculate the reflections between the meshes. Look how beautiful the reflection of the lightsaber on Darth Vader's mask is. This is not something that is easy to calculate and this is exactly where WebGPU in threejs shines! Congratulations to everyone on the threejs team. I am increasingly impressed with WebGPU and TSL.

Following ☄︎ work, I'm experimenting with some react three fiber with #threejs webGPU. We no longer need an EffectComposer to use post-processing effects in #r3f. Now, everything is done by composing TSL nodes. I created a small component that helps in rendering post-processing effects. All you need to do is import the effects you want and add them to the final composition. I will share the link to the demo and source code on Monday 😍. Another thing I want to highlight is how amazing the Screen Space Reflection effect is. It generates reflections not only on the ground, as we had before in r3f in webgl. It is able to calculate the reflections between the meshes. Look how beautiful the reflection of the lightsaber on Darth Vader's mask is. This is not something that is easy to calculate and this is exactly where WebGPU in threejs shines! Congratulations to everyone on the threejs team. I am increasingly impressed with WebGPU and TSL.

Anderson Mancini

26,829 views • 1 year ago

Introducing Canvas UI, the first ever html-in-canvas component library. Your DOM is the render target now. Real-time shaders over real, interactive UI. 24 components. React, Vue, Svelte, vanilla TS. Free. Open source. 🧵

Introducing Canvas UI, the first ever html-in-canvas component library. Your DOM is the render target now. Real-time shaders over real, interactive UI. 24 components. React, Vue, Svelte, vanilla TS. Free. Open source. 🧵

David Haz

1,424,555 views • 2 months ago

🚀 I'm launching r3f-webgpu-perf today! "npm i r3f-webgpu-perf" One thing I missed while working with WebGPU in React Three Fiber was a performance monitor similar to r3f-perf. The existing tool is fantastic, but it doesn’t support the WebGPU renderer yet. So I decided to build one. ✅ Supports both WebGL and WebGPU ✅ Modern and customizable UI ✅ Lightweight and easy to integrate ✅ Built specifically for React Three Fiber My goal is to turn r3f-webgpu-perf into more than just a metrics dashboard. I want it to become a learning tool that provides real-time optimization suggestions based on the techniques I’ve developed while building hundreds of interactive 3D projects over the last two decades. A vanilla Three.js version is also planned. If you’re building with Three.js, React Three Fiber, or WebGPU, I’d love for you to try it and share your feedback. ⭐ GitHub: 📦 NPM: Every GitHub star helps make the tool better for the entire community. #threejs #creativecoding #webgpu #r3f

🚀 I'm launching r3f-webgpu-perf today! "npm i r3f-webgpu-perf" One thing I missed while working with WebGPU in React Three Fiber was a performance monitor similar to r3f-perf. The existing tool is fantastic, but it doesn’t support the WebGPU renderer yet. So I decided to build one. ✅ Supports both WebGL and WebGPU ✅ Modern and customizable UI ✅ Lightweight and easy to integrate ✅ Built specifically for React Three Fiber My goal is to turn r3f-webgpu-perf into more than just a metrics dashboard. I want it to become a learning tool that provides real-time optimization suggestions based on the techniques I’ve developed while building hundreds of interactive 3D projects over the last two decades. A vanilla Three.js version is also planned. If you’re building with Three.js, React Three Fiber, or WebGPU, I’d love for you to try it and share your feedback. ⭐ GitHub: 📦 NPM: Every GitHub star helps make the tool better for the entire community. #threejs #creativecoding #webgpu #r3f

Anderson Mancini

24,458 views • 3 months ago

Excited to launch react-three/xr🤳🥽 Leverage the latest WebXR features, reuse your existing interactions, and advance what is possible in AR and VR on the Web. ↳ Turn your existing R3F app into an AR or VR experience with only a few lines of code. 🎉

Excited to launch react-three/xr🤳🥽 Leverage the latest WebXR features, reuse your existing interactions, and advance what is possible in AR and VR on the Web. ↳ Turn your existing R3F app into an AR or VR experience with only a few lines of code. 🎉

Bela Bohlender

40,135 views • 2 years ago

we released our react package build an ai chat w/ interactive components in a few lines of code. add it to your app with: npx tambo full-send we support: - streaming for both messages and components - message history and message threads - state manage for generated components - suggested actions based on available components - component library that uses the react package the react package is open-source. server package will be open-sourced later this year.

we released our react package build an ai chat w/ interactive components in a few lines of code. add it to your app with: npx tambo full-send we support: - streaming for both messages and components - message history and message threads - state manage for generated components - suggested actions based on available components - component library that uses the react package the react package is open-source. server package will be open-sourced later this year.

Michael Magán

65,473 views • 1 year ago

You can now add a live browser to Claude Code to click any element and edit it 🤯 Your app runs embedded. You click a button. Claude instantly knows the exact selector, the exact component, the exact location in your code. No more “the red button in the top left of the third card.” Just click it. 100% open source.

You can now add a live browser to Claude Code to click any element and edit it 🤯 Your app runs embedded. You click a button. Claude instantly knows the exact selector, the exact component, the exact location in your code. No more “the red button in the top left of the third card.” Just click it. 100% open source.

Alvaro Cintas

47,136 views • 5 months ago

Wazabi x Cursor is here Vibe code any app, game or agent and tokenize it on Solana, $ETH, Base or $BSC. All without leaving your editor. This is just the beginning. More IDE integrations coming soon.

Wazabi x Cursor is here Vibe code any app, game or agent and tokenize it on Solana, $ETH, Base or $BSC. All without leaving your editor. This is just the beginning. More IDE integrations coming soon.

Wazabi AI

11,635 views • 6 months ago

R3F v10 has a fresh release in preview! ✧ First-class WebGPU and TSL support ✧ useFrame revamped with a new scheduler ✧ Multi-canvas out of the box ✧ Three essentials moved out of Drei directly into core ▶️ npm install @'react-three/fiber@alpha' We are eagerly deving what the next generation of frameworks should look like from WebGPU to agentic support. Shout out your feedback. For details check out: And if you want to learn more first-hand join us at our Threejs conf workshop!

R3F v10 has a fresh release in preview! ✧ First-class WebGPU and TSL support ✧ useFrame revamped with a new scheduler ✧ Multi-canvas out of the box ✧ Three essentials moved out of Drei directly into core ▶️ npm install @'react-three/fiber@alpha' We are eagerly deving what the next generation of frameworks should look like from WebGPU to agentic support. Shout out your feedback. For details check out: And if you want to learn more first-hand join us at our Threejs conf workshop!

Poimandres

10,926 views • 1 month ago

Introducing Mintlify MDX. Writing docs has always felt second-class. Your editor knows your code inside out, but shows MDX like plain text. None of the tooling you rely on is there when you switch to the docs. Mintlify MDX fixes that. Complete with: → Syntax highlighting → Autocomplete for every component and its props → Hover docs for every Mintlify component → Go to definition for snippets → A live preview beside your MDX → And a visual mode when you'd rather not write MDX at all MDX, finally a first-class language in your IDE. Install it from the VS Code Marketplace:

Introducing Mintlify MDX. Writing docs has always felt second-class. Your editor knows your code inside out, but shows MDX like plain text. None of the tooling you rely on is there when you switch to the docs. Mintlify MDX fixes that. Complete with: → Syntax highlighting → Autocomplete for every component and its props → Hover docs for every Mintlify component → Go to definition for snippets → A live preview beside your MDX → And a visual mode when you'd rather not write MDX at all MDX, finally a first-class language in your IDE. Install it from the VS Code Marketplace:

Mintlify

26,437 views • 23 days ago

Slither 🐍 is now open-source on GitHub! 🧑‍💻 Read the source-code, contribute, or use the code for your own projects 🔍 I've added lots of features in 1.1 and 1.2 - go check them out ❤️ Source → Play here → #Roblox #RobloxDev

Slither 🐍 is now open-source on GitHub! 🧑‍💻 Read the source-code, contribute, or use the code for your own projects 🔍 I've added lots of features in 1.1 and 1.2 - go check them out ❤️ Source → Play here → #Roblox #RobloxDev

littensy

50,340 views • 3 years ago

Made more improvements to the usage view in T3 Code. Much easier to see where your "spend" is and how different models behave based on your own data btw this measures all usage of Claude Code and Codex on your machines, not just usage within T3 Code :)

Made more improvements to the usage view in T3 Code. Much easier to see where your "spend" is and how different models behave based on your own data btw this measures all usage of Claude Code and Codex on your machines, not just usage within T3 Code :)

Theo - t3.gg

37,781 views • 1 day ago

Jumping on the #DeepSeekR1 boat, apparently, it knows more #threejs than me already 🤣. This is the result of just one prompt: "创建一个使用粗线技术渲染风线的 React Three Fiber 组件". Yes, I sometimes do prompts in Chinese, which has given me better results than in English. Follow me in the comments for more info 👇🏻

Jumping on the #DeepSeekR1 boat, apparently, it knows more #threejs than me already 🤣. This is the result of just one prompt: "创建一个使用粗线技术渲染风线的 React Three Fiber 组件". Yes, I sometimes do prompts in Chinese, which has given me better results than in English. Follow me in the comments for more info 👇🏻

Anderson Mancini

23,608 views • 1 year ago

Inth is building cookie banners that don't cost your Core Web Vitals. Bundled into your website's code, Inth's open-source cookie banner standard, c15t, has native SDKs, i18n, and are fully customizable to match your UI and brand. Quickstart: npx @ c15t/cli Congrats on the launch, Christopher Burns!

Y Combinator

24,126 views • 4 months ago

Design Meets Analytics AtlasGrid (AtlasGrid (YC F25)) is the new ‘source of truth’ for mobile apps. It maps your UI, connects your analytics, and gives your product team a clear picture of what people do in your app. Accelerate your product iteration: Congrats on the launch, Oleg Kostour 🇺🇦, Aram, and Anton!

Design Meets Analytics AtlasGrid (AtlasGrid (YC F25)) is the new ‘source of truth’ for mobile apps. It maps your UI, connects your analytics, and gives your product team a clear picture of what people do in your app. Accelerate your product iteration: Congrats on the launch, Oleg Kostour 🇺🇦, Aram, and Anton!

Y Combinator

165,712 views • 10 months ago

THIS GUY ADDED A LIVE BROWSER TO CLAUDE CODE SO YOU CAN CLICK ANY ELEMENT AND EDIT IT INSTANTLY biggest issue with vibe coding UI is that you have to describe what you want to change. if you prompt it the wrong selector or wrong component, Claude can't find it. now you just click it. your app runs in an embedded browser with Claude Code. you can click any button, any text, any div. Claude instantly knows exactly what you're pointing at. click. instruct. done. no more "change the button in the top right corner of the second card component." all you have to do now is just click the button. AND its open source

THIS GUY ADDED A LIVE BROWSER TO CLAUDE CODE SO YOU CAN CLICK ANY ELEMENT AND EDIT IT INSTANTLY biggest issue with vibe coding UI is that you have to describe what you want to change. if you prompt it the wrong selector or wrong component, Claude can't find it. now you just click it. your app runs in an embedded browser with Claude Code. you can click any button, any text, any div. Claude instantly knows exactly what you're pointing at. click. instruct. done. no more "change the button in the top right corner of the second card component." all you have to do now is just click the button. AND its open source

Om Patel

154,050 views • 6 months ago

Claude Code UI is now available in VSCode via CodeGPT extension! 🙌 You can now run Claude Code directly in your editor and control the planning process. You can pause it, edit tasks, or add new ones while Claude is working. This helps keep Claude on track and makes it way more effective since you can adjust things as it goes. Setup: - Download the extensión - Click the Claude Code OAuth - Authorize the extension - Paste your account code to link Claude Code directly - Done ✅ Works on VSCode and JetBrains editors (Android Studio, IntelliJ, PyCharm, etc.) VSCode : Jetbrains:

Claude Code UI is now available in VSCode via CodeGPT extension! 🙌 You can now run Claude Code directly in your editor and control the planning process. You can pause it, edit tasks, or add new ones while Claude is working. This helps keep Claude on track and makes it way more effective since you can adjust things as it goes. Setup: - Download the extensión - Click the Claude Code OAuth - Authorize the extension - Paste your account code to link Claude Code directly - Done ✅ Works on VSCode and JetBrains editors (Android Studio, IntelliJ, PyCharm, etc.) VSCode : Jetbrains:

Daniel San

106,169 views • 1 year ago