title: Three.js error --> THREE.Scene is not a constructor
body: <p>I can't execute my code because of this error:</p>
  
  <pre><code>TypeError: THREE.Scene is not a constructor
  </code></pre>
  
  <p>I use the three.js file from the official github repo and here are my files:</p>
  
  <p>index.html</p>
  
  <pre><code>&lt;html lang="en"&gt;
  &lt;head&gt;
      &lt;meta charset="UTF-8"&gt;
      &lt;meta name="viewport" content="width=device-width, initial-scale=1.0"&gt;
      &lt;link rel="stylesheet" href="../style.css"&gt;
      &lt;title&gt;First three.js&lt;/title&gt;
  &lt;/head&gt;
  &lt;body&gt;
      &lt;script type="module" src="../frontend/tetrahedrons_render.js"&gt;&lt;/script&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>tetrahedrons_render.js</p>
  
  <pre><code>import * as THREE from '../lib/three.js';
  // Create the scene
  const scene = new THREE.Scene();
  scene.background = new THREE.Color(0x2d3436);
  // Set up the camera
  const camera = new THREE.PerspectiveCamera(100, window.innerWidth / window.innerHeight, 0.1, 1000);
  // Set up the render
  const renderer = new THREE.WebGLRenderer();
  renderer.setSize(window.innerWidth, window.innerHeight);
  renderer.setPixelRatio(window.devicePixelRatio);
  document.body.appendChild(renderer.domElement);
  // Create n random tetrahedrons
  const n = Math.floor(Math.random() * 7) + 2;
  const tetrahedrons = [];
  const positions = [];
  let x, y;
  for (let i = 0; i &lt; n; i++) {
    do {
      x = Math.floor(Math.random() * 10) - 5;
      y = Math.floor(Math.random() * 10) - 5;
    } while ([x, y] in positions);
    positions.push([x, y]);
    tetrahedrons.push(createTetrahedron(x * 2.5, y * 2.5));
  }
  // Color one random tetrahedron in black and another in white
  const i = Math.floor(Math.random() * tetrahedrons.length);
  let i2;
  do {
    i2 = Math.floor(Math.random() * tetrahedrons.length);
  } while (i2 === i);
  tetrahedrons[i].geometry.faces.forEach((face) =&gt; {
    face.color = new THREE.Color('black');
  });
  tetrahedrons[i2].geometry.faces.forEach((face) =&gt; {
    face.color = new THREE.Color('white');
  });
  
  camera.position.z = 15;
  
  function animate() {
    requestAnimationFrame(animate);
    // Rotation
    tetrahedrons.forEach((tetrahedron) =&gt; {
      tetrahedron.rotation.x += 0.03;
      tetrahedron.rotation.y -= 0.03;
    });
    renderer.render(scene, camera);
  }
  animate();
  
  function createTetrahedron(x, y) {
    const geometry = new THREE.Geometry();
    geometry.colorsNeedUpdate = true;
    geometry.vertices.push(
      new THREE.Vector3(1, 1, 1),
      new THREE.Vector3(-1, -1, 1),
      new THREE.Vector3(-1, 1, -1),
      new THREE.Vector3(1, -1, -1),
    );
    // * To be pointing toward the outside of the cube
    // * they must be specified in a counter clockwise
    // * direction when that triangle is facing the camera
    geometry.faces.push(
      new THREE.Face3(0, 2, 1),
      new THREE.Face3(0, 3, 2),
      new THREE.Face3(0, 1, 3),
      new THREE.Face3(1, 2, 3),
    );
    // Set faces colors
    geometry.faces[0].color = new THREE.Color('red');
    geometry.faces[1].color = new THREE.Color('blue');
    geometry.faces[2].color = new THREE.Color('green');
    geometry.faces[3].color = new THREE.Color('yellow');
    // Set materials
    const material = new THREE.MeshBasicMaterial({
      color: 0x95a5a6,
      vertexColors: THREE.FaceColors,
    });
    material.needsUpdate = true;
    const tetrahedron = new THREE.Mesh(geometry, material);
    tetrahedron.geometry.colorsNeedUpdate = true;
    // Add the tetrahedron to the scene
    scene.add(tetrahedron);
    tetrahedron.position.x = x;
    tetrahedron.position.y = y;
    return tetrahedron;
  }
  </code></pre>
  
  <p>Here's the all code, but I think the problem must be at the first line import.</p>
  
  <p>I saw a lot of posts with a similar error but I can't find a solution for me.</p>