I'm new in the JS and I try to do some animations by using the library three.js.
I try to understand the instruction : const scene = new THREE.Scene();
I do not understand why we have to put the THREE (in THREE.Scene), could we not simply write const scene = new Scene(); ?
From where comes "THREE" in the library itself ?
Here is my html file:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<script src="./three.js"></script>
<script src="./script.js"></script>
</body>
</html>
My JS file contains just console.log(THREE) that returns me an object (in the console log).
Could someone, explain me better from where THREE comes ?
Thanks for your help.
THREE is the library's namespace. It's essentially a big object that contains all the methods and properties of the library. In order to access those methods/properties, you have to go through the namespace, because those properties are not made global - only the namespace object is made global, not anything else.
The library's code probably does something close to:
(() => {
const THREE = {};
// lots and lots of code that assigns to properties of THREE
window.THREE = THREE;
})();
This sort of pattern is extremely common in libraries - they assign lots of stuff to a big object, and expose that big object globally. Anything that then wants to use the library has to go through the big object, usually.