The position of the camera remains static even after it is attached to a mesh

Looking to implement a TPS (third-person shooter) camera that follows the player? I have added the camera to a cube which represents the player's movement. You can view the coordinates of both the camera and cube in this example. While the camera is following the cube correctly, you'll notice that the camera coordinates are not updating. This becomes problematic when utilizing picking functionality since it relies on accurate camera positioning.

This is what I have done so far:

cube.add(Camera);

If anyone has an idea or solution for this issue, please share!

javascriptcamerathree.js

Answer №1

When the camera is added to the cube, it becomes a child object. The child's coordinates are in local coordinates, which are relative to its parent (including scale and rotation). This means that even if the parent (the cube) moves, the child's coordinates stay the same.

To find out the world coordinates of the camera, we need to extract them from the complete world matrix stored by Three.js. Although there isn't a direct property for world coordinates, Three.js provides a helpful function to get them:

var cameraPosition = new THREE.Vector3();
cameraPosition.setFromMatrixPosition(Camera.matrixWorld);

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

Resolving the issue of multiple instances of React within a single application

I'm currently working on a React module in my local environment. To link the module, I am using npm link. Although the module is being imported successfully, the hooks inside the module are failing with the following error message: Invalid hook call ...

javascriptreactjsnpmwebpackpackage.json

At what point is the ajax call considered fully executed?

Whenever a client makes an AJAX call, they upload data to the server (HTTP request) and then receive data from the server (HTTP Response). Once the clients have received all the data, the AJAX request is considered successful, and the success callback func ...

javascriptjqueryajax

Angular directive undergoing karma testing throws an error: $sce:insecurl

Currently, I am in the process of creating a test for a directive known as calendar week. During this development, I encountered an angular error that led me to the following link: https://docs.angularjs.org/error/$sce/insecurl?p0=http:%2F%2Fhere.com%2Fvie ...

javascriptangularjskarma-jasmine

Utilizing Angular routing in HTML5 mode within a Node.js environment

While I've come across other solutions to this problem, they all seem to have drawbacks. One option leads to a redirect, which could be disastrous for my front-end application that relies on Mixpanel. A double-load of Mixpanel results in a Maximum Ca ...

javascriptangularjsnode.jsexpressangular-ui-router

JavaScript code does not run when a page is being included

On my AngularJS-based page, I have included some additional HTML pages like this: <div data-ng-include src="includehtml"></div> Here is the JavaScript code: $scope.selectImage = function(id) {$scope.includehtml = id;} (I pass the HTML file ...

javascripthtmlangularjs

Set a class for the active menu item using jQuery based on the current window location

I have an HTML snippet here with a class called js-nav and a custom attribute named data-id. This data is crucial for determining the current sliding menu. <a class="nav-link js-nav" data-id="about" href="/#about">About</a> The approach I too ...

javascriptjquery

Trouble with Angular: Passing output between child components is not working

Just dipping my toes into Angular, I started learning it yesterday for a take-home job interview project. Please excuse any rookie mistakes in advance. For some hands-on practice, I decided to work on a basic project where the main component (app) has two ...

javascriptangularfrontendcomponents

The component contains a render method, however, it does not inherit from React.Component

A component is displaying a render method, however it does not extend React.Component. This may lead to potential errors. Please modify <Test> to extend React.Component instead. When utilizing the extends-classes library, it results in a react compo ...

javascriptreactjs

The values returned by a NodeJS script in the Python shell are identical to those returned by Node

The following program was developed to address an issue in another application. In this program, a Python script is called from Node.js to perform a task. The Python script returns results that are then used in Node.js. NodeJS : var pythonShell = require ...

javascriptpythonnode.js

Guide on incorporating a Python script into a website using DJango

I am new to Django and looking for guidance. My goal is to have users input text in an HTML textbox, then process that text using Python and display it on the website. Despite going through documentation and tutorials, I have not been successful in gettin ...

javascriptpythonhtmlcssdjango

How can you efficiently transfer the expression utilized in v-for from the template to the component code?

How can I extract the expression within the template that is contained in :class? <div v-for="(user, index) in users" :key="index" :class="{'bg-yellow-lighter': infoWindowMarker && infoWindowMarker.position.lat === user.posit ...

javascriptvuejs2

"Enhance user experience with jQuery's text expansion and collapse

Figuring out how to collapse and expand text with a button click has been challenging for me. I managed to make the text collapse when the button is clicked, but now I also need it to expand back again. The goal is to have the text initially hidden, then e ...

javascriptjqueryhtml

Waiting for the listener script to finish its task in an Ajax call and then informing the user

I have developed a unique program that allows users to submit test cases from a specific webpage (main.php). The webpage triggers an ajax request to insert user data into MySQL using the file insert.php, with the value done=0. Subsequently, there is a list ...

javascriptphpjquerymysqlajax

What is the best method for extracting specific JSON response elements and appending them to an array?

I've been utilizing the Nomics cryptocurrency API in my project. Below is an example of the Axios call: axios.get(apiURL + apiKey + apiSpecs) .then(function (response) { // sort data by highest market cap console.log(response.data) }) Here' ...

javascriptarraysnode.jsjsonobject

The server failed to respond to the Angular HTTP request

To store data in my database, I have created a function in my component.ts file that invokes a service: ajoutText(newtext: String) { this.dataService.sendtext(newtext); } On the HTML side, it looks like this: <form class="form"> <mat-form-f ...

javascriptnode.jsangularexpressangular-httpclient

Having difficulty retrieving the selected value in JSPDF

I am attempting to convert my HTML page into a PDF format by utilizing the following code: domtoimage.toPng(document.getElementById('PrintForm')) .then(function (blob) { var pdf = new jsPDF('p', &apo ...

javascriptjqueryjspdf

What is the optimal strategy for incorporating both useLazyQuery and useQuery within the Apollo-client based on specific conditions?

In the navigation menu, I have options for "foods" and "cakes." The Foods page displays a list of all food items url: /foods When the user clicks on cakes, they are redirected to /foods?food=cakes, which is essentially the same page as the foods above. ...

javascriptreactjsgraphqlnext.jsapollo-client

Setting up NextJS on Vercel for website deployment can encounter a common error known as ENOENT Error, which is caused by the absence of a specific file or

Everything works perfectly on my local machine: import fs from 'fs' import path from 'path' export default function createNewDirectory (tokenSignature: string) { const directoryPath = path.join(process.cwd(), 'notes', to ...

javascriptnext.jsdeploymentvercel

What is the best way to add items to arrays with matching titles?

I am currently working on a form that allows for the creation of duplicate sections. After submitting the form, it generates one large object. To better organize the data and make it compatible with my API, I am developing a filter function to group the du ...

javascriptarraystypescriptobject

How to sort WordPress RSS feed in alphabetical order using JavaScript

Currently using WP, but feeling limited due to restricted access to PHP and plugins. Searching for a JAVASCRIPT code solution to fetch RSS feed from a URL and organize the feed titles in ALPHABETICAL order. The JS code can be inserted into the footer and ...

javascriptwordpressrssalphabetical