`Why is THREE.Vector3.sub() in three.js behaving strangely?`

What could be causing THREE.Vector3.sub to return (0,0,0) in this specific case?

p0 = new THREE.Vector3( 0, 100, 50 );
p1 = new THREE.Vector3( 0, 50, 100 );
dummy = new THREE.Vector3(0,0,0);
p1_relative_to_p0 = dummy.sub(p1, p0);
console.log(p1_relative_to_p0);

this is the sub function implementation within THREE.Vector3's prototype:

sub: function ( a, b ) {
    this.x = a.x - b.x;
    this.y = a.y - b.y;
    this.z = a.z - b.z;
    return this;
},

output displayed on console:

THREE.Vector3 x: 0 y: 0 z: 0

Why isn't the output (0, 50, -50) instead? What could be the reason behind this unexpected result?

You can view the code in action by visiting the following link:

Answer №1

You've encountered the dilemma of the console.log feature. In Chrome, an object that is logged gets evaluated only when you expand it, not at the moment of logging.

With the presence of return this, it remains factual that p1_relative_to_p0 === dummy. Any modifications made to dummy will also impact

p1_relative_to_p0</code since objects are shared in JavaScript. As you expand the object, you're essentially accessing the current contents of <code>dummy
, which could have been changed to 0, 0, 0 by then.

To ensure you see the correct values, consider setting a breakpoint instead of using console logs to pause execution and observe the variables.

Answer №2

I tried to replicate the functionality here, but it functioned just as planned. Is it possible that you were mistakenly retrieving values from a different location?

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

Using JavaScript/jQuery to Set a Timer for Animation with Google Maps Markers

After clicking a marker on a Google map, I've managed to make it bounce with the following code. However, I'm looking for a way to stop the animation after 2 seconds. Is there some kind of timer function that I can incorporate? Here's the ...

Ways to obtain the angle of a camera's movement vector

Help needed with passing the angle of movement from an animation of a camera to a 2D sprite shader. Trying to project two vectors to the camera and compute the angle, but encountering issues. let prevCameraVector = null; function tick() { if(prevCamer ...

activate the button once valid input has been provided

How can I enable a button based on the amount entered? Let's say there is a minimum of 100 and a maximum of 200. If the user enters an amount below 100, display an error message and keep the button disabled. If the user enters an amount above 200, ...

"Trouble with jQuery not being triggered when there is a string in

New to the world of MVC and diving into jQuery for the first time, I am faced with a challenge. My goal is to populate text boxes in a partial view using jQuery that is placed within the parent view. Here are the relevant sections of the parent view: @ ...

Retrieve the content within a div using Jquery

Is it possible to extract the content from a <div> upon clicking a link? For example: Imagine there are two separate div elements on a webpage <div id="1" > This Is First Div </div> <div id="2" > This Is Second Div </div> & ...

Sending both the minimum and maximum slider values to PHP using POST can be achieved by formatting the data correctly

I am attempting to transmit the minimum and maximum values to PHP using submit through a dual slider bar The static page makes a request to the server-side PHP code <?php include('server/server.php') ?> Below is the JavaScript code ...

Error: Authorization token is required

For email confirmation, I am utilizing JWT. An email is sent to the user with a URL containing the token. Here's an example of the URL received by the user: http://localhost:3000/firstlogin?acces_token=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJlbWFpbCI ...

What causes req.sessions to show an empty object instead of the expected value?

I've been grappling with a small issue while learning express.js. I am struggling to save sessions in the browser so that users don't have to log in every time they visit. I am using cookie-session for this purpose. When I send the login data fro ...

Ways to display a tooltip on a listbox that can be moved

My ASPX page contains the following control: <asp:ListBox ID = "X" runat="Server" CssClass = "listbox"></asp:ListBox> I need to display a tooltip on each list item, as they are movable and their positions can be c ...

Is there a way to turn off alerts from Aspx files for HTML and CSS?

Dealing with annoying warnings in my aspx files has been a constant struggle. The "CSS Value is not defined" message pops up when I reference CSS files from different projects, causing unnecessary frustration. Even more frustrating are the warnings about i ...

What is the method for renaming Props in Vue components?

I recently embarked on my VueJS journey and attempted to implement v-model in a component, following an example I found. <template> <div class="date-picker"> Month: <input type="number" ref="monthPicker" :value="value.month" @in ...

Tips for displaying specific HTML elements in AngularJS using ng-repeat and ng-if

I am working with some bootstrap HTML code that includes an ng-repeat function. <div class="row"> <div class="col-lg-4" ng-repeat="p in persons"> <img class="img-circle" src="images/{{ p.image }}" width="140" height="140"> < ...

Display a modal when a user is not authorized in vue-router

After stumbling upon this post on Medium, I decided to implement its concepts into my project. My goal was to verify a user's authorization to access a particular route, and if unauthorized, display a modal pop-up. In order to achieve this, I made s ...

The Safari browser is unable to display the title of the document on the window

Within my AngularJS application, I've implemented the following: .factory("titleService", function($window) { return { setPageTitle: function(title) { $window.document.title = title; } }; }); titleService.setPageTitle("My Title") ...

Ensure that the Promise is resolved upon the event firing, without the need for multiple event

I'm currently working on a solution where I need to handle promise resolution when an EventEmitter event occurs. In the function containing this logic, an argument is passed and added to a stack. Later, items are processed from the stack with differe ...

Verifying the type and quantity of an item

Looking at a piece of code where a specific condition is being checked, I'm curious to know why someone might want to skip this particular condition. var number = /^\d+/; var type = Object.prototype.toString.call(obj); for(var key i ...

AngularJS: Error - Undefined value instead of a function argument

Recently, I decided to dive into learning AngularJs and took my first steps by setting up a view, service file, and controller file separately. Below is an outline of how I went about it: <html ng-app="myApp"> <head> <script src="https://aj ...

Altering iframe Content with the Help of Selenium Web Driver

I am looking to update the content of an iframe with new material using Selenium WebDriver. Note: I have attempted the following method: driver.swithTo().frame(frame_webelement); driver.findElement(By.xxx).sendKeys("Mycontent"); While I was able to cle ...

`Is there a way for Javascript to retrieve information sent from Python Flask's render_template() method?`

Issue: I am facing difficulties in retrieving and displaying the data that I send from Javascript code when the user visits the site's landing page. The data in question is a dataframe. Backend Python Code: from flask import Flask, render_template, ...

What is the best method for accessing a specific Data value on the route?

Hello everyone! This is my first time posting on Stack Overflow. I am currently working on developing an attendance management system for a school. In my database tables, I have the following fields: Registration: class_id, section_id, user_id. Attendanc ...