Three.js Orbit Controls effortlessly track the mouse movements without requiring any clicks

Is there a way to modify the orbit controls in three.js to move the scene on mousemove rather than click + mousemove? I tried implementing the solution provided in this thread: How to recreate the Three.js OrbitControl movement on mouse move? However, I encountered an error "Maximum call stack size exceeded" and ended up with a blank canvas...

I also experimented with changing

scope.domElement.addEventListener( 'mousedown', onMouseDown, false );

to

scope.domElement.addEventListener( 'mousemove', onMouseDown, false );

In the OrbitControls.js file, but this caused freezing during movement and sporadic stops...

Has anyone found a solution to this issue? Thanks in advance!

javascriptthree.js

Answer №1

Check out this solution: https://jsfiddle.net/EthanHermsey/e3b501cw/51/

document.addEventListener('mousemove', function(e){
    let scale = -0.01;
    orbit.rotateY( e.movementX * scale );
    orbit.rotateX( e.movementY * scale ); 
    orbit.rotation.z = 0; //this is crucial to maintain camera level..
})
    
//the pivot for camera rotation
orbit = new THREE.Object3D();
orbit.rotation.order = "YXZ"; //ensure Z is the last axis to rotate to keep it level...
orbit.position.copy( mesh.position );
scene.add(orbit );

//adjust camera offset and add it to the pivot
let cameraDistance = 1;
camera.position.z = cameraDistance;
orbit.add( camera );

Using an Object3D as a pivot for camera rotation based on mouse movements.

UPDATE: I discovered a workaround. You can activate auto-rotate with mouse position, by making OrbitControl's handleMouseMoveRotate public. Copy the function and set it as this.handleMouseMoveRotate. Then in setup, add an event listener and pass the event to the controls.

document.body.addEventListener( 'mousemove', ( e )=>{
    controls.handleMouseMoveRotate( e ) 
});

Ensure to set controls.enableRotate = false;

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

The functionality of "subscribe()" is outdated if utilized with "of(false)"

My editor is flagging the usage of of as deprecated. How can I resolve this issue and get it working with of? public save(): Observable<ISaveResult> | Observable<boolean> { if (this.item) { return this.databaseService.save(this.user ...

javascriptangulartypescriptrxjs

Guide to reading JSON files with a personalized approach

Below is a JSON object structure that I am working with: { "db": { "name": "db", "connector": "memory" }, "MySql": { "host": "localhost", "port": 3306, "database": "users", "username": "root", "password": "", "name": "MySql", ...

javascriptjson

Utilizing Vue 3, Quasar 2.2.2, and Firebase for accessing GlobalProperties via the router

Hello there! I am currently working on implementing Firebase for the first time in my Quasar App (powered by Vue 3). I have set up the firebase.js boot file with the following content: import { boot } from 'quasar/wrappers' import { initializeApp ...

javascriptfirebasevue.jsvuejs3quasar

It seems that the Bootstrap 4 Modal Pop up window is having difficulty closing

I recently completed a project on creating a matching game. After all the cards are successfully matched and the game finishes, a congratulatory modal pops up. However, I encountered an issue where the modal would not close after clicking the "Play Again" ...

javascriptjquerycssbootstrap-4

Display a division in C# MVC 4 when a boolean value is true by using @Html.DropDownList

I have multiple divs stacked on top of each other, and I want another div to appear when a certain value is selected. I'm familiar with using JavaScript for this task, but how can I achieve it using Razor? Below is a snippet of my code: <div id=" ...

c#javascriptcssasp.net-mvcrazor

Transferring information from a component that includes slot content to the component within the slot content

This task may seem complex, but it's actually simpler than it sounds. I'm struggling with the correct terminology to enhance the title. I need to transfer data from a component that includes slot content to that slot content component. In partic ...

javascripthtmlvue.jsvuejs2

What is the best way to determine when an IndexedDB instance has finished closing?

In the world of IndexedDB, the close method operates asynchronously. This means that while close finishes quickly and returns immediately, the actual connection closure happens in a separate thread. So, how can one effectively wait until the close operatio ...

javascripthtmlindexeddb

Issue with Javascript function not triggering on Django dropdown selection change event

I have a question. I have a JS function that I downloaded from the internet and is being used in a Django project. In my template.html file, I have a <select class="select_filter" onchange="myFunc(this.value);"></select>. Ad ...

javascriptjquerydjango

Using JavaScript, insert unique texts into div elements with the same id

I am working with 5 divs that have the id of "correctAnswer". In my array, I have 5 elements. How can I insert these 5 elements into the 5 divs? Here is the approach I am taking. var answers =["David Bowie","AM","Australia","Boneface","Sound City"]; for ...

javascriptcsshtml

Is it possible to customize the Menu hover effect in Element Plus and Vue?

Hello everyone, I'm a beginner with Vue, HTML, CSS, and Element Plus. I am trying to customize a Side Bar Menu with my own hover effect, but it doesn't seem to be working. Whenever I change the background color of the el-menu element, the hover e ...

javascripthtmlcssvue.jshover

How can I create a responsive design for my div elements?

I am facing an issue with responsiveness in my div container. Inside the square-shaped frame, I have a h2 tag that does not adjust properly when viewed on different devices such as mobile and browsers. Despite setting up media queries to make it responsive ...

javascripthtmlcssreactjsmedia-queries

What is the method to display my input value within my application interface rather than triggering an alert popup?

Hi there, I am seeking assistance with my GUI code. I want the input value to be displayed as text on the screen, or even better, to look like a chatroom so that I can integrate a simple chatbot later on. My main goal is to have the texts show up in the bl ...

javascripthtmlcss

PHP encountering a bad escaped character while parsing JSON using JSON.parse

I'm encountering an issue with JSON parsing. In my PHP code, I have the following: json_encode(getTeams(),JSON_HEX_APOS); This returns a large amount of data. Sample data: To provide more clarity, let's assume I have this: my_encoded_data ...

javascriptphpjqueryjson

Exploring the world of technology with jQuery, harnessing the power of JSON objects

I'm seeking assistance with creating JSON using JQuery, sending it via Ajax to a .NET webservice, and then deserializing it in .NET in order to save the data to a database. If anyone could provide guidance on where I might be going wrong, that would ...

c#javascriptjsonweb-servicesjquery

When should separate controllers be created for a list of values in a Laravel REST API?

Imagine I have a straightforward API for user registration. This API collects basic information like Name, email, state, gender, and marital status for each user. I already have database tables pre-populated with ids for state, gender, and marital status o ...

javascriptlaravelapirestvue.js

What is the best way to apply a datepicker to all textboxes with a specific class using jQuery?

I have enclosed multiple fields within div elements in order to specify them with a datepicker for a better user experience. For example: <div class="need-date" > <label>Appointment Date</label> <input id="id_appointment_date" ty ...

javascriptjqueryhtmlcssdatepicker

Filtering JSON data by date range in React JS

I have a dataset with JSON data containing ISO dates, and my goal is to filter out entries based on the "date_created" field falling within a specific date range. The time component should be ignored in this comparison, and the original JSON data should re ...

javascriptjsonreactjs

The dynamic time picker in Vuetify is failing to populate time accurately. Time is not being populated as expected

My goal is to dynamically call the time picker by iterating through an array of objects. However, I'm encountering an issue where the time picker is selecting the time but not updating the value in the objects, unlike the date picker which works perfe ...

javascriptvue.jsvuejs2vuetify.js

Determine the file format using fs module in Node.js

I have a question about extracting file types or extensions from a folder. I have multiple files in a folder, and I want to retrieve the type/extension of the file that matches a randomly generated number stored in my num variable. Is there a way to achiev ...

javascriptnode.jsfs

Utilizing SetTimeOut in Three.js to create a dynamic lighting effect that animates the position of a light introduced to the scene five seconds

I have successfully managed to spawn a light in my scene after a delay using SetTimeOut, and it's working great. However, I now want to add animation properties to this light. How can I achieve this without causing crashing or errors? Whenever I try t ...

three.jssettimeout