Exploring the translateZ values in Three.js [tutorial]

I've been searching high and low for the answer to my problem, but I can't seem to find a solution anywhere. I'm attempting to determine the position values that would result from an object translating Z by -100, without actually performing the calculation. My goal is to create an animation where an object flies towards the camera and stops 100 units in front of it, using Tween.js:

new TWEEN.Tween( object.position )
    .to( {x: camera.position.x, y: camera.position.y, z: (camera.position.z)}, 2000 )
    .easing( TWEEN.Easing.Exponential.InOut )
    .start();
new TWEEN.Tween( object.rotation )
    .to( {x: camera.rotation.x, y: camera.rotation.y, z: (camera.rotation.z)}, 2000 )
    .easing( TWEEN.Easing.Exponential.InOut )
    .start()
    .onComplete(function(){
        object.updateMatrix();
        object.translateZ(-500);
    });

Currently, the animation moves towards the camera, but then returns to its original position. I need to find a different target position than 'camera.position', one that is instead "translateZ(-500)" from it. Any suggestions on how to achieve this?

javascriptthree.js

Answer №1

To determine the new position resulting from calling obj.translateZ(-100) on obj, you can utilize THREE.js vectors. Follow these steps:

let newPosition = new THREE.Vector3();            // Initialize a new 3D vector
obj.getWorldPosition(newPosition);                // Set newPosition to obj's global position
newPosition.add(new THREE.Vector3(0, 0, -100));   // Add (0,0,-100) to newPosition

Now, newPosition holds the desired point, and you can easily construct your vector object with 

{x: newPosition.x, y: newPosition.y, z: newPosition.z}
.

Does this align with what you were aiming for?

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

Tracking the frequency of text values that have been clicked on

Feeling uncertain about the best direction to take. In a table of unknown length, the first column consists of clickable links, while the second column contains corresponding text. The number of rows in this table is variable and depends on search resul ...

javascriptjquerymultidimensional-arraysession-storage

Unable to declare a string enum in TypeScript because string is not compatible

enum Animal { animal1 = 'animal1', animal2 = 'animal2', animal3 = 'animal3', animal4 = 'animal4', animal5 = 'animal5' } const species: Animal = 'animal' + num Why does typescr ...

javascripttypescript

Automatically select all options in MUI Autocomplete by default

Is there a way to have all the values in the autocomplete drop down automatically selected by default when the page loads? I've been experimenting with this example but haven't found a solution yet. If you know how to achieve this, please share! ...

javascriptreactjsmaterial-ui

Generate a Vue component that automatically wraps text dynamically

Challenge I am looking for a way to dynamically wrap selected plain text in a Vue component using the mouseUp event. For instance: <div> Hello World! </div> => <div> <Greeting/> World! </div> Potential Solution Approach ...

javascripthtmlvue.jsfrontend

What's the best way to loop through each touch event property within the TouchList of a touch event using JavaScript?

I'm struggling to grasp touch events, as nothing seems to be working for me. For testing purposes, I've created a very basic page: HTML: <div id="TOUCHME"> TOUCH ME </div> <div id="OUTPUT"></div> Jav ...

javascripthtmltouch-event

Is there a way for me to choose multiple checkboxes simultaneously?

I have a dynamically created HTML table with checkboxes added for each row. $.each(data, function(id, value) { rows.push('<tr><td><input type="checkbox" autocomplete="off" class="chkbox" name="chkbox" value="'+value.site+' ...

javascriptjqueryhtml

When calling an API endpoint, nodeJS is unable to access the local path

I've encountered a strange issue with my code. When I run it as a standalone file, everything works perfectly fine. However, when I try to utilize it in my API endpoint and make a request using Postman, it doesn't seem to function properly. What ...

javascriptnode.jsexpresspath

The Owl-Carousel's MouseWheel functionality elegantly navigates in a singular, seamless direction

Issue at Hand: Greetings, I am facing a challenge in constructing a carousel using Owl-Carousel 2.3.4. My goal is to enable the ability to scroll through my images using the mousewheel option. Code Implementation: Incorporating HTML code : <div style ...

javascripthtmlcssowl-carousel

Issue encountered while using Typescript with mocha: Unable to utilize import statement outside a module

Exploring the world of unit testing with mocha and trying to create a basic test. Project Structure node_modules package.json package-lock.json testA.ts testA.spec.ts tsconfig.json tsconfig.json { "compilerOptions": { "target&qu ...

javascriptnode.jstypescriptunit-testingmocha.js

Discover distinct and recurring elements

Having two sets of JSON data: vm.userListData = [{ "listId": 1, "permission": "READ" }, { "listId": 2, "permission": "WRITE" }, { "listId": 2, "permission": "READ" }, { "listId": 3, ...

javascriptangularjsjsonfor-loopfilter

Using Javascript or jQuery to Enhance the Appearance of Text on a Website

Is there a way to automatically apply styling to specific phrases on our website by searching for instances of those phrases? For example: <div> This is what you get from <span class="comp">Company Name</span>. We do all kin ...

javascriptjquerycss

Tips for adjusting the maximum height of the column panel within the DataGrid element

I'm trying to adjust the max-height of a column panel that opens when clicking the "Columns" button in the Toolbar component used in the DataGrid. I am working with an older version of @material-ui/data-grid: "^4.0.0-alpha.8". https://i.stack.imgur.c ...

javascriptcssreactjsmaterial-ui

Determine total number of covid-19 cases with JavaScript

I am looking to incorporate a real-time COVID-19 total cases tracker for Russia on my website. In order to achieve this, I am sending a request to using the following script: function httpGet(theUrl) { var xmlHttp = new XMLHttpRequest(); xmlHttp.o ...

javascriptarraysrequest

Utilizing ES6 JavaScript for Creating Static Methods and Angular 2 Services

During the development of an Angular 2 app involving multiple calculation services, I encountered some interesting questions: Is it beneficial to use static in an Angular service provided on the application level? Or is it unnecessary? How does a static ...

javascriptangulartypescriptangular2-services

"An error has occurred stating that the header is not defined in

It is a coding issue related to payment methods. The headers type is undefined in this scenario, and as a newcomer to typescript, pinpointing the exact error has been challenging. An error message is indicating an issue with the headers in the if conditio ...

javascriptreactjstypescriptapipayment

Is it necessary to match GET and POST routes only if a static file does not match?

I am encountering an issue with my routes and static definitions in Express. Here is my route setup: app.get('/:a/:b/:c', routes.get); Along with this static definition: app.use('/test', express.static(__dirname + '/test')); ...

javascriptnode.jsexpress

Lightbox2 is looking to reposition the caption to the right of the image

Can anyone help me understand how to move the caption, found in data-title, from underneath an image to the right of the image? I'm not very familiar with HTML/CSS, but it looks like the image is enclosed within a div called .lb-outerContainer, and t ...

javascripthtmlcsslightboxlightbox2

Can you show me the steps for linking the next method of an EventEmitter?

After emitting an event, I am looking to run some additional code. Is there a method to chain the .next() function in this way? @Output() myEvent = new EventEmitter<string>(); this.myEvent.next({‘test string’}).onComplete(console.log('done& ...

javascriptangulartypescript

Did I incorrectly associate the function with the button causing it to always be executed?

I am working on a PHP page, where I have some initial content followed by session initialization code: <?php session_start(); ?> The requirement is to display a disconnect button only if the user is logged in, indicated by the presence of $_SESS ...

javascriptphphtml

Show values in an angular template using an array

I want to showcase values of an array using *ngFor const blockData = [ {text: sampleText1, array: [val1]}, {text: sampleText2, array: [val2, dat2]}, {text: sampleText3, array: [val3, dat3]} ] <div *ngFor="let data of blockData"> ...

javascripthtmlangular