I tried to import OrbitControls but it isnt working.
I imported three.js and then tried impoting OrbitControls but it isnt working
I imported three.js in the body of the html with this command
script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/104/three.js"
NOTE: I do have a scene and a camera and a renderer but i cant post this post with them here
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="Css/master.css">
</head>
<body>
<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/104/three.js"></script>
<script src="Main.js"></script>
</body>
</html>
***Main.js***
import { OrbitControls } from 'three/example/jsm/controls/OrbitControls';
const controls = new OrbitControls(camera, renderer.domElement);
function animate(){
requestAnimationFrame(animate);
torus.rotation.x +=0.01;
torus.rotation.y +=0.01;
torus.rotation.z +=0.01;
controls.update();
renderer.render(scene,camera);
}
animate()
You're using the jsm version of the OrbitControls, which means that you need a module for the Javascript file. Change:
<script src="Main.js"></script>
to
<script type="module" src="Main.js"></script>
That should do the trick.