Загрузка видео...

Не удалось загрузить видео

На главную

▵ 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 просмотров • 3 лет назад •via X (Twitter)

Наука и технологииИгрыИскусство#threejs#r3f#reactjs
LIVE

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
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 просмотров • 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
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 просмотров • 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.
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 просмотров • 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. 🧵
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 просмотров • 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
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 просмотров • 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. 🎉
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 просмотров • 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.
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 просмотров • 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.
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 просмотров • 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.
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 просмотров • 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!
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 просмотров • 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:
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 просмотров • 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
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 просмотров • 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 :)
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

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 👇🏻
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 просмотров • 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!
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 просмотров • 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!
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 просмотров • 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
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 просмотров • 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:
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 просмотров • 1 год назад