After downloading three.js from the official site, I encountered a strange error while trying to run a basic file. However, when I replaced the local import of the three.js file with a CDN, it started working properly. Can someone assist me in getting the file to run locally?
<html>
<head>
<title>1 - First Scene</title>
<link rel = "stylesheet" href = "Style.css">
<!-- <script src = "../three.js-master/src/Three.js"></script>--> <!-- This doesn't work, I get errors -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r83/three.min.js"></script> <!-- This works -->
</head>
<body>
</body>
</html>
<script >
let scene, camera, renderer;
// set up the environment -
// initialize scene, camera, objects and renderer
let init = function() {
// create the scene
scene = new THREE.Scene();
scene.background = new THREE.Color(0xababab);
// create and position the camera
camera = new THREE.PerspectiveCamera(30,
window.innerWidth / window.innerHeight,
1, 1000);
camera.position.z = 5;
// create the renderer
renderer = new THREE.WebGLRenderer();
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);
};
// main animation loop - calls 50-60 times in a second.
let mainLoop = function() {
console.log("Hello");
renderer.render(scene, camera);
requestAnimationFrame(mainLoop);
};
///////////////////////////////////////////////
init();
mainLoop();
</script>
Error screenshot : https://i.sstatic.net/AObfT.png