The impact of THREE.OrbitControls on the rotation of objects in the scene

Recently started diving into THREE.js and I've put together a simple scene with the basics: http://codepen.io/inspiral/full/Lewgj

Overall, everything is running smoothly aside from an odd glitch that's been happening due to the new mouse event handling I implemented.

I followed this tutorial for mouse events:

Incorporating the OrbitControls.js reference and the code snippet below into my project seemed to do the trick:

controls = new THREE.OrbitControls( camera );
controls.damping = 0.2;
controls.addEventListener( 'change', render );

However, the cube and particle cloud start moving faster as I rotate with the mouse. It seems like I missed something along the way, but I'm not sure what. Any suggestions?

Thank you!

javascriptthree.js

Answer №1

Since you are using an animation loop, there is no need to invoke

controls.addEventListener( 'change', render );

OrbitControls does not come with a dampinig property.

The reason for the performance improvement is that you have named your "animation loop" render(), and by using

controls.addEventListener( 'change', render );

the animation loop is triggered whenever the mouse is moved.

Version of three.js: r.69

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

Angular foreach method encounters a syntax issue

When I use the getTotal.getValues() function to make a server call that returns values like "one", "two", "three" up to "nine", I am able to print them using console.log(res). However, I am facing an issue where I cannot push these returned values into t ...

javascriptarraysangularjsfor-loopforeach

Update all project files in Firebase authentication

A client-side project is being developed using firebase and vue. After a successful login by the user, the authService object gets updated in the Login component, but not in the router. The authService is utilized in both the Login component and AdminNavba ...

javascriptvue.jsfirebase-authenticationvue-router

The markers from KML exported from My Maps are not showing up on the Google Maps JavaScript API

I have a map on Google My Maps that I want to showcase through the Google Maps JavaScript API. This way, I can easily merge multiple maps into one and add paths/markers without needing to code it all manually. Test out the map I'm using by clicking t ...

javascriptgoogle-mapsgoogle-maps-api-3mapskml

A guide on displaying an array object in a table column using Vue.js and Element UI

Having issues with rendering array data in Vue Js Element UI using the el-table-column element. The string data displays correctly, but I'm facing problems with the array data. I've attempted to include static data within the data() return method ...

javascriptarraysvue.jsvue-componentelement-ui

Webpack 5 is unable to load animated gif files

Hello, I am currently diving into webpack and following the official documentation at https://webpack.js.org/guides/asset-management/#setup. My goal is to incorporate an animated gif using webpack 5. Although the placeholder for the gif is loading, I enco ...

javascripthtmldomgifwebpack-5

Deactivate the submit button when the form is not valid in angularjs

I am currently facing a challenge with my form that contains multiple input fields. To simplify, let's consider an example with just two inputs below. My goal is to have the submit button disabled until all required inputs are filled out. Here is wha ...

javascriptangularjsforms

How to keep your vue-router up-to-date

As a newcomer to vuejs, I am using vue cli 3 for my project which consists of various components. One of the components is a menu component where I retrieve all the menu items from an API (code provided below). I have integrated vue-router for routing purp ...

javascriptvue.jsvue-componentvue-router

The EJS template on the Express app is encountering an issue: it is unable to find the view "/id" within the views directory located at "/home/USER/Desktop/scholarship-app/views"

When attempting to render the request URL for an ID in my Express app, I encountered the following error: Error: Failed to find view "/id" in views directory "/home/USER/Desktop/scholarship-app/views" Here is a portion of my Express app code: app.get(&a ...

javascriptnode.jsexpressejs

.forEach returns an undefined value for each length

Having trouble with my if statement. It seems like the else block is working fine, but the if section is not functioning as expected. The variable count1 comes out as undefined. Interestingly, the conditions inside the if statement are working correctly ...

javascriptjqueryeach

Step-by-step guide on repairing a countdown clock using JavaScript, HTML, and

I'm having issues with my JS on my website. I am new to this and currently in the process of setting up a website. I want to add a timer to show when the site will be active. It seems like there is an error somewhere in the JS code that I can't ...

javascriptjqueryhtmlcss

Receiving information from a promise within an if statement in Vue

Recently, I encountered an issue with my login function. I needed to store some data in my session for future use but faced a problem where the data was being pushed into the session before I could retrieve the result from a promise. Here's the snipp ...

javascriptvue.jspromisevue-component

Ways to customize the datetime-local format in an HTML input field

When dealing with the HTML input of datetime type, consider the following: Datefield: <input type="datetime-local" data-date="" data-date-format="DD MMMM YYYY, h:mm:ss"> The script below includes important code. $("input").val(moment().format(&apo ...

javascriptjqueryhtmlcssdatetime

The external function in HTML Form's onsubmit attribute is failing to execute

My HTML Form has an onsubmit event that should call a validate() function. Everything works fine when the validate() function is inside a script tag at the end of the body tag. But if the validate() function is in an external JavaScript file, like in thi ...

javascriptjqueryhtmlforms

Retrieve an array of specific column values from an array of objects using Typescript

How can I extract an array from an array of objects? Data var result1 = [ {id:1, name:'Sandra', type:'user', username:'sandra'}, {id:2, name:'John', type:'admin', username:'johnny2'}, ...

javascriptarraysangulartypescript

Creating MySQL query results in Node.js manufacturing process

I am looking to format the MySQL result in Node.js in a specific way. The desired result format should look like this: [ { "m_idx" :1 , "contents" : { "m_name" : "a", ...

javascriptnode.js

Encounter the "Error: Source 'cloudsTileLayer-RasterSource' not found" message while trying to integrate a weather tile layer into Azure Maps

I have been working on a React application that utilizes the React-Azure-Maps npm package. My current challenge involves creating a weather layer, which I believe shares similarities with the sample code provided for layers. The code snippet responsible f ...

javascriptreactjstypescriptazureazure-maps

Loading Bootstrap Modal with click event triggering

I am currently working on a project where I need to load ajax content into a bootstrap modal when a link is clicked. I have been able to successfully load the content without any issues, but I am facing some difficulties triggering the modal window to open ...

javascriptjqueryhtmlwordpresstwitter-bootstrap

Creating a predictive text feature using AngularJS and jQuery

Currently, I'm developing a web application that utilizes: JQuery AngularJS Kendo framework Specifically, I am tasked with implementing an auto-complete feature using Kendo on an input text field. Initially, my approach was to target the inp ...

javascriptjqueryangularjskendo-ui

The printing function for the window system can cause disruptions to the layout of the table

After creating a page with a simple table that can be filled in and printed, I noticed some issues with the table formatting after printing. The intended table design was supposed to look like this: https://i.stack.imgur.com/aAk89.png However, upon print ...

javascripthtmljquerycss

How does a database contribute to the functionality of a redux application?

Recently, I started exploring redux and finally understood the architecture behind it. In a single page redux application where all data is stored in a central store and updated through frontend actions, what purpose does the back-end and database serve? ...

javascriptreactjsreduxreact-redux