Video yükleniyor...

Video Yüklenemedi

Ana Sayfaya Dön

Learn how we built our interactive 3D badge for Vercel Ship with React Three Fiber.

vercel's profile picture

Vercel

461,684 subscribers

275,300 görüntüleme • 2 yıl önce •via X (Twitter)

LIVE

Anya Rossi• Live Now

Private livecam show

0 Yorum

Yorum bulunmuyor

Orijinal gönderinin yorumları burada görünecek

Benzer Videolar

🧵How I made this interactive 3D scene with Blender and react-three-fiber
0:16

🧵How I made this interactive 3D scene with Blender and react-three-fiber

yasmin

146,045 görüntüleme • 2 yıl önce

The hero on the latest Shopify Editions page was all built with React Three Fiber. Here’s how we did it 👇
0:16

The hero on the latest Shopify Editions page was all built with React Three Fiber. Here’s how we did it 👇

Daniel Beauchamp

54,060 görüntüleme • 2 yıl önce

Card transition experiment with React Three Fiber + html-in-canvas. Try it here: Needs Chrome Canary for the interactive cards.
0:18

Card transition experiment with React Three Fiber + html-in-canvas. Try it here: Needs Chrome Canary for the interactive cards.

Zsolt Kacso

34,140 görüntüleme • 5 ay önce

Interactive 3d explorer with React Three Fiber. Worked with an artist to fix the topology and reduce the size of the CAD model. Custom LUT to more closely match the colour grade of the renders.
0:13

Interactive 3d explorer with React Three Fiber. Worked with an artist to fix the topology and reduce the size of the CAD model. Custom LUT to more closely match the colour grade of the renders.

Ben Leonard

12,314 görüntüleme • 6 ay önce

The world is fractured by wealth- a 3D fragile map of our divided world. 3D holographic globe that visualizes global economic inequality using the Gini Index data from World Bank. Spin the globe. Zoom in on any country. Built as a creative rendition of our economic ecosystem - beautiful, yet broken. #DataVisualization #ThreeJS #React #CreativeCoding #Geospatial #WebGL Three.js React-three-fiber
0:13

The world is fractured by wealth- a 3D fragile map of our divided world. 3D holographic globe that visualizes global economic inequality using the Gini Index data from World Bank. Spin the globe. Zoom in on any country. Built as a creative rendition of our economic ecosystem - beautiful, yet broken. #DataVisualization #ThreeJS #React #CreativeCoding #Geospatial #WebGL Three.js React-three-fiber

shadows

14,647 görüntüleme • 6 ay önce

📣 We are bringing WebGPU to React Native! This update enables: 🚀 Modern GPU APIs (Vulkan & Metal) and enables general purpose GPU computation for AI/ML 🐎 Seamless Reanimated integration 🧊 Bringing stunning 3d experiences to React Native using ThreeJS and React Three Fiber
0:15

📣 We are bringing WebGPU to React Native! This update enables: 🚀 Modern GPU APIs (Vulkan & Metal) and enables general purpose GPU computation for AI/ML 🐎 Seamless Reanimated integration 🧊 Bringing stunning 3d experiences to React Native using ThreeJS and React Three Fiber

Mustafa Ali

262,567 görüntüleme • 1 yıl önce

Run your backend on Vercel. • Python is generally available • Containers for other runtimes & system libraries • Daemons for async jobs & background workers
0:12

Run your backend on Vercel. • Python is generally available • Containers for other runtimes & system libraries • Daemons for async jobs & background workers

Vercel

131,116 görüntüleme • 7 gün önce

Still one of my fav projects I worked on in the day job – an interactive experience showing low-carbon technology for the home Custom 3D models created in Blender 🔶 and everything is rendered in the browser using Three.js and the awesome react-three-fiber
0:18

Still one of my fav projects I worked on in the day job – an interactive experience showing low-carbon technology for the home Custom 3D models created in Blender 🔶 and everything is rendered in the browser using Three.js and the awesome react-three-fiber

Robin Hawkes

26,548 görüntüleme • 3 yıl önce

Learn how LLMs work under the hood! This is the best interactive website to learn how LLMs work. It combines clear, step-by-step explanations with dynamic 3D visualizations for an intuitive learning experience.
0:12

Learn how LLMs work under the hood! This is the best interactive website to learn how LLMs work. It combines clear, step-by-step explanations with dynamic 3D visualizations for an intuitive learning experience.

Sumanth

113,186 görüntüleme • 1 yıl önce

New Astro + View Transitions demo ✨ This time using React Three Fiber to render an animated 3D model that persists across page-navigations.
0:18

New Astro + View Transitions demo ✨ This time using React Three Fiber to render an animated 3D model that persists across page-navigations.

Maxi Ferreira

125,867 görüntüleme • 3 yıl önce

Vercel Domains just got a full rebuild: • Search without logging in • Instant, streaming search results • At-cost pricing (up to 50% lower) • Private search, with no logging • Support for 500+ TLDs • Multi-domain checkout Try it now at
0:14

Vercel Domains just got a full rebuild: • Search without logging in • Instant, streaming search results • At-cost pricing (up to 50% lower) • Private search, with no logging • Support for 500+ TLDs • Multi-domain checkout Try it now at

Vercel

925,701 görüntüleme • 1 yıl önce

Transparent Globe Project- It’s finally complete! 10 unique interactive 3D globes, each visualizing a completely different global dataset in real time. From river flows and seismic activity to population density, global inequality, satellite constellations, and even Sonic Nomad roaming the planet with live music. Every globe is transparent, responsive, and built from scratch to feel alive. #CreativeCoding Three.js React-three-fiber #DataVisualization #WebGL #GenerativeArt #BuildInPublic
0:17

Transparent Globe Project- It’s finally complete! 10 unique interactive 3D globes, each visualizing a completely different global dataset in real time. From river flows and seismic activity to population density, global inequality, satellite constellations, and even Sonic Nomad roaming the planet with live music. Every globe is transparent, responsive, and built from scratch to feel alive. #CreativeCoding Three.js React-three-fiber #DataVisualization #WebGL #GenerativeArt #BuildInPublic

shadows

38,020 görüntüleme • 6 ay önce

interactive 3D letters that scatter via mouse position built with Spline v2
0:13

interactive 3D letters that scatter via mouse position built with Spline v2

Yianni

13,652 görüntüleme • 1 ay önce

Claude Sonnet 4.5 is now live on Vercel AI Cloud: • Improved v0, Vercel Agent, and more • Available on AI Gateway + AI SDK • New open source Coding Agent Platform
0:10

Claude Sonnet 4.5 is now live on Vercel AI Cloud: • Improved v0, Vercel Agent, and more • Available on AI Gateway + AI SDK • New open source Coding Agent Platform

Vercel

175,645 görüntüleme • 1 yıl önce

Start your 3D engines 🏎️ Learn how to build a 3D racing experience in less than an hour in Unity Studio, our web-based editor designed for industries like manufacturing, automotive, healthcare, architecture, and more. Join us live on June 3, 2026, at 9:00 AM PDT / 12:00 PM EDT to follow along step-by-step with Unity experts as we take pre-built assets and turn them into an interactive racing environment. You’ll learn how to: 🏎️ Build and customize interactive 3D scenes 💡 Add lighting, materials, and interactions quickly 🛠️ Assemble and iterate using Studio workflows 🎉 Publish and share your experience Register here:
0:15

Start your 3D engines 🏎️ Learn how to build a 3D racing experience in less than an hour in Unity Studio, our web-based editor designed for industries like manufacturing, automotive, healthcare, architecture, and more. Join us live on June 3, 2026, at 9:00 AM PDT / 12:00 PM EDT to follow along step-by-step with Unity experts as we take pre-built assets and turn them into an interactive racing environment. You’ll learn how to: 🏎️ Build and customize interactive 3D scenes 💡 Add lighting, materials, and interactions quickly 🛠️ Assemble and iterate using Studio workflows 🎉 Publish and share your experience Register here:

Unity

34,682 görüntüleme • 4 ay önce

This is such a cool interactive website to learn how LLMs work. It’s combines step-by-step text explanations with dynamic 3D visualizations for an immersive learning experience. Available to everyone for free!
0:12

This is such a cool interactive website to learn how LLMs work. It’s combines step-by-step text explanations with dynamic 3D visualizations for an immersive learning experience. Available to everyone for free!

Alvaro Cintas

305,872 görüntüleme • 1 yıl önce

When we say “ship it”, we mean it. Our Day Zero Stack is back with a new wave of partners and more exclusive discounts on the tools founders love most. Ship faster, hire smarter, and build with AI from day one with our partners deel, Drata, Granola, Linear, Gabriella Warp, Wispr Flow, Attio, and Vercel
0:19

When we say “ship it”, we mean it. Our Day Zero Stack is back with a new wave of partners and more exclusive discounts on the tools founders love most. Ship faster, hire smarter, and build with AI from day one with our partners deel, Drata, Granola, Linear, Gabriella Warp, Wispr Flow, Attio, and Vercel

Brex

37,566 görüntüleme • 8 ay önce

how can we improve the o11y on vercel for you?
0:15

how can we improve the o11y on vercel for you?

JohnPhamous

13,856 görüntüleme • 4 ay önce