I'm currently working on localhost and I've encountered an issue while trying to import "orbitcontrols()" which is not functioning properly and displaying an error. Here is the error message
main.js:1 Uncaught SyntaxError: Cannot use import statement outside a module (at main.js:1:1)This is how I imported the orbitcontrols() in my main.js file:
import {OrbitControls} from "./examples/jsm/controls/OrbitControls";
//...includes scene, camera, and renderer etc
const controls = new OrbitControls(camera,canvas)
controls.enableDamping = true
function animate() {
requestAnimationFrame(animate);
controls.update();
renderer.setSize(sizes.width, sizes.height);
renderer.setPixelRatio(Math.min(window.devicePixelRatio, 2))
renderer.render(scene,camera);
}
animate()
Below is the code snippet from my index.html file:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>My Project Title</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<canvas class="webgl"></canvas>
<script src="./three.min.js"></script>
<script src="main.js"></script>
</body>
</html>
Folder structure of my project:
someFolder
|
├ -index.html
├ -main.js
├ -three.min.js
├ -style.css
├ -package-lock.json
|
├ -build
| |
| +-three.module.js
|
+-examples
|
+-jsm
|
+-controls
|
+-OrbitControls.js
...
Could it be that I mistakenly used 'three.min.js' instead of 'three.js' file?
Your advice or suggestions would be greatly appreciated.