Enhance mouse pointer zoom functionality in three.js

With the use of thingiview.js, Three.js, and trackballControls, I have managed to create a system that allows me to upload an STL file and then display it on the canvas. While trackballControls are quite effective with some tweaks, I am encountering a particular issue:

I am aiming to zoom in at the location of the mouse cursor rather than the center of the grid/plane.

Although I have implemented a simple captureEvent to obtain the mouse's on-screen coordinates and track them, I am struggling to identify where to intervene in the control system to achieve this.

I explored the _zoomStart/_zoomEnd functionalities (which seem confusing as they refer to "y" when I anticipated "z"). However, any attempts to add a _zoomStart.x essentially get disregarded.

While I may not be an expert, I usually feel comfortable experimenting around.

In addition, I would like to ensure that during panning, the zoom and rotation still revolve around the object's center rather than the center of the grid/plane.

Despite scouring through various posts and examples for days, I have yet to discover concrete solutions.

I believe that my searches might be misdirected or I could be heading in the wrong direction. Any helpful guidance or even a forceful push in the right direction would be sincerely appreciated.

EDIT

this.zoomCamera = function () {

        var factor = 1.0 + (_zoomEnd.y - _zoomStart.y) * _this.zoomSpeed;

        if (factor !== 1.0 && factor > 0.0) {

            _eye.multiplyScalar(factor);

            if (_this.staticMoving) {

                _zoomStart.copy(_zoomEnd);

            } else {

                _zoomStart.y += (_zoomEnd.y - _zoomStart.y) * this.dynamicDampingFactor;

            }

        }

    };

I assume the above snippet is where I should explore for altering zoom behavior. My confusion lies in the usage of _zoomStart.y. But assuming that's how it is, how can I implement changes for x?

Considering that _zoomStart and _zoomEnd are Vector2s, where does the given code define x?

confuzzled

javascriptthree.js

Answer №1

When using Trackballcontrols, zooming does not actually adjust the camera's field of view. Instead, two objects are being moved within the controls - one representing the camera (this.object) and the other representing the point it is focusing on (this.target). It seems that Trackballcontrols do not directly interact with the target, so movement and zooming will be centered around it.

If you want to change the target upon clicking something, you could try altering it like this:

mycontrols.target = new THREE.Vector3(newx, newy, newz);

You may need to update or reset some internal variables within Trackballcontrols for this to work seamlessly.

To convert 2D mouse coordinates to 3D x/y/z coordinates, I recommend looking into concepts like ray casting or object picking for plenty of examples and guidance.

Answer №2

One interesting aspect is that the variables _zoomStart and _zoomEnd were specifically created for touch zooming functionality. However, when it comes to zooming using the mouse wheel, only one variable is needed to indicate "how much to zoom". Instead of creating a new variable for this purpose, the programmer cleverly utilized the _zoom###.y component.

It's worth noting that _zoomStart and _zoomEnd do not provide details on how the zooming process will unfold; they simply contain the "instruction" for it. The software then translates this into the "zoompan" vector, which specifies the necessary camera movement in 3D space.

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

Trouble arises with the date-picker component in Angular

There's a specific concept known as "campaign duration" where you can select a date between the first and last day of the month. If you choose a date outside this range, such as a date from the following month, the Backend API will respond with an "In ...

javascriptangulartypescript

Creating a diagram to visually represent how different components of a system interact with each

I have data from transactions stored in an Oracle database, and I am looking for the best method to display this information as flowcharts on a webpage. Here is a sample of the data in tables: txn1|sourcesys txn1|system1 txn1|system2 txn1|system3 ...

javascriptangularjsflot

Getting an Array of all values in <th> using jQuery

Is there a more efficient way in jQuery to retrieve an array of all the inner texts of <th> elements within a table? The following code snippet successfully achieves this: $("th").toArray().map(th => th.innerText) I'm curious if there is a ...

javascripthtmljquerynode.js

Verify whether a specific point in time falls within the same week as any date string within an array of date strings

I am working on my backbone-app copyCLDRView and I am trying to replicate weeks along with their components and data. In simpler terms, I want to "copy one week and all its models into another week." My goal is to check if the target week has at least one ...

javascriptjqueryarraysbackbone.jsmomentjs

Tips for populating a dropdown list with data from the backend and selecting the desired value using Angular

I am currently working on an Angular 8 application that utilizes Material design. My goal is to populate a dropdown list with data retrieved from the backend. The API call code snippet is as follows: returnQrCodes$ : Observable<QRCodeDefinitionSelect ...

javascriptangularangular-materialobservable

Is there a way for me to automatically generate and send a random collection each time a GET request is made on my Node.js

I have been developing a typing application that utilizes an API to fetch random quotes from . I successfully created an API using MongoDB, Node.js, and Express which functions well. However, I encountered an issue when trying to send a random collection ...

javascriptnode.jsmongodbexpressmongoose

Create a boundary on a three-dimensional design that follows the shape of its exterior

I am in the process of developing a tool using Three.js to annotate three-dimensional models. My goal is to enable users to draw lines on a model that accurately follow its surface contours. For instance, when drawing a line on a face model, the line shoul ...

javascriptthree.js

I am encountering an issue with identifying a directory in Node.js

This is my HTML code <div id="done_work_1" class="logo-slide-track"> </div> <script>$.ajax({ url: "/static/home/done/", success: function (data) { $(data).find("a").attr("href&q ...

javascriptjquerynode.jsexpress

Prevent the countdown timer from resetting every time I refresh the page

Whenever I refresh my page, the timer starts over. I want it to pick up from where it left off until it reaches 0. This is my JavaScript code for handling the timer: var target_date = new Date().getTime() + (1000*3600*48); // set the countdown date var ...

javascript

Tips for implementing a JQuery Callback following the submission of a form?

I have a basic form with the remote=true attribute. The form is located within an HTML Dialog, which closes immediately after the Submit button is clicked. After a successful submission of the form, I need to apply some changes to the main HTML page. How ...

javascriptjqueryhtmlasp.netwebforms

What is preventing me from navigating to other pages in my React application?

Recently, I have been experimenting with ReactJS and encountered an issue where I couldn't access my other pages. The code snippet provided below seems to be the root of the problem. I am in the process of developing a multi-page application using Re ...

javascriptreactjs

Can a collapse that was saved in a separate file be displayed on the requested page?

Imagine having a navigation bar on your website's index page with four buttons, each leading to a different page. What if you wanted to bring all those separate pages together into one by using collapsible elements? That's the challenge this user ...

javascripthtmlbootstrap-5

Should await be used before dispatching hooks in redux?

I am facing a scenario where I need to execute 2 dispatch events consecutively, with no dependency between them. Could I implement it like the following code snippet? await dispatch(firstEvent) dispatch(secondEvent) My goal is to ensure that secondEvent ...

javascriptreactjstypescriptreact-nativeredux

Is there a way to escape from an iFrame but only for specific domains?

if (top.location != self.location) { top.location = self.location.href; } If my website is being displayed in an iFrame, this code will break out of it. But I want this to happen only for specific domains. How can I perform that check? ...

javascripthtmliframe

Tips for parsing a JSON file within my node.js application?

I am working on a node.js service that involves validating JSON data against a schema defined in jsonSchema. Below is the code snippet for my service: app.post('/*', function (req, res) { var isvalid = require('isvalid'); ...

javascriptjsonnode.js

Prevent the use of exponential notation with double numbers in GWT

Is there a way to remove the exponent from a double on the client side in GWT? public double evaluate(final double leftOperand, final double rightOperand) { Double rtnValue = new Double(leftOperand * rightOperand); //Need code to remove expone ...

javajavascriptgwt

When trying to import SVGs using gatsby-plugin-react-svg, an error message stating "InvalidCharacterError: String contains an invalid character" is received

After realizing that my website's Largest Contentful Paint (LCP) might be affected by font-awesome svg icons, I decided to replace them. I extracted the svg code from my html and saved them as svg files. They appeared as images in my image editing sof ...

javascriptreactjssvggatsby

Chokidar operates smoothly from the command line, but fails to function properly when invoked through the use of 'npm run'

I've implemented a script that monitors Tailwind CSS files using Chokidar. The script works perfectly when I execute the command in the CLI using chokidar 'tailwind.config.js' --initial=true -c 'npm run build-tailwind'. It successf ...

javascriptnode.jsnpmchokidar

Detect repetitive values in an array and include them if they are not already present with the help of jQuery

On my form, users can input details and click on the "add attendee" button to include information for up to 9 people. I am capturing user names, selected checkbox item IDs, and quantities in an array and passing these values in a URL to add selected items ...

javascriptjquery

Utilize moment.js to format a datetime and display the corresponding timezone

I'm having trouble displaying timezones correctly using moment.js. I attempted to use the following code: var result = moment(someDate).format("MM/DD/YYYY HH:mm A Z"); This returns something like: 08/05/2015 06:18 PM +02:00, which is okay, but I w ...

javascripttimezonemomentjs