threejs.md

title
Three.js

Three.js

Ektogamat ThreeJS Boilerplate is nice.

Example sites

• My Room in 3D (Code) (HN)
• Solar Storm - Audio reactive scene built with React Three Fiber. (Code)

Links

• Three.js Fundamentals (HN) (Code)
• 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) (Tweet)
• 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
• Three.js Experiment - Vanishing Suzanne
• Three Lightmap Baker - Basic example of lightmapping in ThreeJS.
• Three landscape - React-three-fiber compatible abstractions that make it easier to render high quality landscapes scenes.
• Enable3d - Standalone 3D Framework / Physics for three.js (using ammo.js) / 3D extension for Phaser 3. (Web)
• Modern ThreeJS - Modern ThreeJS boilerplate powered by Vite & Typescript.
• Needle Engine - Web-based runtime for 3D apps. It runs on your machine for development, and can be deployed anywhere. It is flexible, extensible, and collaboration and XR come naturally.