Experience seamless axis rotation in THREE.js using mouse input and the powerful THREE.Quaternion

Attempting to create a fluid rotation for THREE.Object3D using mousemove without any jitter, gaps, interruptions, or other issues. I have tried various approaches including nested groups but haven't been successful yet. Perhaps using Quaternions will solve the problem, but I seem to be missing something...

Here is an isolated jsfiddle demonstrating my issue.

Answer №1

Could my solution for rotating the mesh around a target axis be similar to using mesh.lookAt(mouse3D)? It seems like the mesh should spin continuously around the target axis. However, I'm not entirely sure if using mesh.quaternion.multiplySelf is the right approach - as I encounter difficulties from this point onwards.

var vector = new THREE.Vector3(mouse2D.y, -mouse2D.x, 0);//.normalize();
var quaternion = new THREE.Quaternion().setFromEuler(vector);
var newQuaternion = new THREE.Quaternion();
THREE.Quaternion.slerp(mesh.quaternion, quaternion, newQuaternion, 0.07);
mesh.quaternion = newQuaternion;
// mesh.quaternion.multiplySelf(newQuaternion);
mesh.quaternion.normalize();

Check out the code on jsfiddle here: http://jsfiddle.net/DLta8/

Answer №2

Check out my latest article on how to achieve seamless mouse rotation in Three.js with Smooth Mouse Rotation technique!

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 transfer of variables from AJAX to PHP is not working

My attempt to pass input from JavaScript to PHP using AJAX is not successful. I have included my JS and PHP code below: <!DOCTYPE html> <html> <head> <style> div{border:solid;} div{background-color:blue;} </style> </head&g ...

Eliminate the need for jQuery when performing basic text rotation operations

Currently, I find myself loading an entire jQuery library for a task that could be achieved with much simpler code. The task involves cycling through a list of text spans to display different messages each time. Below is the existing code: (function($) ...

An Exploration into the Error Situations of NPM Request Library

I'm encountering an issue with the callback in my request function. I'm trying to figure out the specific circumstances under which an error is passed to this callback. const req = require('request'); req('http://www.google.com&ap ...

Is there a way to automatically insert page numbers into every internal link on an HTML page?

When in print mode, I want to display links like this: <a href="#targetPage">link</a> but I'd prefer them to appear as: <a href="#targetPage">link (page 11)</a> (assuming the target page is on page 11 in the print preview). ...

Debugger mouse over in Chrome version 79.0.3945.88 fails to display values for variables

Recently, there has been a change in Chrome updates where the values of variables are no longer displayed when hovering over them in debugger mode. Now, the only way to access these values is through the Scope and Watch tabs located on the right side bar. ...

dividing JavaScript files in the three.js game development platform

After spending two years teaching myself unity/c#, I believe I have the coding skills to transition from an engine to a framework for better control over the environment. As I started working on first person environment features, I wanted to organize my co ...

Instructions for removing all entries from a DynamoDB table

I am facing a challenge with deleting multiple items from a DynamoDB table. While the documentation suggests dropping and recreating the whole table, I want to avoid this approach as my table was created using AWS Amplify and I don't want to risk disr ...

Is it possible to create a single code that can be used for various buttons that perform the same function?

Whenever I click the right button, the left button appears and when I reach the last page, the right button disappears. However, this behavior is affecting both sections. Is there a way to write separate code for each section? I managed to make it work by ...

Struggling to modify a nested object in the state

import React, { Component } from 'react'; import ColorBox from './ColorBox' import './ColorBoxes.css' class ColorBoxes extends Component { state = { colors: {} } clickedColor = (color) => { le ...

What is the proper way to specify a file destination in React?

After reading this article on downloading objects from GCP Cloud storage bucket, I'm curious about setting the file destination dynamically in React. Is there a way to achieve this? The article can be found at: https://cloud.google.com/storage/docs/do ...

Create a listener for an event on a specific section of a Three.js 3D model

I have a 3D human body object and I want my code to display a popup when I click on specific body parts like eyes, nose, and arms. The object is a compiled .obj file and I'm struggling to add event listeners to the different body parts. Any help would ...

Fixing Bugs in Checkbox Functionality using useState in Reactjs when implementing Material UI

I am working on a numeric select functionality where selecting a number renders the component multiple times. Inside the component, there are checkboxes that should not all activate at once when one is selected. https://i.sstatic.net/Q5Csn.png You can vi ...

Tips for coordinating the execution of 2 async.waterfalls in Node.js

I have a series of read commands that need to be executed in sequence. If any of them fail, the processing stops. The array readCommands contains functions for reading... async.waterfall(readCommands, function(err) { if (err) { console.log(e ...

Selenium: The ultimate guide to inserting text within a div element located inside an iframe

Snippet of HTML code: <div class="listRte__editorFrame"> <iframe src="about:blank" style="height: 150px;"> #document <html> <head> <body> ...

Guide on establishing a connection with a TCP server and sending a JavaScript script to it

I am completely new to JS and node. I am using SkyX Pro, a telescope management software that has the capability to run a TCP Server on port 3040. By connecting with Netcat and providing it with Javascript starting with //* Javascript *//, I can control ca ...

Having trouble reaching an element within a successful Ajax call

I have encountered an issue where the element is not being recognized when putting an ajax call inside another ajax call. Here is an example of the code: $.ajax({ url: 'controleFatAcoes.php', type: 'post', dataType: 'h ...

Error message: Unable to access properties of null when calling 'registerPlugin' in @devexpress/dx-react-grid-material-ui

I have developed a CustomGrid component that is based on the DevExpress Grid component. So far, it has been working smoothly. Here's how the implementation looks like in App.tsx: import Paper from "@mui/material/Paper"; import { Table, TableHeaderRow ...

Problem with modals not triggering within the iDangero.us swiper

I am encountering an issue with the iDangerous.us Swiper where I cannot activate any events within the swiper-wrapper. I am attempting to trigger a modal on each slide but nothing is happening. Any Modal placed inside the swiper-wrapper does not work. I a ...

Pressing the 'Enter' key within a textarea in a JQuery

This question seems fairly straightforward. I have a text area where hitting "enter" submits the content. Even though I reset the text to "Say something..." after submission, the cursor continues to blink. Is there a way to require the user to click on ...

After refreshing the page, the Redux action fails to dispatch

Having some trouble with redux and possibly useEffect (not sure where the mistake lies). I'm attempting to fetch data from PokeAPI and store it in the redux state. The issue is that the data retrieved about pokemons does not include their types (fire, ...