Three.js error -- THREE.Scene is not a constructor

Question

I can't execute my code because of this error:

TypeError: THREE.Scene is not a constructor

I use the three.js file from the official github repo and here are my files:

index.html

<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="../style.css">
    <title>First three.js</title>
</head>
<body>
    <script type="module" src="../frontend/tetrahedrons_render.js"></script>
</body>
</html>

tetrahedrons_render.js

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 < 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) => {
  face.color = new THREE.Color('black');
});
tetrahedrons[i2].geometry.faces.forEach((face) => {
  face.color = new THREE.Color('white');
});

camera.position.z = 15;

function animate() {
  requestAnimationFrame(animate);
  // Rotation
  tetrahedrons.forEach((tetrahedron) => {
    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;
}

Here's the all code, but I think the problem must be at the first line import.

I saw a lot of posts with a similar error but I can't find a solution for me.

TheJim01 · Accepted Answer

Three.js has three output files:

three.js
- An un-mangled bundle of the three.js source
three.min.js
- A mangled/minified (smaller) version of the bundled three.js source
three.module.js
- A JavaScript module version of the three.js bundle

You need to reference the last one in order to import the three.js exports. Copy three.module.js into your lib folder, then:

import * as THREE from '../lib/three.module.js';

Three.js error --> THREE.Scene is not a constructor

Tags:

javascript

three.js

Eccsx

1 Answers

TheJim01

Recent Activity

Donate For Us