Threejs Scene not working in my project / THREE not defined-CodePudding

I wanted to create m first three js project and followed a tutorial. But when my page loads no scene is showing up. The sscene should be completly black but the site is just white.

Chrome Browser Console:

three.js:1 Failed to load resource: net::ERR_FILE_NOT_FOUND main.js:1 Uncaught SyntaxError: Cannot use import statement outside a module

My vs code workspace;

My html and js code:

function main(){

    var scene = new THREE.Scene();
    var camera = new THREE.PerspectiveCamera(45,window.innerWidth/window.innerHeight,1,1000);
    var renderer = new THREE.WebGLRenderer();

    renderer.setSize(window.innerWidth,window,innerHeight);
    document.getElementById('webgl').appendChild(renderer.domElement);
    renderer.render(scene,camera);
}

main();

<!DOCTYPE html>

<html>
    <head>
        <title>Three js test</title>
        <style type="text/css">html, body {margin: 0; padding: 0; overflow: hidden;}</style>
    </head>
    <body>
        <div id="webgl"></div>
        <script src="/lib/three.js"></script>
        <script src="./main.js"></script>
    </body>
</html>

CodePudding user response：

<script src="lib/three.js"></script>

Maybe try removing the '/' from your three.js path?

CodePudding user response：

I ended up working with the live server extension of vs code and used the three.module.js.

It worked using this.