I'm interested in learning how to use the mouse to rotate a mesh created with THREE.JS around the Z-axis

I am currently working on implementing the functionality to rotate the mesh using the mouse.

The reference code can be found here.

My specific query is regarding how to utilize the mouse for rotation around the Z axis (red line).

After reviewing various examples in Three.js, I have noticed that they only demonstrate rotation around the x or y axis.

Any assistance on this matter would be greatly appreciated.


Here is a link to my code snippet: https://jsfiddle.net/pfk7j7a3/3/

<script type="text/javascript">
    CustomOrbit = function () {
        // Implementation details here
    };
</script>

<script type="text/javascript">
    // Additional code here
</script>

Answer №1

When attempting to pivot away from the 0,0,0 position (moving the camera around an object or placing an object at a specific position relative to the center), things can quickly become more complex due to the involvement of mathematics.

In my experience, utilizing orbit controls has proven to be the most effective solution. https://threejs.org/examples/misc_controls_orbit.html

This method allows for setting angle and pan limitations, making the process smoother.

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

Line numbers in Vue Codemirror

Currently, I'm working on integrating codemirror into my Vue.js application using a library found at https://github.com/surmon-china/vue-codemirror. The issue I'm facing is that even after importing and utilizing the codemirro component, everythi ...

The challenge of sending data to a local back-end server due to the "Access-Control-Allow-Origin" issue

I've encountered an issue with an XMLHttpRequest while working on a project. My front-end is responsible for loading a file and sending it to the back-end to create smart contracts. Everything works well when making a single request, but as soon as I ...

The router is unable to direct when an item is clicked

I am encountering an issue with my routing setup - when I click on an item in the list-item component, it does not successfully route to the detail-component. Here is a glimpse of my source code: product-list.component.html: <h1>Product List Compon ...

Exploring differences: map versus concatMap

I'm struggling to grasp the distinction between concat map and map. In a particular scenario, this difference became very confusing for me: const domainsObservable = this.auth.getAuthDomains() .shareReplay() .concatMap((authDomains) => aut ...

Getting state from two child components in React can be achieved by using props to pass the

In my tabbed modal dialog, I have two image list components rendering images based on props defined in the parent. Each component manages its own array of image objects. The challenge is that I need to update or delete these images using a single save butt ...

Error occurred in Flask due to request names being dynamically generated using JavaScript

My current project involves creating an app that calculates transit projections based on input years and other variables. I've written a JavaScript script where users can add new types of vehicles, each generating a unique div with specific ids and na ...

Working with XML files in Node.js

I'm currently running an Arch Linux system with KDE plasma and I have a 50mb XML file that I need to parse. This XML file contains custom tags. Here is an example of the XML: <JMdict> <entry> <ent_seq>1000000</ent_seq&g ...

Is jest the ideal tool for testing an Angular Library?

I am currently testing an Angular 9 library using Jest. I have added the necessary dependencies for Jest and Typescript in my local library's package.json as shown below: "devDependencies": { "@types/jest": "^25.1.3", "jest": "^25.1.0", ...

Adding the Bootstrap4 CDN seems to break the animations on my website

<div class="mySlides fade"> <img src="https://media.giphy.com/media/9JpsWBPgRtBDOYE6QB/source.gif" style="width:100%; height: 100%; border-radius: 0; "> </div> <div class="mySlides fade"> ...

What is the best way to assign the "active" class to a navigation list item using JavaScript within Bootstrap 4?

Update: just to clarify, I'm working on activating the navbar button based on the current page. I have a navigation bar set up and I am trying to dynamically add an "active" class to the li element when you are on that specific page. However, for som ...

The search bar is preventing the props from being updated

Whenever I navigate between columns on my website, the <ArticleList> is supposed to update. It works flawlessly when moving from the home page to a column, or from an article to a column. However, the issue arises when going from one column to anothe ...

I am struggling to get the pop-up to close using the current code. I suspect that the issue might be related to the variable I was previously using in WordPress. I have made changes but the pop-up

While delving deeper into the realm of Javascript, I encountered a stumbling block with a single popup intended for the main page of a WordPress website I am constructing. Despite my attempts to modify the code's variables, they seem unyielding. Surpr ...

The content within the textbox remains locked until the user interacts with the textbox by clicking on

Is there a way someone can assist me with this task? I am looking to make it so that the values in the textbox cannot be changed or removed until the textbox is clicked. Does anyone have any insights on how to achieve this? ...

Struggling to detect mistakes utilizing the createUserWithEmailAndPassword() function in Firebase

My attempts to debug the issue have been unsuccessful, resulting in my code not identifying errors like creating a user with an email that is already registered. While it does provide a response, it's not the one I anticipated such as firebase/email-i ...

Utilizing the Loess npm module in conjunction with Angular 4

I am attempting to incorporate the Loess package into my project. The package can be found on NPM and offers various regression models for data fitting. I successfully installed it using npm install loess --save, and it now resides in the node_modules dire ...

What is the best way to save a key and its corresponding value into an array storage?

Storing input data in an object with key-value pairs like so: const object1 = { un: inp.value, pw: inpw.value }; var myJSON = JSON.stringify(object1); var myObj = JSON.parse(myJSON); Now, I aim to store each object in an array. For example, the f ...

An easy guide to rerouting a 404 path back to the Home page using Vue Router in Vue.js 3

Hello amazing community! I'm facing a small challenge with Vue.js 3. I am having trouble setting up a redirect for any unknown route to "/" in the router. const routes = [ { path: "/", name: "Home", component: Home, }, { path: "* ...

Defining global 'require' scripts in Node.js

Seeking a solution to a slightly unusual problem. I hope that using simple examples will clarify my query, as explaining my complex usage can be challenging. I am incorporating my custom modules into the routes.coffee file for an Express server. My goal i ...

What could be causing the 'setAttribute' function to malfunction in JavaScript?

I am currently immersed in a django project and facing an issue with a simple inline JavaScript code. My goal is to disable one button and enable another when a specific condition is met. I attempted three different methods to achieve this, but none of the ...

What is the best way to include and control persistent URL parameters when making Ajax requests?

Imagine having two different resource lists on your website: one for users and the other for groups. As you navigate through each list in increments of 10, it's important to preserve the state of the list so that when you share the URL with someone el ...