Video yükleniyor...

Video Yüklenemedi

Ana Sayfaya Dön

▵ 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

douges's profile picture

mike douges

2,969 subscribers

284,798 görüntüleme • 3 yıl önce •via X (Twitter)

Bilim & TeknolojiOyunSanat#threejs#r3f#reactjs
LIVE

Anya Rossi• Live Now

Private livecam show

10 Yorum

Michael Dougall profil fotoğrafı
Michael Dougall3 yıl önce

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

Jason Lengstorf profil fotoğrafı
Jason Lengstorf3 yıl önce

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

Michael Dougall profil fotoğrafı
Michael Dougall3 yıl önce

@LWJShow 👀 definitely!

Fitz Muzenda profil fotoğrafı
Fitz Muzenda3 yıl önce

Looks great, why desktop over web?

Ha Son Nguyen profil fotoğrafı
Ha Son Nguyen3 yıl önce

Would be awesome if it support the nextjs

Michael Dougall profil fotoğrafı
Michael Dougall3 yıl önce

@s0nhaaa It supports all frameworks and bundlers

Dami Dina profil fotoğrafı
Dami Dina3 yıl önce

🔥

Oskai profil fotoğrafı
Oskai3 yıl önce

awesome stuff. Any plans to support Linux?

Michael Dougall profil fotoğrafı
Michael Dougall3 yıl önce

Yes! Coming soon.

Zagreus profil fotoğrafı
Zagreus3 yıl önce

@JorgePAJ

Benzer Videolar

✨ 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
1:45

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

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
0:45

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

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.
1:41

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

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. 🧵
0:48

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

🚀 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
0:43

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

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. 🎉
0:52

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

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.
1:01

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

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.
0:42

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

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.
1:25

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

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!
0:31

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

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:
0:32

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

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
0:51

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

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 :)
0:23

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

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 👇🏻
0:59

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

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!
1:27

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

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!
1:13

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

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
0:40

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

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:
0:48

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