CODEWITHSUNDEEP
javascriptthree.jsscene
KBA
KBA

Reputation: 11

Three.js --> What represent the THREE in THREE.scene

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.

Upvotes: 1

Views: 410

Answers (1)

CertainPerformance
CertainPerformance

Reputation: 370679

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.

Upvotes: 1

Related Questions