Issues with OrbitControls in THREE.js are preventing proper functionality

After setting up my JavaScript code to utilize Three.js OrbitControls, I thought I had everything in place:

<script>"OrbitControls.js"></script>

As well as:

var cameraControls;
cameraControls = new THREE.OrbitControls(camera, renderer.domElement);

There were no complaints during this setup, however, an error message surfaced...

Uncaught TypeError: Cannot read property 'LEFT' of undefined (21:20:28:855 | error, javascript) at public_html/OrbitControls.js:76

This error points to the OrbitControls document, specifically this line:

this.mouseButtons = { ORBIT: THREE.MOUSE.LEFT, ZOOM: THREE.MOUSE.MIDDLE, PAN: THREE.MOUSE.RIGHT };

I'm stuck on how to resolve this issue. Any help or guidance would be greatly appreciated!!

javascriptanimationthree.jsrotationorbit.js

Answer №1

As mentioned by @ryanpcmcquen in his comment, you are overlooking the THREE.MOUSE object. To get this to work, make sure to also load the three.js library.

The THREE.MOUSE object is defined in the core of the three.js library.

THREE.MOUSE = { LEFT: 0, MIDDLE: 1, RIGHT: 2 };

UPDATE

Ensure that you have the build version of the library loaded where the THREE.MOUSE object is specified in the code. My recommendation is to download it from the website.

  • here: for the full version or
  • here: for the minified version.

Both of these files contain the THREE.MOUSE object.

Note: Also, consider the correct sequence in which you load your libraries. Be sure to include the three.js script before your OrbitControls.js script.

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

Replicate the drop file event

Can the drop event be simulated or faked using only JavaScript? How can this type of event be tested? Consider a drag-and-drop upload example like this one on this page. Is it possible to trigger the "drop" event with a file without actually dropping a fi ...

javascriptjqueryhtmltestingdrag-and-drop

issue with eval() function

I am attempting to convert a JSON string from my .php file using the eval() function, but it is not working. The browser console shows a SyntaxError: expected expression, got '<'... However, when I comment out the line where eval() is used an ...

javascriptphpjqueryjson

Locate the index and value of the item that has the most recent date

Exploring my API design const dataArr = [{ end_date: '2019-12-16' }, { end_date: '2018-12-16' }]; const latestEntry = dataArr.filter( /* Seeking the index of the item with the most recent date */ ); Interested in vanilla JavaScript ...

javascriptjqueryarraysreactjs

How to run a PHP script using JavaScript?

I am planning to execute a quick php script once users exit my website. Moreover, I am looking to transfer a variable from my javascript to php, but I am unsure how to integrate the php file and pass it a variable. Unfortunately, the php script is not runn ...

phpjavascriptmysqlvariablesonbeforeunload

Exploring the world of Next.js version 9.3 and beyond with the exciting addition

As a beginner with Next.js, I am seeking guidance on utilizing getStaticPaths and getStaticProps within catch-all routes. Many blog starters for Next.js 9.3+ focus on single-level blog posts (such as /posts/post-1.md, /posts/post-2.md, etc.), but I am stru ...

javascriptnext.jsblogsgetstaticpropsgetstaticpaths

Conditions are in an angular type provider with AOT

I am facing an issue with my Angular project that is compiled using AOT. I am trying to dynamically register a ClassProvider based on certain configurations. The simplified code snippet I am currently using is below: const isMock = Math.random() > 0.5; ...

javascriptangulartypescriptdecoratorangular2-aot

The render function is not being executed due to a disruption in the code flow

Within the given code snippet, there is a peculiar issue with the render function being called inside the loop below. Strangely, the console.log statement before the function call executes successfully, but the one directly inside the function does not s ...

javascriptgoogle-chrome-extension

The message from Vee-validate indicates that the validator 'required_if' does not exist within the system

I'm currently implementing vee-validate version 3 with Vue 2.7 in my project. Specifically, this is the entry in my package.json file for vee-validate: "vee-validate": "^3.4.5", My issue lies with getting the required_if rule to f ...

javascriptvue.jsvuejs2vee-validate

Tips for Sending Information to the Current Page Using JQuery

I am attempting to send the form data back to the same location as the form itself. The code needs to: Trigger the click action for #submit Retrieve data from #email, #selection1, and #selection2 Hide the form #form Show the data in #email, #selection1, ...

javascriptjqueryajaxformstwitter-bootstrap-3

Ways to eliminate the worldwide model in SAPUI5

I've been attempting to break down the global model without success. I have a filter button that's set up like this: navToSecond : function (oEvent){ var oObject = this.getView().byId("inp").getValue(); sap.ui.getCore().setModel( ...

javascriptjqueryodatasapui5

Combining Two Tables Using jQuery

I am currently attempting to combine two tables into one using jQuery in the following manner: var table = document.createElement("table"); table.id = "mergedTable"; $("#mergedTable > tbody:last") .append($("#csvInfoTable2 > tbody").html()) ...

javascriptjqueryhtmlcsv

What is the best way to retrieve child elements from JSON within an Angular JS controller?

I'm having trouble understanding how to ensure the resource call completes before assigning the data.properties to $scope in my controller. My confusion lies here: The resource call returns the following response: [ { "PreAlertInventory": "5.00 ...

javascriptangularjs

Exclude the key-value pair for any objects where the value is null

Is there a way to omit one key-value pair if the value is null in the TypeScript code snippet below, which creates a new record in the Firestore database? firestore.doc(`users/${user.uid}`).set({ email: user.email, name: user.displayName, phone: ...

javascripttypescript

Can you identify the distinctions between these two lines?

As a beginner in React, I recently learned how to create a timer counter following a tutorial. However, I am slightly confused about the difference between these two lines of code. Can someone please explain what is occurring in the first line below? lin ...

javascriptreactjs

When the user clicks, show a designated search result in a separate container

I've been developing my Angular cocktail application, and I've reached a point where I can display all the cocktails in my database (only showing names). Now, I want to implement a feature where if I click on a specific cocktail, its full content ...

javascriptjqueryhtmlangularjs

What is the best way to convert a 2D PHP array into a JavaScript array?

I have encountered a problem with a PHP array setup as follows: $output = array(array(1,1,1,1),array(2,2,2,2),array(3,3,3,3)); When I encoded the array to JSON, I received this output: $output = {"1":[1,1,1,1],"2":[2,2,2,2],"3":[3,3,3,3]} My goal is to ...

phpjsonjavascript

The correct way to extract a jwt token from headers and integrate it into an express application

After successfully implementing both the frontend and backend in express.js with authentication and authorization using JWT, I have confirmed that the JWT token is being properly set upon login. You can see the auth-token key in the image below: https://i ...

javascriptnode.jsexpressjwtauthorization

Creating a hierarchical JSON format for a nested commenting system

I have a JSON data representing a multi-level comment system as shown below: [{ "thread_id": 2710, "parent_id": "", "username": "string", "comment": "string", "postdate": "2017-06-09T07:12:32.000Z", "id": 1 }, { "thread_id": 2710, "parent_ ...

javascriptjson

Issues with the ES version affecting back4app cloud code functions

Utilizing back4app as my backend service for deploying my React Native and JS app, I am currently experimenting with the 'Cloud Code Functions' feature. Being new to back4app, I encountered an issue when following their guide. I received this er ...

javascriptreactjsreact-nativeback4app

Creating a cascading select box with two levels in PHP and MySQLExplanation on how to generate a two-tier connected

While I have successfully retrieved values from a MySQL database using a select box in PHP, I am struggling with implementing a two-level chained select box. Does anyone have any sample code or suggestions on how to achieve this? Thank you. ...

javascriptajaxselect