正在加载视频...

视频加载失败

加载此视频时出现问题。这可能是由于临时网络问题，或视频可能不可用。

▵ 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 次观看 • 3 年前 •via X (Twitter)

科学技术游戏艺术 #threejs #r3f #reactjs

Anya Rossi• Live Now

Private livecam show

10 条评论

Michael Dougall 的头像

Michael Dougall3 年前

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

Jason Lengstorf 的头像

Jason Lengstorf3 年前

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

Michael Dougall 的头像

Michael Dougall3 年前

@LWJShow 👀 definitely!

Fitz Muzenda 的头像

Fitz Muzenda3 年前

Looks great, why desktop over web?

Ha Son Nguyen 的头像

Ha Son Nguyen3 年前

Would be awesome if it support the nextjs

Michael Dougall 的头像

Michael Dougall3 年前

@s0nhaaa It supports all frameworks and bundlers

Dami Dina 的头像

Dami Dina3 年前

🔥

Oskai 的头像

Oskai3 年前

awesome stuff. Any plans to support Linux?

Michael Dougall 的头像

Michael Dougall3 年前

Yes! Coming soon.

Zagreus 的头像

Zagreus3 年前

@JorgePAJ

相关视频

✨ 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 次观看 • 3 年前

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 次观看 • 3 年前

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 次观看 • 1 年前

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 次观看 • 2 个月前

🚀 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 次观看 • 3 个月前

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 次观看 • 2 年前

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 次观看 • 1 年前

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 次观看 • 5 个月前

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 次观看 • 6 个月前

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 次观看 • 1 个月前

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 次观看 • 23 天前

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 次观看 • 3 年前

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

38,094 次观看 • 1 天前

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 次观看 • 1 年前

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 次观看 • 4 个月前

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 次观看 • 10 个月前

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 次观看 • 6 个月前

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 次观看 • 1 年前