Animating objects in three.js along the projection plane

I am looking to implement a feature where objects can be moved along a plane parallel to the projection plane using the mouse. The challenge is to keep the distance between any selected object and the camera's projection plane constant throughout the movement. While a similar query has been raised before, my requirement extends beyond just the z=0 plane and encompasses arbitrary camera angles and positions of both camera and objects. Additionally, it must support orthographic projection as well. I have set up a fiddle for this purpose

http://jsfiddle.net/nmrNR/

In the code snippet within the mousemove event handler:

var v = new THREE.Vector3(
    (event.clientX/window.innerWidth)*2-1,
    -(event.clientY/window.innerHeight)*2+1,
    1
);
projector.unprojectVector(v,camera);
var dist = circle.position.sub(camera.position,circle.position),
    pos = camera.position.clone();
pos = pos.add(pos,
    v.sub(v,camera.position).normalize().multiplyScalar(dist.length())
);

The circle now follows the mouse position while maintaining a constant distance from the camera, resulting in spherical movement. However, when switching to the ortographic camera mode (click), the expected behavior of tracking the mouse position is not observed.

Answer №1

After making some adjustments to the original code provided by the questioner, I was able to create a more efficient and updated version for my needs. I found that using clone initially helped avoid any jumpy behavior, but I also needed to implement an initial click position to calculate the distance properly.

camPos = cam.position;
var mv = new THREE.Vector3((event.clientX / window.innerWidth) * 2 - 1, -(event.clientY/window.innerHeight) * 2 + 1, 1).unproject(cam);
var pos = camPos.clone(); 
pos.add(mv.sub(camPos).normalize().multiplyScalar(initalClickPos.distanceTo(camPos)));

By setting the target object's position to "pos," it moves along the current camera plane based on mouse movement while maintaining its distance from the camera in perspective view.

Although the functionality is there, I believe there may be room for improvement with cleaner use of methods like addVectors and subVectors as suggested in another answer. Additionally, addressing the offset issue when clicking to prevent any sudden movements could involve temporarily adjusting the object's pivot point.

These modifications were made using r71 of the software.

Answer №2

If you're still pondering over an older question that may have already been resolved, here's a helpful answer for you.

It seems like you're not utilizing a control feature such as OrbitControls, which could actually simplify things, especially when trying to visualize the scenario. With OrbitControls, not only does it involve controlling the camera, but also a target object that guides the camera's direction (always keeping it in view and maintaining the y-axis orientation). The desired movement should be perpendicular to the vector from the camera to the target, rather than focusing on the vector to your object which changes as you move it, causing the circular motion. Luckily, OrbitControls offers the necessary mathematical functions to achieve this.

Referencing https://github.com/mrdoob/three.js/blob/master/examples/js/controls/OrbitControls.js#L147-L171, the provided functions calculate a vector that facilitates shifting both the camera and the target (which can work similarly for your object, although you might need to adjust the movements accordingly). It's worth noting that this.object represents the camera in this context.

// provide the distance in world space to move left
this.panLeft = function ( distance ) {

    var te = this.object.matrix.elements;

    // obtain X column of matrix
    panOffset.set( te[ 0 ], te[ 1 ], te[ 2 ] );
    panOffset.multiplyScalar( - distance );

    pan.add( panOffset );

};

// offer the distance in world space to move upwards
this.panUp = function ( distance ) {

    var te = this.object.matrix.elements;

    // acquire Y column of matrix
    panOffset.set( te[ 4 ], te[ 5 ], te[ 6 ] );
    panOffset.multiplyScalar( distance );

    pan.add( panOffset );

};

The code is based on r.68; if you're using an older version, some adjustments might be needed for compatibility.

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

A platform for creating ER and flow diagrams specifically tailored for web applications, utilizing open source software

Our team is currently working on creating a web application that enables users to create diagrams, such as flow or ER diagrams. We are looking for ways to convert these diagrams into XML or other formats for representation. Are there any open-source soft ...

The Gulp task abruptly terminates before the Stream has a chance to trigger the "end" event

const gulpJasmine = require('gulp-jasmine'); const gulpDebug = require('gulp-debug'); function runTest(platform, testType) { const timer = startTimer(); console.log('started!'); return gulp.src('./src/**/_test/**/ ...

Capturing page titles accurately for timeonsite tracker in a single-page Angular app is challenging when navigating to other pages

Implemented the timeonsite JS tracker in my Angular web application using HTML tags as shown below, <script type="text/javascript"> var Tos; (function(d, s, id, file) { var js, fjs = d.getElementsByTagName(s)[0]; if (d.getElementByI ...

Can orbit controls be tweened in three.js?

When utilizing the TWEEN function within three.js, I have noticed that it is mainly used for tweening objects. Although I can successfully tween the camera's position, I am looking to also tween the orbit control to mimic following a target while the ...

Updating Angular model remotely without relying solely on the controller

I am struggling to call the addRectangleMethod method from my Javascript code in order to retrieve server-side information into the Angular datamodel. However, I keep encountering an error stating that the method I'm trying to call is undefined. It&ap ...

Retrieving a targeted data point from a JSON object

I am working with a json data that contains various properties, but I am only interested in extracting the uniqueIDs. Is there a way to retrieve ONLY the uniqueID values and have them returned to me as a comma separated list, for example: 11111, 22222? (I ...

Creating an interactive bootstrap modal: a step-by-step guide

For instance, I have 3 different tags with unique target-data for each one. <a class="btn btn-outline-primary btn-sm" href="#" data-toggle="modal" data-target="#firstdata"> DATA 1 </a> <a class=&q ...

My function invocations seem to be malfunctioning

Originally, I wrote code without using functions to prototype and it worked perfectly fine: $(function() { $(".PortfolioFade img") .mouseover(function() { popup('PORTFOLIO'); var src = $(this).attr("src").rep ...

Exploring the concept of reflection in JavaScript and jQuery

Here is a javascript object I have: person.Name = "John"; person.Nick = "Smith"; person.Info = "hi there"; In addition, I have some HTML elements as shown below: <input id="Name" /> <input id="Nick" /> <input id="Info" /> My question ...

``motioning a component beneath another component that may be in a state

Having an issue with my CSS. I have some elements generated by JavaScript and when hovering over them, another element is displayed below the others for some reason. Here's the CSS related to this problem: .hiddenTextjob { display:none; ...

Using JavaScript to assign one object to another object

I am facing an issue where I am trying to assign the local variable UgcItems to uploadedItems, but when I attempt to return the value, it shows as undefined. If I place the console.log inside the .getJSON function, then I get the expected value. However, t ...

Experiencing issues with connecting to jQuery in an external JavaScript file

My jQuery formatting in the HTML file looks like this: <!doctype html> <html lang="en"> <head> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js" type="text/javascript"></script> </head> < ...

Verify the definition of the checkbox

I'm attempting to determine whether a checkbox is defined and unchecked. When the page loads, my checkbox is disabled and I receive an error indicating that it is undefined. I attempted to create a condition to prevent the error but was unsuccessful. ...

I needed to integrate CustomPicker into my functional component within a react native project

Could someone please clarify if I wish to convert the CustomExample Class component into a functional component **like this: ** const CustomExample = () =>{...} then how would I modify the following code to function in a similar manner: <Custo ...

The script functions perfectly in jsfiddle, yet encounters issues when used in an HTML

I stumbled upon a seemingly peculiar issue with my script in jsfiddle: https://jsfiddle.net/oxw4e5yh/ Interestingly, the same script does not seem to work when embedded in an HTML document: <!DOCTYPE html> <html lang="en"> <head> & ...

Guide to implementing the collapsible start and stop button feature in Angular

Having an issue in my Angular application with the dashboard page. I've created a button for start or stop (toggle functionality) but it's not working as expected. .component.ts toggleCollapse(jammer) { this.jammer.isCollapsed ? 'START& ...

Using Hapi & Async for your API - How can you clear an array or execute a function immediately after sending a "reply" or at every new "get" request?

In the midst of developing a small API that retrieves data, performs tasks on it asynchronously, stores some of this data in an array using push, and then presents it to a client through Hapi's reply(). My goal is to clear out the array (e.g., using ...

Tips for setting elevation breakpoints for Paper components in MUI

I'm currently utilizing the MUI5 framework for my Project and I must say it's been great so far. I recently created a login page where I incorporated the Paper Component. Within the Paper Component, I wanted to specify an Elevation level. This i ...

Creating an Array in AngularJS with ng-model and submitting it with jQuery: A comprehensive guide

I am struggling to submit an array of values using jQuery and AngularJS. Whenever I click the submit button, only the first array value is being retrieved. How can I get all array values using ng-model? Here is a link to all my code: https://jsfiddle.net/r ...

The duration from when the Ajax request is sent to when the response is received results in

Has anyone experienced strange results when measuring the time between sending and receiving an ajax request? Sometimes I get negative values. Can someone shed light on this peculiar behavior? var before = 0; var after = 0; $.ajax({ url: 'data.ph ...