28 posts tagged with React Three Fiber

reactReact Three FiberThree.jsWebGL

Model Texture Transition and Procedural Radial Noise using WebGL

In Playground, May 2, 2024 by Mohammed Amine Bourouis

A WebGL experiment that explores two visual effects: a texture transition on a 3D can model and a procedural radial noise field.

reactReact Three FiberThree.jstypographyWebGL

Creating an Interactive 3D Bulge Text Effect with React Three Fiber

In Tutorials, Mar 20, 2024 by Roman Jean-Elie

Exploring how to generate an engaging bulge effect on text using React Three Fiber.

reactReact Three FiberscrollThree.jsWebGL

On-Scroll Revealing WebGL Images

In Playground, Feb 7, 2024 by Yuri Artiukh

An exploration of on-scroll reveal effects for images in WebGL, using React Three Fiber.

3DreactReact Three FiberThree.jsWebGL

3D Glass Portal Card Effect with React Three Fiber and Gaussian Splatting

In Playground, Nov 29, 2023 by Yuri Artiukh

Explore the creation of a 3D glass portal with React Three Fiber, with optimized rendering using Gaussian Splatting and integrating real-world objects.

reactReact Three FiberrefractionscrollThree.jsWebGL

Progressively Enhanced WebGL Lens Refraction

In Tutorials, Oct 10, 2023 by David Lindkvist

Learn how to create a responsive WebGL layout powered by CSS and React Three Fiber.

carouselGSAPpostprocessingreactReact Three FiberThree.jsWebGL

Building a WebGL Carousel with React Three Fiber and GSAP

In Tutorials, Apr 27, 2023 by Fabio Ottaviani

Learn how to create an interactive 3D carousel using WebGL, React Three Fiber, and GSAP with this step-by-step tutorial.

case studyreactReact Three FiberWebGL

Case Study: Studiogusto

In Articles, Apr 25, 2023 by studiogusto

Get a glimpse of the creative and innovative techniques used by Studiogusto, a dynamic agency, in designing their new website to better reflect their values and showcase their expertise.

infiniteparticlespostprocessingreactReact Three FiberThree.jsWebGL

Recreating a Dave Whyte Animation in React-Three-Fiber

In Tutorials, Dec 17, 2020 by Matt Rossman

Learn how to use instanced rendering and post-processing techniques to recreate a hypnotic looping animation with react-three-fiber.

cannon.jsreactReact Three FiberreflectionrefractionThree.jsuse-cannon

Creating Mirrors in React-Three-Fiber and Three.js

In Tutorials, Sep 30, 2020 by Gianmarco Simone

A brief walk-through of how to create a mirror scene with react-three-fiber.

distortionglslparallaxreactReact Three FiberscrollThree.jsWebGL

Scroll, Refraction and Shader Effects in Three.js and React

In Tutorials, Dec 16, 2019 by Paul Henschel

Discover how to use react-three-fiber and combine some common techniques to create a Three.js powered layout with shader effects.