Drawing a line in THREE JS where the endpoint is a vector not related to the object or its parent

In my scene, I have a hierarchy of objects where one is the parent and the other is the child.

My goal is to determine a Vector3 relative to the deepest child object that points towards a specific vector in the scene (look_point).

var grandParent = new THREE.Object3D();
var parent = new THREE.Object3D();
var child= new THREE.Object3D();

var look_point = new THREE.Vector3();

grandParent.position.set(9,5,3);
grandParent.rotation.set(1,2,3);

parent.position.set(5,8,3);
parent.rotation.set(2,1,3);

child.position.set(2,5,3);
child.rotation.set(3,2,1);

scene.add(grandParent);
grandParent.add(parent);
parent.add(child);



var m = new THREE.LineBasicMaterial({ color: 0xFF00FF, blending: THREE.AdditiveBlending,  transparent: true, opacity: 1, depthTest: false })

/// draw line in scene
var v = new THREE.Vector3().copy(child.position);
    v = parent.localToWorld(v);
    v = grandParent.localToWorld(v);

var g = new THREE.Geometry();

    g.vertices.push(new THREE.Vector3().copy(v)); 
    g.vertices.push(new THREE.Vector3().copy(look_point));   


scene.add(new THREE.Line(g,m));    

// how to get relative points to draw line with child object as a parent

var g2 = new THREE.Geometry();

    g2.vertices.push(???); //// how to get Vector3 relative to child pos and rot?
    g2.vertices.push(new THREE.Vector3());   

child.add(new THREE.Line(g2,m));  

Answer №1

In the case that look_point is positioned in the world frame, it becomes necessary to convert the points into the local coordinate frame of the child.

To accomplish this task, utilize the Object3D.worldToLocal function as shown below:

// Make sure all world matrices are updated
scene.updateMatrixWorld(true);

g2.vertices.push(child.worldToLocal(new THREE.Vector3().copy(v)));
g2.vertices.push(child.worldToLocal(new THREE.Vector3().copy(look_point)));   
child.add(new THREE.Line(g2,m));

Prior to executing the transformation, ensure that the world matrices have been calculated in advance. Feel free to reach out if you encounter any challenges implementing this solution!

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 Selenium with Python to interact with a dynamically generated object that does not have an identifying id or name

Whenever a Right click is performed, an options popup/screen will appear with dynamic content/element. Here is the Options Popup: https://i.stack.imgur.com/TfxpC.png This dynamic content/element will disappear as soon as the mouse is clicked elsewhere o ...

Unexpected behavior observed with LitHTML when binding value to input type range

Currently, I am working on an implementation that involves using range inputs. Specifically, I have two range inputs and I am trying to create a 'double range' functionality with them. The challenge I am facing is related to preventing one slider ...

Click on the link to trigger the function that retrieves the value from the element with the ID "email"

I am completely new to HTML and JavaScript and currently building a website using Wix.com. The website will only consist of a text box and a button. While Wix.com is a user-friendly site builder, it lacks full HTML editing capabilities. This means I have ...

The onclick function in the Navbar div fails to work for inner elements

Within my navbar, there is a .dropbtn div that I want to trigger a dropdown function when clicked. However, only the text "TOTAL" seems to activate this function onclick. The <span> and <i> elements inside the .dropbtn do not respond to clicks ...

Node.js Request Encoding Using Google Translate

I have developed a node.js module to use the Google Translate API. module.exports = function(sourceText, sourceLang, targetLang, callback) { var qst = qs.stringify({ client: 'gtx', sl: sourceLang, tl: targetLang, ...

The AJAX onreadystatechange function may not be consistently triggered

I have an issue with my AJAX call to retrieve XML data. It seems that the code does not enter the onreadystatechange function until the last iterations of my foreach loop. This delay is likely due to the time it takes for the calls to "www.webpage.com/" ...

One common query is how to access an HTML element from JavaScript using its ID, particularly when the element belongs to a different HTML document

Following up on the question title: In addition, the HTML document is loaded into the parent element using AJAX in the following way: $.ajax({ url: 'calender.aspx', cache: false, dataType: "html", success: functi ...

"In strict mode, the object is subjected to specific rules

I am facing a challenge with an object in my project that needs to run the content of the page within strict mode. Even after attempting to return it for global scope usage, I still haven't been able to resolve the issue. (function($) { "use stric ...

Trigger a click event in jQuery to activate a form through a hyperlink

I'm facing an issue where I want to implement a password-reset form based on a certain flag being triggered. Currently, my code is set up to prompt the user to change their password if the password_changed_flag is not present. Depending on the user&ap ...

Optimizing my AngularJS bundle is pushing me towards upgrading to Angular 5

Regarding my AngularJS application, it was initially created using 'yo angular-fullstack' with JS scripting instead of TS. It is functional but experiencing performance and user experience issues. The deployment is on AWS ElasticBeanstalk nano i ...

Transferring input data between two HTML files in Electron with a secure login feature

Currently, I am in the process of developing an Electron app that facilitates communication between users through socket.io. The app includes a login screen where users can enter their registered email and password to access the main menu. For testing purp ...

Issue with modal input causing directive template to not render

I am working on an angular-bootstrap modal where I created a custom directive to automatically focus on the input field when opened. However, after adding the directive template to my input tag, I couldn't see it when inspecting the element. Here is t ...

Express 4 Alert: Headers cannot be modified once they have been sent

I recently upgraded to version 4 of Express while setting up a basic chat system. However, I encountered an error message that says: info - socket.io started Express server listening on port 3000 GET / 304 790.443 ms - - Error: Can't set headers ...

What is the best way to ensure a specific section of a website remains visible and fixed at the bottom of the page

I want to set up a simple toolbar with divs and uls containing both anchors and tabs. The position of the toolbar needs to be fixed at the bottom of the page. <%@ Page Language="C#" %> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional/ ...

creating arguments that have default values when using the new Function() syntax

How can I set default values for arguments when using the new Function method? let fileName = "fileone.js", args = [], options = {}; let ls = new Function('fileName', 'args', 'options', 'somefunctionorValue&apos ...

Is there a technique I could use to create a visual effect like zooming, but without altering the dimensions of the image?

I'm currently working on a project to develop a photo gallery. let img = document.createElement('img') img.src = "https://upload.wikimedia.org/wikipedia/commons/thumb/0/07/Wikipedia_logo_%28svg%29.svg/1250px-Wikipedia_logo_%28svg% ...

Different methods for adjusting CSS properties that are dependent on other components

I'm currently working on a website using the React library. While I have made progress, I am stuck on how to adjust CSS properties that are interdependent. Specifically, I need help removing the blur filter from my text area .mirror-container which is ...

Ensure that the interface limits the key value to match precisely the value of a constant in Typescript

Seeking assistance in understanding how to enforce a specific type for an optional key within an interface: const FIRST = "FIRST" const SECOND = "SECOND" interface TSomeInterface { element: Element order?: typeof FIRST | typeof ...

Activate fullscreen mode in Krpano on desktop by clicking a button

Is there a way to activate fullscreen mode upon clicking a button? I believe I should use the code: krpano.set(fullscreen,true); Currently, I have an image within a slideshow that includes a play button overlay. Once the button is clicked, the slideshow ...

Can an inline try be implemented without including a catch block as demonstrated?

I have a scenario where I need to execute code that may result in an error without catching it. If the response is not valid JSON, then the desired outcome should be 0: Here is the code snippet I am considering: var overallProgress = try {JSON.parse(text ...