Unable to define the coordinates of one object in relation to another in three.js

My understanding of how positions work may be off, as they are not behaving the way I anticipated. When I create two Object3Ds, I would expect to be able to set the position property of the second one as a reference to the first so that it follows it, but it doesn't seem to be working as expected:

var foo = new THREE.Object3D();
foo.position = new THREE.Vector3(100, 200, 300);

var bar= new THREE.Object3D();
bar.position = foo.position;

console.log(foo.position); //{100, 200, 300}
console.log(bar.position); //{0, 0, 0}

What am I missing in this scenario? Another approach involves creating a new Vector3:

var foo = new THREE.Object3D();
foo.position = new THREE.Vector3(100, 200, 300);

var bar= new THREE.Object3D();
bar.position = foo.position.copy();

console.log(foo.position); //{100, 200, 300}
console.log(bar.position); //{100, 200, 300}

This method creates a new Vector3, which works only until foo is moved - after which bar.position needs to be updated again.

(The code above has not been tested!)

Answer №1

bar.setPosition(foo.getX(), foo.getY(), foo.getZ());

Remember to utilize the set method (x, y, z) for positioning instead of initializing a new instance with new.THREE.Vector3(1,2,3)

Answer №2

To make one object trail behind another, you will have to use the .add() method to connect the two objects together.

Check out this code snippet http://jsfiddle.net/2e3vq9pk/ where clicking on the square causes it to move slightly to the right, and the circle 'follows' the square because they are connected in line 15 with square.add(circle);

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

The left margin in Carousel is malfunctioning when it comes to hovering

I would like to achieve an effect where, on hover, my images shift the other images to both the left and right. However, currently when hovered, all the images shift to the right only. The code snippet in question is as follows: .item-img:hover { trans ...

Tips for preserving images while browsing a website built with Angular single-page application

Utilizing Angular's router for component navigation has been beneficial, but I am facing an issue with component reloads when going back. To address the problem of content reloading from the server, I have implemented a solution where the content arra ...

Storing the ID passed from Next.js/Link into Next.js

I'm encountering some issues with the current flow setup. I have a component ArticleList that listens to articles, and upon clicking on it, redirects you to the individual article page. The redirection is done using next/Link, where the id is passed a ...

How can I sum up each array elements using a forEach loop in JavaScript?

Check out my code snippet: var data = [[40, 20, 60], [20, 30, 10], [50, 75, 40]]; var averageData = []; data.forEach(function(entries) { entries.reduce(function(a, b) { return a + b[1]; }, 0); console.log(entries); }); I want to sum ...

Refreshing GIF images in React using forceReload

In order to restart the gif animation every 12 seconds or whenever the activeIndex changes, I need to reload a GIF image with CHECKMARK_ANIMATION_ICON as the source. Below is the code: const reloadImgSource = (imgSource) => { setTimeout(() =& ...

Next.js React Hydration Issue - "Anticipated a corresponding <a> within the server HTML <a>"

Currently, I am encountering a hydration error while working on my Next.js project. The specific error message that keeps popping up is: Error: Hydration failed because the initial UI does not match what was rendered on the server. Warning: Expected serv ...

Show every element of an array except for the selected index using Javascript

I'm curious, is there a way to display array indexes in reverse order? Let's consider the following array: var color = ["red", "green", "blue", "yellow"]; console.log(color[2]); Normally, the console would display "blue", right? But what if we ...

Retrieve data from an AJAX call and PHP script upon successful completion

Utilizing AJAX (jQuery), my aim is to submit a form to user-ajax.php and expect the page to echo back a response like "success". In my AJAX code, I am checking the response value for success but it's not working as expected. Below is the PHP code snip ...

Span wrapped in a hover effect

I am facing an issue with hover options... What I am looking for is a text in a circle Finally, I achieved the desired look using csswrap Next, I added some jQuery to insert links into all spans with the same class Everything is working fine, except fo ...

What could be causing the 400 error in my $http.post request?

I am relatively new to working with MEAN stack and I have encountered an issue that I hope someone can help me with. I am trying to implement functionality where an email is sent to a contact upon clicking a send button. I am using the SendGrid Nodejs API ...

verifying an email address through firebase using the verifyPasswordResetCode method

Currently in the process of setting up firebase authentication. Instead of relying on firebase's default pages for recovery password and email verification, I want to handle these processes directly on my website. To customize the recovery steps: U ...

There was an issue with the NextJS axios request as it returned a status code

I'm currently in the process of developing an application with NextJS and Strapi In my project, I am fetching data from Strapi using Axios within NextJS Next: 14.0.4 Axios: ^1.6.5 Strapi: 4.17.1 Node: 18.17.0 Here is the code snippet: import axios f ...

Encountering a compilation error when implementing ActionReducerMap in combination with StoreModule.forFeature

In my Angular project, the structure is organized as follows: /(root or repo folder) |_ projects |_ mylib (main library to be exported from the repo) |_ sample-app (created for testing 'mylib' project in other projects) To manage appli ...

What could be causing the error "insertOne is not a valid function" in my MongoDB database?

When the code attempts to connect to the mongodb database: const dbConnect = async () => { try { await client.connect(); const db = client.db('smile-tracker'); const users = db.collection('users'); retu ...

Managing empty functions as properties of an object in a React, Redux, and Typescript environment

I'm feeling a little uncertain about how to properly test my file when using an object with a function that returns void. Below are the details. type Pros={ studentid: StudentId pageId?: PageID closeForm: () => void } When it comes to creating ...

What are some effective methods for drawing attention to newly added table rows?

Whenever I input new data into my table, the data does not get highlighted as expected. However, the existing data in the table gets highlighted with no issues. Can you please help me troubleshoot why my code is not functioning correctly? Thank you. The f ...

Discovering the worth of a key within a JSON file

Below is a JSON with objects containing artist and image values. I need a function that, given an artist name, will return the corresponding image value in the same object. All objects are enclosed in an array as a JSON. var iTunes_data = $([{ "titl ...

What is the technique for retrieving the data-id value and transferring it to a different page with jQuery's post method?

Here is the code I'm working on: <a href="#view_contact" class="btn btn-info btn-xs view" data-id="<=$row['ADMINISTRATOR_ID'];?>" data-toggle="modal">View</a> I'm trying to fetch the value of data-id and pass it to a ...

Best practices for locating unique symbols within a string and organizing them into an array using JavaScript

Here is an example string: "/city=<A>/state=<B>/sub_div=<C>/type=pos/div=<D>/cli_name=Cstate<E>/<F>/<G>" The characters A, B, C, and so on are variables, and their count is not fixed. Can you determine how many ...

Crafting LayerGroups on the Fly with Leaflet

Dynamic Creation of LayerGroups: Is it Achievable? I am currently working on a web map showcasing the various tree species present in parks. My goal is to create a separate LayerGroup for each species so that users can toggle visibility using a LayerContro ...