child object rotated to face the Camera, utilizing lookaAt() and worldToLocal() methods within the Three.js framework

I am facing an issue with the three.js built-in lookAt() method related to my hierarchical Object structure setup.

var obj1 = new THREE.Object3D();
obj1.position.x=200;
obj1.rotation.x=0.1;
scene.add(obj1);

var obj2 = new THREE.Object3D();
obj2.position.y=-400;
obj2.rotation.y=0.21;
obj1.add(obj2);

var obj3 = new THREE.Object3D();
obj3.position.z=-200;
obj3.rotation.x=0.1;
obj3.rotation.y=-0.1;
obj2.add(obj3);

When I use

obj1.lookAt(camera.position);

it works correctly. However, when I call the method from a child object, like

obj3.lookAt(camera.position);

the rotation is incorrect.

Considering that the rotation of the parent object might be causing the issue, I attempted to convert the world position of the camera to the local position of the object without success.

var vector = new THREE.Vector3();
vector.setFromMatrixPosition( camera.matrixWorld );
obj3.lookAt( obj3.worldToLocal( vector ) );

Any assistance on this matter would be highly appreciated.

Answer №1

To implement this feature, simply include these prototype functions. Instead of using .lookAt(vector), utilize the .lookAtWorld(vector) function.

THREE.Object3D.prototype.worldToLocal = function ( vector ) {
    if ( !this.__inverseMatrixWorld ) this.__inverseMatrixWorld = new THREE.Matrix4();
    return  vector.applyMatrix4( this.__inverseMatrixWorld.getInverse( this.matrixWorld ));
};


THREE.Object3D.prototype.lookAtWorld = function( vector ) {
   vector = vector.clone();
   this.parent.worldToLocal( vector );
   this.lookAt( vector );
};

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

What to do when a JWT token expires and how to generate a fresh token?

I am currently dealing with a problem regarding JWT (JSON Web Token) authentication in my application. At times, when I make API requests, I encounter the following error response: { "success": false, "message": "jwt expired" } I am aware that this er ...

Why isn't the length of the Array changing when using React's useState hook

I am facing a challenge trying to understand why the value of inputElementArray.length consistently remains 0 when accessed within the useEffect method. function view() { const [inputElementArray, setInputElementArray] = useState<HTMLInputElement[]& ...

Using an xmlhttprequest to retrieve a PDF file functions properly in synchronous mode, but encounters issues in

Today I'm experimenting with some code that scrapes PDFs from a chrome extension by detecting user-clicked links. I've noticed that synchronous xmlhttprequests work perfectly for both HTML documents and PDFs. However, I seem to be facing an issue ...

Imitate a style using jQuery without deleting other elements

This is an example of HTML code: <div id="id1" style="width:100px;background: rgb(196, 14, 14);">1</div> <div id="id2" style="margin-top:10px">2</div> to <div id="id1" style=&qu ...

Ways to expand the dimensions of a Popup while including text

I am using a bootstrap modal popup that contains a Treeview control in the body. The issue arises when the node's text width exceeds the popup's width, causing the text to overflow outside of the popup. Is there a way to dynamically adjust the ...

After successfully sending a GET request to the API, the Next.js 13.4.3 website still does not reflect new posts added on the hosting platform

I am currently using Next.js version 13.4.3 in my app directory to create a blog site. However, I am facing an issue. When I run npm run build locally on my computer and then start with npm run start, the new posts are displayed normally after adding them ...

Unable to render JSON data using AJAX

I have a JSON file filled with various data and I'm trying to use AJAX to display it. Despite my efforts, I couldn't get it to work and after extensive research online, I decided to reach out for your assistance: $(document).ready(function ...

What is the process for attaching text or labels to an object, similar to applying decals?

Check out this website: On this site, you can create text, add it to objects like a decal, and then click "Ok" to confirm. Is there a way to make this effect visible on the design? Many thanks in advance! ...

Incorrect Results from Angular Code Coverage

Currently using Angular.js, Karma, Karma-coverage (Istanbul), and Jasmine for my stack. While conducting Code Coverage analysis on my app, I encountered an issue which leads to my question - Service A is showing up as covered by tests (in green) even thou ...

What is the best way to validate if fields are blank before sending a message using the button?

<template> <div> <div class="form-group"> <label for="name">First Name</label> <input type="text" class="form-control" v-model="firstName" placeholder="Ente ...

Filtering nested arrays in Angular by cross-referencing with a navigation menu

In the legacy application I'm working on, we have a navigation menu along with a list of user roles. Due to its legacy nature, we have accumulated a significant number of user roles over time. The main goal is to dynamically display the navigation me ...

What is the method to group a TypeScript array based on a key from an object within the array?

I am dealing with an array called products that requires grouping based on the Product._shop_id. export class Product { _id: string; _shop_id: string; } export class Variant { variant_id: string; } export interface ShoppingCart { Variant: ...

Tips for retrieving multiple values or an array from an AJAX request?

Is there a correct way to pass multiple sets (strings) of data back after executing an ajax call in php? I understand that echo is typically used to send a single string of data back, but what if I need to send multiple strings? And how should I handle th ...

The skybox in Three.JS is not appearing. Could there be an issue with the sizing or positioning?

Incorporating a small three.js scene into my project has been a challenge. I managed to create a skybox for the scene, but it's not appearing as expected. Interestingly, when I added a small box to the scene, it rendered perfectly. I suspect that the ...

How can the radio button's checked property be bound to a boolean attribute of a component in Angular 2?

Is there a way to connect the checked property of a radio button to a boolean variable in a Component class? I would like the radio button in the template to be pre-selected if the boolean flag is true. I attempted to use <input type="radio" [(ngModel) ...

Show text using AJAX when the form is submitted

I'm in the process of creating a basic form with a submit button (see below). My objective is to allow users to enter text into the input box, click submit, and have the page refresh while displaying the entered text in a div element. The user's ...

Monitoring user clicks using JavaScript code implemented

Currently, I am utilizing a JavaScript file to load on certain pages in order to track various events. Within this JavaScript file, there is a collection of selectors that have listeners attached to them. When these selectors are clicked, the tracking AP ...

What is the reason for calling Proxy on nested elements?

Trying to organize Cypress methods into a helper object using getters. The idea is to use it like this: todoApp.todoPage.todoApp.main.rows.row .first().should('have.text', 'Pay electric bill'); todoApp.todoPage.todoApp.main.rows.ro ...

When running "npm install," the system is failing to prioritize transitive dependencies with the highest version numbers

I'm currently tackling a project in Node that involves an SDK and a parent project that consumes the SDK. When it comes to Java, Maven or Gradle will automatically pick the transitive dependency with the highest version number. But how does this proce ...

Can you explain to me the concept of "face indices" in Three.js and how it functions?

I am attempting to use Three.js to build a unique irregular polyhedron. In order to achieve this, I have decided to utilize the PolyhedronGeometry feature (refer to the documentation). However, I am encountering difficulty in understanding the concept of ...