Three.js

WebGL & GLSL Demos - Some demos for the workshop, built with ThreeJS.

Animation and 3D in react-three-fiber (with Paul Henschel) (2019)

MagicShader - Tiny helper for three.js to debug and write shaders.

camera-controls - Camera control for three.js, similar to THREE.OrbitControls yet supports smooth transitions and more features.

3D Underwater Maps (2020)

react-xr - VR/AR with react-three-fiber.

drei - Useful helpers for react-three-fiber.

Bringing webgl to react - Paul Henschel (2020)

map33.js - Library to build 3D maps with Three.js. (HN)

Case study: Moving a Three.js-based WebXR app off-main-thread (2020)

Intro To React 3D

r3f floating diamonds

react-three-flex - Flexbox for react-three-fiber.

react-three-fiber Game Demo - Example implementation of a top-down 2d game made with React and react-three-fiber.

ocean - Realistic water shader for Three.js.

react-postprocessing - Postprocessing for react-three-fiber.

Three.js Journey - Ultimate Three.js course.

VueJS 3 + ViteJS + ThreeJS

Good looking planets in ThreeJS

Three.js Developer Tools (Code)

React Three Fiber + Next ES6 starter

Understand 3D in Javascript (ThreeJS) in 5 minutes (2020)

Procedural GL JS - Open-source 3D mapping library built with Three.js. (HN) (Lobsters)

React Three Editable - Edit your react-three-fiber scene with a visual editor without giving up control over your code.

Taichi THREE - Node-based soft renderer based on the Taichi Programming Language to render 3D scenes into nice-looking 2D images in real-time.

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

Mannequin.js - Articulated Mannequin Figure Library. (HN)

react-three-fiber - React Renderer for Three.js. (HN)

Component Material - Compose modular materials in React.

Three.js Sandbox - Set of experiments and extensions to Three.js.

Next & React three fiber starter

ThreeJS starter - General template for ThreeJS applications. It uses Parcel to create the bundle and Tweakpane for live updates.

three-projected-material - Three.js Material which lets you do Texture Projection on a 3d Model.

react-three/a11y - Accessibility tools for React Three Fiber.

Three.bas - Three.js Buffer Animation System.

Post Processing - Post processing library that provides the means to implement image filter effects for three.js.

three-elements - Web Components-powered custom HTML elements for building Three.js-powered games and interactive experiences. (Intro)

three-bmfont-text - Bitmap font rendering for ThreeJS, batching glyphs into a single BufferGeometry.

3D Force-Directed Graph - 3D force-directed graph component using ThreeJS/WebGL.

three-mesh-ui - Make VR user interfaces for Three.js.

ThreeJS Globe Visualization

Three.js Globe Tutorial (2020)

Github Globe - Globe from Github's homepage implemented in ThreeJS with beautiful shading.

Raymarching shaders - Collection of raymarching experiments using react-three-fiber & family.

Three Material Editor - GLSL editor for Threejs scene.

Recreating Real-World Terrain with React, Three.js and WebGL Shaders (2021) (HN)

threeify - Typescript 3D library loosely based on three.js. (Web)

three-gltf-extensions - Three.js glTF loader and exporter have plugin system to provide extensibility mechanism to users.

three-mesh-bvh - BVH implementation to speed up raycasting against and enable intersection tests for three.js meshes.

three-pathfinding - Navigation mesh toolkit for ThreeJS, based on PatrolJS.

Terrain Builder - Procedural terrain using Three.js and perlin noise, Now Accelerated by your GPU.

threepp - C++17 port of three.js.

Sketchbook - 3D playground built on three.js and cannon.js.

Magical Marbles in Three.js - Adding volumetric effects to a built-in Three.js shader.

Theatre.js - JavaScript Motion Design Library. (Code)

Three.js - Template - Complex

Three.js Modern App - Boilerplate and utils for a full screen Three.js app.

A technical breakdown of react-three-fiber (2021) (Tweet)

THREE-CSGMesh - Conversion of a CSG library for use with modern THREE.js.

three-csg-ts - CSG library for use with THREE.js

THREE.js-PathTracing-Renderer - Real-time PathTracing with global illumination and progressive rendering.

Ombra - Collection of shader-related utilities for react-three-fiber.

iTowns - Three.js-based framework written in JavaScript/WebGL for visualizing 3D geospatial data. (Web)

3DTilesViewer - 3DTiles viewer for three.js.

three-loader-3dtiles - Three.js loader module for handling OGC 3D Tiles, created by Cesium.

react-ogl - Declaratively create scenes with re-usable OGL components that have their own state and effects and can tap into React's infinite ecosystem.

three-vrm - Use VRM on Three.js.

Understanding the Three.js Transmission example (2021)

Cobe - 5kB WebGL globe lib.

Build fancy landing pages with React(-three-fiber) and ThreeJS (Tweet)

Three.js Journey implemented with React-Three-Fiber

Computer Graphics Études with WebGL and Three.js (Code)

Three Story Controls - Three.js camera toolkit for creating interactive 3d stories.

React ThreeJS Fiber Journey (Code)

use-p2 - React hooks for p2-es. Use this in combination with react-three-fiber.

Building a Vaporwave scene with Three.js (2022)

Point Text Helper - "Point Text" Helper for ThreeJS.

three.interaction - Three.js interaction toolkit, help you built an interaction event-system for three.js, binding interaction event like browser-dom.

lamina - Extensible, layer based shader material for ThreeJS.

Sketch ThreeJS - Interactive sketches made with three.js.

three-rt-helper - WebGLRenderTarget helper for three.js: see the output in real time in a window.

three-raymarcher - Raymarching abstraction for creating simple SDF animations with ThreeJS.

Interactive Hover Effects with Three.js

web-ifc-viewer - Graphics engine and toolkit for client applications.

Panolens.js - JavaScript panorama viewer based on Three.js.

React Three Scissor - Multiple scenes, one canvas! WebGL Scissoring implementation for React Three Fiber.

Custom Shader Material - Extend Three.js standard materials with your own shaders.

Three.js Immersive Controls - Immersive (VR) controls for Three.js.

R3F-Perf - Easily monitor your ThreeJS performances.

ThreeJS GPU path tracer - Path tracing renderer and utilities for three.js built on top of three-mesh-bvh.

MeshLine - Mesh replacement for THREE.Line.

Alien.js - MVC design pattern for building single-page applications with ES modules and three.js.

ThreeJS-water - Evan Wallace's webgl-water demo using ThreeJS.

Three.V8 - Embeddable 3D Rendering Engine with JS.

Infinite World Generation - Demo of the wave form collapse (WFC) algorithm with react three fiber and web assembly (WASM).

Personal vite starter for react-three-fiber projects

ThreeJS Helpers

ThreeJS Line object with variable width

Discover three.js (Code)

threejs-csg - Constructive Solid Geometry for three.js, ES6 + BufferGeometry.

Ektogamat ThreeJS Boilerplate

Reality Mixer JS - Mixed Reality Capture module for WebXR and Three.js.

three-filmic - Film emulsion-like rendering transforms for three.js.

LunchboxJS - Custom Vue 3 renderer for ThreeJS. (Docs)

r3f-spline - Hook to load Spline scenes into react-three-fiber.

vfx - Visual effects library for react-three-fiber.

Modern ThreeJS with Vite (2022)

react-three/rapier - Rapier physics in React.

SSPT in ThreeJS - Uses only screen-space information through ray marching to recreate the lighting of a scene, and denoises it with the SVGF algorithm.

Three-bvh-csg - Flexible, memory compact, fast and dynamic CSG implementation on top of three-mesh-bvh.

Three.js Screen Space Reflections

Curl Flow

react-three-csg - Constructive solid geometry for React.

The Study of Shaders with React Three Fiber (2022)

Shader Composer - Write Three.js shaders, but with JavaScript.

Physical Ray marching in ThreeJS

Ghost Veil - Effect of 'ThreJS plane' overlaid on 'DOM image'. (Code)

Vanilla ThreeJS Template