Video yükleniyor...

Video Yüklenemedi

Ana Sayfaya Dön

🎮 React Three Game on Three.js Resources Learn how to build 3D games using React Three Fiber and #threejs. A great starting point for understanding game logic, interactivity, and real-time 3D on the web. 👉 #threejs #WebGL #GameDev #ReactThreeFiber #3D #Learning

threejsresource's profile picture

Three.js Resources

4,480 subscribers

15,990 görüntüleme • 7 ay önce •via X (Twitter)

#threejs#threejs#WebGL#GameDev#ReactThreeFiber
LIVE

Anya Rossi• Live Now

Private livecam show

0 Yorum

Yorum bulunmuyor

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

Benzer Videolar

It’s time for photorealistic 3D to be everywhere on the web! Announcing our Three.js & React-Three-Fiber library for #GaussianSplatting! Capture from your phone, integrate anywhere, customize to match your brand, and build shaders/effects. Available now 👉 #3DGS #3D #threejs #LumaAI
0:28

It’s time for photorealistic 3D to be everywhere on the web! Announcing our Three.js & React-Three-Fiber library for #GaussianSplatting! Capture from your phone, integrate anywhere, customize to match your brand, and build shaders/effects. Available now 👉 #3DGS #3D #threejs #LumaAI

Luma

230,503 görüntüleme • 2 yıl önce

I wanted to see what would happen if we stripped away pixels and polygons from a video, and instead tried to recreate moving footage using a single, unbroken, continuous line. Introducing SINGLETHREAD- experimental web app that transforms any video into a real-time, 3D oscilloscope-style sculpture, running entirely in the browser Tech Stack: React + Vite | Three.js + React-three-fiber + Postprocessing (Bloom glow) #CreativeCoding #ThreeJS #ReactThreeFiber #WebGL #GenerativeArt #TechArt #Frontend #3D
0:33

I wanted to see what would happen if we stripped away pixels and polygons from a video, and instead tried to recreate moving footage using a single, unbroken, continuous line. Introducing SINGLETHREAD- experimental web app that transforms any video into a real-time, 3D oscilloscope-style sculpture, running entirely in the browser Tech Stack: React + Vite | Three.js + React-three-fiber + Postprocessing (Bloom glow) #CreativeCoding #ThreeJS #ReactThreeFiber #WebGL #GenerativeArt #TechArt #Frontend #3D

shadows

75,882 görüntüleme • 5 ay önce

Marblie is a web-based 3D marble run game that explores interactive building mechanics and real-time physics simulation in the browser.
1:21

Marblie is a web-based 3D marble run game that explores interactive building mechanics and real-time physics simulation in the browser.

Three.js

15,524 görüntüleme • 1 yıl önce

⚡ GLTF Optimizer Optimize your 3D models for the web in seconds. Reduce file size, improve performance, and keep your #threejs scenes smooth all without losing quality. Perfect for faster 3D workflows. 👉 Creator: Simon #threejs #WebGL #3D #Optimization #Workflow #Performance #3DDev
0:41

⚡ GLTF Optimizer Optimize your 3D models for the web in seconds. Reduce file size, improve performance, and keep your #threejs scenes smooth all without losing quality. Perfect for faster 3D workflows. 👉 Creator: Simon #threejs #WebGL #3D #Optimization #Workflow #Performance #3DDev

Three.js Resources

18,177 görüntüleme • 7 ay önce

🥪 Learn how to make a 3D Sandwich Configurator with React Native and React Three Fiber! 🍭 WawaWonka is hidden in the video with a 🎟️ Golden Ticket to get for free! Be the first to redeem it 👉
0:29

🥪 Learn how to make a 3D Sandwich Configurator with React Native and React Three Fiber! 🍭 WawaWonka is hidden in the video with a 🎟️ Golden Ticket to get for free! Be the first to redeem it 👉

Wawa Sensei

39,633 görüntüleme • 2 yıl önce

Here's what it looks like to block out a scene with Triplex — the React Three Fiber editor. Sound on 🔊 #threejs #react #r3f
1:04

Here's what it looks like to block out a scene with Triplex — the React Three Fiber editor. Sound on 🔊 #threejs #react #r3f

mike douges

56,802 görüntüleme • 3 yıl önce

Bored of boring flat heatmaps? Introducing Topographical Explorer that turns any country into a real-time tactile landscape Search any country → watch real elevation data come alive as thousands of satisfying 3D blocks. Built entirely client-side with: - React Three Fiber + Three.js - AWS Terrain Tiles + OpenStreetMap - Real-time boundary Three.js React-three-fiber #DataVisualization #Geospatial #CreativeCoding #BuildInPublic
0:24

Bored of boring flat heatmaps? Introducing Topographical Explorer that turns any country into a real-time tactile landscape Search any country → watch real elevation data come alive as thousands of satisfying 3D blocks. Built entirely client-side with: - React Three Fiber + Three.js - AWS Terrain Tiles + OpenStreetMap - Real-time boundary Three.js React-three-fiber #DataVisualization #Geospatial #CreativeCoding #BuildInPublic

shadows

620,223 görüntüleme • 4 ay önce

Sunday v0: a web-based 3D Jenga game. Everything is procedurally generated: the structure, the bricks, the wooden texture, the sounds, the carved-in ▲ on the top pieces. I tweaked the physics enough that it feels as fun and frustrating as the real thing 😂 Cool technical detail: v0 loaded a R3F (react-three-fiber) Skill automatically when I first asked for a 3d game. Anecdotally it seems that it totally nailed how to work with 3D!
1:10

Sunday v0: a web-based 3D Jenga game. Everything is procedurally generated: the structure, the bricks, the wooden texture, the sounds, the carved-in ▲ on the top pieces. I tweaked the physics enough that it feels as fun and frustrating as the real thing 😂 Cool technical detail: v0 loaded a R3F (react-three-fiber) Skill automatically when I first asked for a 3d game. Anecdotally it seems that it totally nailed how to work with 3D!

Guillermo Rauch

52,937 görüntüleme • 5 ay önce

which tutorial (+code) should I release next? > Left: 3D graph data viz > Right: Severance game projects are built with Three.js and mediapipe AI vision learn how to build real-time hand tracking apps for 3D design, games, etc.
0:12

which tutorial (+code) should I release next? > Left: 3D graph data viz > Right: Severance game projects are built with Three.js and mediapipe AI vision learn how to build real-time hand tracking apps for 3D design, games, etc.

AA

19,435 görüntüleme • 1 yıl önce

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

Broke from flat maps, Introducing Seismic 3D: Built a "Glass Planet" volumetric viz showing earthquakes DEEP in Earth's crust (10x depth scale for subduction zones)! Tech: React + Three.js via React-three-fiber + USGS Earthquakes API feed. Instanced Mesh for 60FPS on 8K+ events! Like/RT : Tag a friend who geeks out on this & share your thoughts below! #ThreeJS #CreativeCoding #DataViz #earthquake #USGS #ESRI
0:30

Broke from flat maps, Introducing Seismic 3D: Built a "Glass Planet" volumetric viz showing earthquakes DEEP in Earth's crust (10x depth scale for subduction zones)! Tech: React + Three.js via React-three-fiber + USGS Earthquakes API feed. Instanced Mesh for 60FPS on 8K+ events! Like/RT : Tag a friend who geeks out on this & share your thoughts below! #ThreeJS #CreativeCoding #DataViz #earthquake #USGS #ESRI

SHAHNAB AHMED

40,126 görüntüleme • 6 ay önce

Machine learning meets 3D web dev 🚗 I used Proximal Policy Optimization to train an AI to navigate a 3D racetrack, combining tensorflow.js and three.js Live: Code: Car driving mechanics from Bruno Simon #MachineLearning #AI #TensorFlow #threejsJourney #threejs
0:42

Machine learning meets 3D web dev 🚗 I used Proximal Policy Optimization to train an AI to navigate a 3D racetrack, combining tensorflow.js and three.js Live: Code: Car driving mechanics from Bruno Simon #MachineLearning #AI #TensorFlow #threejsJourney #threejs

Fredrik

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

23,984 görüntüleme • 2 ay önce

I was asked by many people last week about how to use the new ThreeJS WebGPU inspector and control panel in React-Three-Fiber. Here is how I personally use it: Code: Demo: #threejs #r3f #creativecoding
0:36

I was asked by many people last week about how to use the new ThreeJS WebGPU inspector and control panel in React-Three-Fiber. Here is how I personally use it: Code: Demo: #threejs #r3f #creativecoding

Faraz

45,871 görüntüleme • 2 ay önce

Shipping react-three/handle! The one to handle them all! 👌 Build intuitive 3D and XR cross-platform interactions with just one line of code. #R3F Three.js #WebXR
1:02

Shipping react-three/handle! The one to handle them all! 👌 Build intuitive 3D and XR cross-platform interactions with just one line of code. #R3F Three.js #WebXR

Bela Bohlender

18,660 görüntüleme • 1 yıl önce

Introducing Operation Matrix Because Matrix operations generally break kids’ brains on whiteboards… Matrices aren't just numbers- they are transformations in space Now can actually SEE the geometry: every addition, multiplication, inverse, eigenvalue, and eigenvector becomes a transformation in real-time space. What it visualizes: • Basic ops (add/subtract/multiply) • Transpose, Invert, Adjugated • Cross products + Determinant • Matrix powers + Eigenvalues/Eigenvectors #LinearAlgebra #CreativeCoding #ThreeJS #ReactThreeFiber #MathVisualization #EdTech #WebGL #STEM React-three-fiber Three.js
0:37

Introducing Operation Matrix Because Matrix operations generally break kids’ brains on whiteboards… Matrices aren't just numbers- they are transformations in space Now can actually SEE the geometry: every addition, multiplication, inverse, eigenvalue, and eigenvector becomes a transformation in real-time space. What it visualizes: • Basic ops (add/subtract/multiply) • Transpose, Invert, Adjugated • Cross products + Determinant • Matrix powers + Eigenvalues/Eigenvectors #LinearAlgebra #CreativeCoding #ThreeJS #ReactThreeFiber #MathVisualization #EdTech #WebGL #STEM React-three-fiber Three.js

shadows

58,889 görüntüleme • 5 ay önce

Hey everyone!! New tutorial out!!! Create your own Papercraft web portfolios with three.js, Blender, React/React Three Fiber, and Krita! ✂️✂️✂️✂️📰📰🖋️🖋️🖋️ The video below has two example websites! Code, credits, and other files are here: #threejs #b3d #blender #r3f
0:36

Hey everyone!! New tutorial out!!! Create your own Papercraft web portfolios with three.js, Blender, React/React Three Fiber, and Krita! ✂️✂️✂️✂️📰📰🖋️🖋️🖋️ The video below has two example websites! Code, credits, and other files are here: #threejs #b3d #blender #r3f

Andrew Woan

23,269 görüntüleme • 6 ay önce

⚡ Anime.js A lightweight animation library that makes motion simple and expressive. Perfect for learning animation timing, easing, and sequencing and for pairing with #threejs to animate 3D scenes smoothly. 👉 creator: Julian Garnier #animejs WebGPU #webgl #animation #frontend #learning
0:47

⚡ Anime.js A lightweight animation library that makes motion simple and expressive. Perfect for learning animation timing, easing, and sequencing and for pairing with #threejs to animate 3D scenes smoothly. 👉 creator: Julian Garnier #animejs WebGPU #webgl #animation #frontend #learning

Three.js Resources

54,361 görüntüleme • 7 ay önce