'Three.js Scene is not a constructor

I am trying to make a simple scene with some Three.js to experiment with it and i am currently having an unknown problem.

In the explorer console it keeps saying that Three.Scene() is not a constructor no matter if i import my download of Three or if i use the cdnjs.

import * as Three from 'https://cdnjs.cloudflare.com/ajax/libs/three.js/r128/three.js';


let scene, camera, renderer, cube;

function init() {
    scene = new Three.Scene();
    camera = new Three.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);

    renderer = new Three.WebGLRenderer({ antialias: true });

    renderer.setSize(window.innerWidth, window.innerHeight);

    document.body.appendChild(renderer.domElement);

    const material = new Three.MeshBasicMaterial({ color: 0x00ff00 });

    scene.background = new Three.color(FFFF);

    const geometry = new Three.BoxGeometry(1, 1, 1);
    cube = new Three.Mesh(geometry, material);
    scene.add(cube);

    camera.position.z = 5;
}


function onWindowResize() {
    camera.aspect = window.innerWidth / window.innerHeight;
    camera.updateProjectionMatrix();
    renderer.setSize(window.innerWidth, window.innerHeight);
}

init();

window.addEventListener('resize', onWindowResize, false)


function animate() {
    requestAnimationFrame(animate);
    cube.rotation.x += 0.1;
    cube.rotation.y += 0.1;
    renderer.render(scene, camera);
}

animate();

I actually searched for this question but the only ones who had the same problem as me were people who misspelled something or imported something wrong.

Here the HTML:

<!DOCTYPE html>

<html>
<head>
    <meta charset="utf-8" />
    <title>THREE Test</title>
    <link rel="stylesheet" href="style.css" />
</head>
<body>
    <script type="module" src="./code.js"></script>
</body>
</html>

javascript three.js

Solution 1:^[1]

The import is not correct. It should be:

https://cdnjs.cloudflare.com/ajax/libs/three.js/r128/three.module.js

three.module.js is the ESM build file whereas three.js is UMD. If you want to use ES6 import syntax in your app, you have to use the ESM version.

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution	Source
Solution 1	Mugen87

'Three.js Scene is not a constructor

Solution 1:[1]

Sources

Related Questions

Solution 1:^[1]