Three.js Detector

How can you detect if a website uses Three.js?

Detecting whether a website uses Three.js involves looking for specific code and markers in the page source that indicate its presence.

Here’s a step-by-step guide on how to do it:

1. Open the Page Source: Right-click on the webpage and select “View Page Source” or press Ctrl+U (Windows) or Cmd+Option+U (Mac) to open the page source code.
2. Search for Three.js Script: Look for the inclusion of the Three.js library by searching for keywords such as:
   • three.js: Check if there’s a script tag that imports the Three.js library. For example, <script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r128/three.min.js"></script>
   • THREE: This is the primary object used in Three.js. Look for instances of new THREE in the code that indicates the initialization of Three.js objects (e.g., new THREE.Scene()).
3. Look for Three.js Related Code: Use Ctrl+F (Windows) or Cmd+F (Mac) to search for terms like:
   • THREE.: This typically indicates the use of Three.js methods and properties.
   • data-engine: Sometimes, Three.js is mentioned in data attributes. Search for something like data-engine="three.js".
   • window.__THREE__: Some websites use a global variable to identify Three.js usage.
4. Check for Canvas or WebGL: Look for <canvas> elements in the HTML which Three.js uses for rendering. You can search for <canvas in the source code.
5. Inspect JavaScript Initialization: Sometimes, Three.js is initialized in JavaScript functions. Look for initialization code like:const scene = new THREE.Scene();
6. Look for Renderer Initialization: Search for code that initializes the WebGL renderer, often denoted by:const renderer = new THREE.WebGLRenderer();
7. Examine Event Listeners: Check if there are event listeners related to rendering or animation, often indicating Three.js usage, like:requestAnimationFrame(render);
8. Check for 3D Model Loading: Look for methods related to loading 3D models, such as:
   • THREE.GLTFLoader
   • THREE.OBJLoader