How to Tell If a Website Uses Three.js

Three.js is the dominant WebGL 3D library for the web, powering everything from immersive marketing experiences and product configurators to data-in-3D and browser games. Because it exposes a clear global and renders to a WebGL canvas, detecting it is straightforward: type THREE into the console or look for three.min.js in the Network tab. This guide covers every reliable signal, the WebGL architecture behind them, the look-alikes to rule out, and what Three.js usage tells you about the team.

What is Three.js?

Three.js, created by Ricardo Cabello (Mr.doob), is a JavaScript library that makes WebGL 3D graphics approachable. WebGL is the low-level browser API for GPU-accelerated graphics; Three.js wraps it in a friendly scene-graph model — scenes, cameras, lights, geometries, materials and meshes — so developers can build 3D experiences without writing raw GPU code. It is the standard for 3D on the web, behind creative agency showcases, product configurators (cars, furniture, sneakers), immersive marketing, scientific and architectural visualisation, and browser-based games.

For detection, the key context is that Three.js signals a 3D/WebGL-heavy experience — a particular and demanding category of site. Finding it tells you the team has real graphics and front-end expertise and chose to build an immersive or interactive 3D experience. Because Three.js registers a clear global and renders into a recognisable WebGL canvas, it is easy to confirm, and the experience itself corroborates the finding. Its presence is a strong indicator of a design- or product-led site that invests heavily in front-end craft.

How Three.js loads and renders

A Three.js install loads the library — three.min.js (or a module build, three.module.js) — commonly from a public CDN such as cdn.jsdelivr.net/npm/three, cdnjs.cloudflare.com or unpkg.com, or bundled via a build tool. At runtime it exposes the global window.THREE object, a namespace of classes: THREE.Scene, THREE.PerspectiveCamera, THREE.WebGLRenderer, THREE.Mesh, THREE.BoxGeometry, THREE.MeshStandardMaterial, and many more. (Pure ES-module builds may not attach THREE to window, in which case the canvas and asset signals matter more.)

The rendering output is the other signature: Three.js draws into an HTML <canvas> using a WebGL context, so a Three.js experience appears as a canvas displaying interactive 3D. In the React ecosystem, react-three-fiber (R3F) wraps Three.js in a declarative component model, so a React site doing 3D is almost certainly using Three.js under the hood — THREE is present even though the code looks like React components. You may also see loaders for 3D model formats (.gltf/.glb, via GLTFLoader) in the network traffic. Knowing this — the THREE global, the three.min.js script, the WebGL canvas, and R3F in React apps — makes detection reliable.

How to tell if a website uses Three.js

Confirm at least one strong signal.

1. Use the console. Type THREE and press Enter. A returned object with Scene, WebGLRenderer and Mesh confirms Three.js. Check THREE.REVISION for the version.

2. Check the Network tab. Filter for three. Look for three.min.js/three.module.js, often from a CDN, plus any .gltf/.glb 3D model files.

3. Inspect the canvas. Find the 3D area and confirm it is a <canvas> with a WebGL context (the interactive 3D itself corroborates).

4. View the source. Search for THREE, three.js, WebGLRenderer or react-three-fiber/@react-three/fiber.

5. Look for R3F in React apps. References to @react-three/fiber or @react-three/drei confirm Three.js used via React.

What the Three.js signals look like

<script src="https://cdn.jsdelivr.net/npm/[email protected]/build/three.min.js"></script>
window.THREE = { Scene: ƒ, PerspectiveCamera: ƒ, WebGLRenderer: ƒ, Mesh: ƒ, … }
THREE.REVISION  // "160"
<canvas data-engine="three.js …" width=… height=…></canvas>   // WebGL context
// React: import { Canvas } from "@react-three/fiber"

The window.THREE global (or a @react-three/fiber reference in React apps) plus a WebGL canvas is conclusive.

Three.js versus other 3D/graphics tools — avoiding false positives

Match the global and rendering. Three.js uses window.THREE and a WebGL canvas; Babylon.js uses window.BABYLON; PlayCanvas uses pc and its engine; PixiJS is 2D WebGL with window.PIXI; Spline embeds 3D scenes via its own viewer/runtime. The THREE global is unique. A WebGL canvas alone does not identify the library — confirm with the global or a library-specific reference. The main subtlety is ES-module builds that do not attach THREE to window and R3F in React apps: there, look for @react-three/fiber/@react-three/drei references, GLTF model loads, and the WebGL canvas. Do not confuse Three.js (3D) with 2D canvas libraries or CSS 3D transforms.

How reliable is each Three.js signal?

The window.THREE global is definitive, and THREE.REVISION gives the version. A three.min.js/three.module.js script is strong. A @react-three/fiber reference conclusively indicates Three.js via React. A WebGL canvas corroborates but, alone, does not identify the library. The weakest situation is a pure ES-module build with no window.THREE, where you rely on R3F references, GLTF loads and the canvas. As a rule, the THREE global or an R3F reference settles it; the WebGL canvas confirms the 3D experience.

What Three.js usage reveals about a site

Finding Three.js signals a 3D/WebGL-heavy experience built by a team with real graphics and front-end expertise. It is especially common on creative agency showcases, product configurators, immersive marketing campaigns, architectural and scientific visualisation, and browser games — sites where interactive 3D is central. Its presence tells you the team invests heavily in front-end craft and has specialised skills (3D maths, shaders, performance optimisation for the GPU). If you sell to agencies, creative studios, or product teams building configurators or immersive experiences, a Three.js site marks exactly that audience. The use of react-three-fiber additionally indicates a React team bringing 3D into a modern component architecture. The revision (version) hints at how current the 3D work is.

What finding Three.js means for sales, agencies and competitive research

For sales and prospecting, Three.js marks a 3D/WebGL-capable, craft-focused team — a fit for creative tools, 3D-asset services, agencies, and product-configurator platforms. Its presence signals specialised expertise and budget for immersive work.

For agencies and consultants, finding Three.js on a prospect's site shows they value immersive experience; finding it (or its absence) on competitors reveals who has 3D capability. R3F usage specifically indicates React-plus-3D expertise.

For competitive and market research, Three.js adoption indicates how far a competitor invests in immersive, interactive experiences. Spotting it suggests configurators, 3D product views or immersive campaigns, useful when benchmarking experience ambition and the studios a brand works with.

Three.js in the wider front-end stack

Three.js sits in the graphics layer and pairs with whatever the site uses for structure — vanilla JS for standalone experiences, or React via react-three-fiber for integrated apps. On creative sites it frequently accompanies GSAP for animation, smooth-scroll libraries, and shader code; on product configurators it pairs with a framework, a 3D model pipeline (GLTF assets, often optimised with Draco compression), and a commerce backend. It is loaded from a CDN or bundled. For an auditor, the valuable details are whether Three.js is used directly or via R3F, the model formats and loaders in use, the accompanying animation/scroll libraries, and the underlying framework; together these reveal a graphics-capable team and the sophistication of its 3D work.

A quick Three.js confirmation walkthrough

Open the site with developer tools on the Console panel and type THREE — a returned object with Scene/WebGLRenderer confirms Three.js; check THREE.REVISION for the version. If THREE is undefined (a module build), search the source for @react-three/fiber or three.module.js, and look in the Network tab for three scripts and .gltf/.glb model files. Inspect the 3D area to confirm it is a WebGL <canvas>. The THREE global or an R3F reference, plus the WebGL canvas, is enough to confirm Three.js.

A quick Three.js detection checklist

• Type THREE in the console; a returned object is conclusive. Check THREE.REVISION.
• Check the Network tab for three.min.js/three.module.js and .gltf/.glb files.
• Inspect the 3D area for a WebGL <canvas>.
• In React apps, search for @react-three/fiber / @react-three/drei.
• Search the source for THREE, WebGLRenderer or three.js.
• Distinguish Three.js (THREE) from Babylon.js (BABYLON) and PixiJS (PIXI).

Detecting Three.js at scale

Checking one site is quick, but mapping 3D-library adoption across many domains — to find immersive, graphics-capable teams — calls for automation. StackOptic detects Three.js and thousands of other technologies from a real browser, reading runtime globals and assets so it catches bundled and R3F installs. Because Three.js marks a relatively rare and demanding capability, a market-wide scan for it quickly surfaces the small set of brands and studios genuinely investing in immersive 3D — a precise, high-value segment for anyone selling 3D-asset, configurator or creative services. For related reading, see our guide to checking what JavaScript libraries a website uses and the full Three.js technology profile.