What is the best method for importing OrbitControls into my three.js project?

I'm having trouble importing OrbitControls into my project.
I included three.js and then attempted to import OrbitControls, but it's not functioning as expected. I added three.js to the HTML body using the following command:

script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/104/three.js"
NOTE: I have a scene, camera, and renderer set up, but I can't include them in this post.

<!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()

Answer №1

If you want to use the OrbitControls with the jsm version, make sure to include a module in your Javascript file. Instead of:

<script src="Main.js"></script>

try changing it to:

<script type="module" src="Main.js"></script>

Give that a shot and see if it resolves the issue.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Is it possible to render an SVG using PDFTron?

Before, I attempted to utilize an Annotation.StampAnnotation to make a personalized annotation while using an SVG as the foundation image. Unfortunately, I discovered that the StampAnnotation does not allow the user to alter or set the color. Thus, I have ...

Transforming this JavaScript code to be less intrusive by implementing an event listener for an unidentified ID

As I work on enhancing the functionality of this user interface, I've encountered a challenge with two tabs that require a proper event listener to ensure my JavaScript functions smoothly. This obstacle has been hindering my progress, but as I delve i ...

Consistently encountering the error message "(0 , _reactDom.h) is not a function" or "h is not defined"

I'm currently in the process of developing an app that makes use of electron, react, redux, and several other technologies. At the moment, I have included electron, react, electron-compile, and babel in the project. Redux is installed but has not been ...

Adjust the anchor tag content when a div is clicked

I have a list where each item is assigned a unique ID. I have written the HTML structure for a single item as follows: The structure looks like this: <div id='33496'> <div class='event_content'>..... <div>. ...

Ways to convert an object with values into an array containing those values

To process the JSON data and convert it into an array with the same values for insertion into my PostgreSQL database using pool.query(message, values), where values should be an array if multiple are present. Currently, my object structure is as follows: { ...

Simple JavaScript timer with loop and pause

Having trouble with a countdown script and encountering multiple issues. The script does not run smoothly Difficult to make it repeat (closure) Struggling with delaying the start and repeat (closure) Seeking assistance in fixing this code which should i ...

The popup is unable to remain in the center of the screen because the background page keeps scrolling back to the top

Whenever I click a button to open a popup window, the page unexpectedly scrolls to the top. It's frustrating because if I'm at the bottom of the page and press the 'submit' button, the popup doesn't display in the center as intende ...

How can I locate the quantity of items within an embedded document in MongoDB?

Examining my schema, it appears like this: name: value: p_vars: { name1: {}, name2: {}, } My goal is to determine the number of items in p_vars. Assuming the interpreter is JavaScript, I attempted the following: db.collection.findOne().p_vars.l ...

The initialized Javascript array solely consists of undefined elements, without any of the expected values

I was under the impression that I knew how to declare JavaScript arrays, but in this particular script, I seem to be stuck in an infinite loop of undefined elements within the array. In my code, I define three arrays containing numbers—two with multiple ...

Setting the title attribute for option elements in a select element that is bound to a model using AngularJs

I'm currently working on an HTML select element that is connected to an ng-model. Here's what the setup looks like: <select data-ng-model="accountType" data-ng-options="at.name for at in accountTypes"></select> This is how my accou ...

React and Material-Ui utilize class definitions in .js files, which are then passed as strings to components

I am attempting to define a class within my .js file in order to utilize the material-ui theme object and pass it as a string to a component since the component's prop only accepts strings. Unfortunately, the React-Dropzone import does not accept a cl ...

The fading effects are not functioning as expected in the following code

Hey there, I'm not the most tech-savvy person, but I managed to come up with this code for page redirection. Unfortunately, I couldn't quite get the fade out and fade in effects to work properly when executing it. If anyone out there can help me ...

Having trouble with linking an external JavaScript file inside the head tag?

I've connected my script.js file to my index.html file, and both files are located in the same directory. I initially linked the script.js file in the <head> section, but it wasn't working as expected. Upon checking the console, I encounter ...

Sending auth0 token as a parameter in $http.get request in Angular

I am encountering difficulties when trying to attach the auth0 token to a http.get request for an API that requires the token. The token is generated upon user login and stored in the browser's local storage, which is functioning properly. The challen ...

You cannot use the "this" keyword outside of a class body

I am facing an issue with my function, can someone help me? Here is the code: function remove_multi_leg(): void { if (Number($("#search_no_legs").val()) < 2) { return; } const removeId: number = Number($(this).attr("data-number")); const ...

Is there a way to display one of the divs in sequence each time the page is reloaded?

Is there a way to display the divs sequentially when the page is refreshed? For instance, on the initial load, only div 1 should appear, and with each refresh it should cycle through divs 2, 3, 4, and 5 before starting over. Below is an example I'm c ...

Executing Rake tasks on the live server fails because of an issue with ExecJS

I currently have a Rails 4 application running on a RHEL 6 server. The production environment utilizes Passenger and Apache2. Recently, I've been attempting to schedule Rake tasks in the production environment using the Whenever Gem and Cron. Howev ...

How can you use JavaScript to create hyperlinks for every occurrence of $WORD in a text without altering the original content?

I've hit a bit of a roadblock. I'm currently working with StockTwits data and their API requires linking 'cashtags' (similar to hashtags but using $ instead of #). The input data I have is This is my amazing message with a stock $sym ...

Switching from PHP to JavaScript before returning to PHP to establish and manage sessions

Currently, I am in the process of resolving an issue I am facing. The problem arises when utilizing the following code for someone trying to sign into the admin panel: <script> function myFunction() { //alert('you can type now, end ...

Retrieving a particular value from an array received through Ajax in JavaScript

Ajax functionality $("#panchayat").change(function(){ var param = {'panchayat_id':$(this).val()}; alert (param['panchayat_id']); $.ajax({ type : 'POST', url : '<?php echo base_url();?>index.php/parent_taluk' ...