Zooming into mouse position within Three.js 3D Environment

I’m facing an issue with my project that utilizes Three.js and orbitControls.js for handling the camera. The scene consists of a simple cube and the camera. By default, the camera zooms in/out towards the center of the screen when using the mouse wheel. However, I need to modify this behavior so that it zooms in/out towards the mouse position on the 3D object, similar to how it works in 3D editors like 3D Max or Blender.

The logic I’ve come up with involves capturing the initial mouse position from where the zooming starts, the desired zoom-in position, storing these values, and then calculating the offset between the two positions as the camera zooms in. However, despite implementing this logic, the functionality is not working as expected. I suspect the issue may lie in the coordinates of the camera and the target zoom-in position.

Below is a snippet of my code:

 // Code snippet here

If anyone has encountered this issue before and successfully solved it, could you please share your solution or offer advice on how to tackle this problem effectively?

Thank you!

javascript3dcamerathree.js

Answer №1

Once you've calculated the intersection point, you can set it as the target for orbitControl like so:

if (intersects.length > 0) {
    intersectPoint = intersects[0].point;
}

control.target = intersectPoint;

From now on, when you zoom in, the focus will be directed towards the chosen point.

Answer №2

Here's a useful code snippet to enhance your experience:

scrollEvent = function (e) {
var sensitivity = 15;
var mouseX = (e.clientX / jQuery(container).width()) * 2 - 1;
var mouseY = -(e.clientY / jQuery(container).height()) * 2 + 1;
var vector = new THREE.Vector3(mouseX, mouseY, 0.1);
vector.unproject(camera);
vector.sub(camera.position);

if (e.deltaY < 0) {
   camera.position.addVectors(camera.position, vector.setLength(sensitivity));
   controls.target.addVectors(controls.target, vector.setLength(sensitivity));
} else {
   camera.position.subVectors(camera.position, vector.setLength(sensitivity));
   controls.target.subVectors(controls.target, vector.setLength(sensitivity));
}
};

Answer №3

As per the details in this Pull Request, the upcoming feature is set to be incorporated into three.js in version r154 - expected for release on June 28, 2023 based on current information.

This enhancement will also address zoom functionality with an orthographic camera as discussed in a related question found here

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

Detecting a click outside of a div or its opening button and closing the element using Vanilla JS

When dealing with two buttons, one opens a form, and the other a dropdown. The goal is to have both elements close when clicking outside. The dropdown functionality already works as expected because it closes whenever the user clicks outside the opening b ...

javascripthtmlcss

The imported JS file shows a warning that the variable 'myProperty' is defined but not utilized anywhere

When I try to import a variable from the same folder, why am I getting an error message saying it is defined but not used? I am sure that I am using it. Your input would be greatly appreciated! error 'componentName' is defined but never used. ...

javascriptvue.jsecmascript-6es6-modules

An option selection component for Vue.js

I'm attempting to design a component like the following: <template> <option v-for="(text, value) in options" :value="value"> {{ text }} </option> </template> Unfortunately, I encountered an error me ...

javascriptvue.jsvue-component

Choosing groupings of courses

I am looking to dynamically load divs with different combinations of classes from an external file using jQuery's load function, but I am struggling with grouping them correctly. $("#somediv").load("somefile.html .class1"); // loads all divs with c ...

javascriptjqueryclass

Comparison between storing data locally and using AngularJS $cacheFactory

I'm facing a challenge with storing large amounts of client-side data and I'm unsure of the best approach to take. Currently, I am utilizing AngularJS's cacheFactory which is effective, but all the data gets reloaded with each new session. W ...

javascriptangularjslocal-storage

Stop the repetition of the HTML Script element running more than once

Currently, I am using Ionic 2 for the development of my app. Inside the index.html file, there are various scripts that execute when the application starts. My goal is to rerun app.bundle.js midway through a user's interaction with the app. Here is ...

javascripthtmlionic-frameworkionic2

Issue with Jquery Fancybox shadow rendering on older versions of Internet Explorer (IE7/IE8

Take a look at this demo page: Notice that the popup has a shadow around it in most browsers, but not in IE7/IE8. I'm seeking advice on how to make the shadow appear in those browsers as well. Any suggestions? ...

javascriptjqueryfancybox

Utilizing Restangular to assign multiple parameters to a variable within the scope variable

Currently learning AngularJS and utilizing Restangular to communicate with a Rails server API. Struggling with grasping the concept of assigning form parameters to a variable in order to use it within my function for posting to the Rails API. Below is an ...

javascriptruby-on-railsangularjsrestangular

Utilizing Knockout to Render JSON List Items

Utilizing Knockout.js to dynamically update a view from JSON response has been my current focus. The structure of the JSON is as follows: var data = { "Properties": { "Engine Capacity": "1499cc", "Doors": 3, "Extras": [ "LED lights", ...

javascripthtmlknockout.js

What is the process for sending a post request in the inline editor of Dialogflow?

Currently, I am utilizing the blaze tier, so there should be no billing concerns. I have also added "request" : "*" in my package.json dependencies. Check out my code index.js below: ` 'use strict'; var global_request = require('requ ...

javascriptnode.jsdialogflow-esfulfillment

Serializing a mixed-type array

I have an array in TypeScript that looks like this: const baseElements: IBaseElement[] An IBaseElement contains some information: export interface IBaseElement{ a: number; b: string; } There are two classes that implement the IBaseElement interface: ...

javascriptjsoninheritancetypescriptinstanceof

Looking to test form submissions in React using Jest and Enzyme? Keep running into the error "Cannot read property 'preventDefault' of undefined"?

Currently, I am developing a test to validate whether the error Notification component is displayed when the login form is submitted without any data. describe('User signin', () => { it('should fail if no credentials are provided&apos ...

javascriptreactjstestingjestjsenzyme

Access an array in PHP after transmission from AngularJS

I am working with an array that looks like this $scope.kk = [ { name:'Computer Architecture', price:65 }, { name:'Advanced Composite Materials', price:45 }, { name:'Stategies Unplugged', price:43 } ...

javascriptphparraysangularjs

Determine the quantity of information transmitted to the client through the stream

My current setup involves an Express API that enables download functionality through stream piping from a fetch call to res. I aim to monitor the data downloaded for each account to keep track of data usage. Here is how I have implemented it: let bytesSent ...

javascriptnode.jsexpress

What is the best way to incorporate a JSON file into a JavaScript class?

I attempted to load a JSON file within a JavaScript class, but encountered an issue where the loaded data was only accessible inside a specific function. class CreatePage { constructor() { var request = new XMLHttpRequest(); request. ...

javascriptjsonclass

Guide on choosing a specific div element from a different page using AJAX

I have a Social Media platform with posts, and I am trying to display the newest ones using JavaScript (JS) and AJAX. I attempted to reload my page using AJAX and insert it into a div element, but now the entire website is loading within that div element, ...

javascripthtmlajax

Transferring an array from PHP to JavaScript via an Ajax response

Welcome to my first post on stackoverflow. I usually find answers from existing posts, but this time I'm facing a problem that none of the suggested solutions have been able to fix. Currently, I have a JavaScript function that makes an AJAX request t ...

javascriptphpajax

Ways to reload the page following the submission of a form

I implemented a fade dialog to present a form, and successfully submitted the form using ajax to create a new record in the database. Now, I am facing an issue where I cannot refresh the page after the ajax call finishes. Despite attempting to use JavaScr ...

javascripthtmlajax

The issue I'm facing is that the ng-click functionality in Angular JS is not functioning properly when the

Upon loading the page, my JavaScript function creates a tree structure from JSON data and generates a list of anchor tags which look like this: <a ng-click="shareParent(4619)">Some data</a> Despite associating the ng-click directive with the ...

javascripthtmlangularjs

How do I access a specific child from an object/element retrieved by using the elementFromPoint() method in Javascript?

Is there a method to extract the child element from an element or object retrieved by the function elementFromPoint(x, y); Consider the following scenario: var elem = document.elementFromPoint(x, y); Let's assume that the element returned and saved ...

javascriptjqueryparent-child