How can the camera in ThreeJS be shifted horizontally without being affected by its current orientation?

In my ThreeJS setup, the camera is able to move through a 3D world and change its lookAt multiple times while in motion. As a result, camera.getWorldDirection() will always be more or less random.

Now, I require the camera to move specifically left, right, up, or down relative to camera.getWorldDirection(). It's not as simple as using camera.position.x += 1 because this only works for a world direction of Vector3(0, 0, -1). If the world direction changes to something like (1, -1, 0), moving the camera to the right will require adjustments in both the X and Z axes.

I've explored quaternions and 4D matrices, but I'm struggling to understand them. I would greatly appreciate any assistance with this.

For a demonstration, visit:

javascriptthree.js

Answer №1

The solution I came across was actually in an unaccepted response that I found here.

By utilizing functions like camera.translateX() and others, it's possible to manipulate the camera's local position effectively. This allows for seamless movement by adjusting camera.position and using the translate functions to apply offsets based on the camera's viewing angle.

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

Changing the colors of multiple buttons in a React Redux form: a step-by-step guide

When using Redux Form Wizard on the second page, I have two buttons that ask for the user's gender - Male or Female. The goal is to make it so that when a user clicks on either button, only that specific button will turn orange from black text. You ...

javascriptreactjsbuttonredux-form

At times, the map may only be visible in the top left corner of its designated container

Currently, I am integrating the Google Maps API v3 for JavaScript into my project. However, I am facing an issue where the map only appears in the upper left corner under certain circumstances. To visualize this problem, you can visit this link and click ...

javascriptgoogle-maps-api-3

Error: JavaScript object array failing to import properly

In my code, I have an array of objects named trace which is defined as follows: export const trace: IStackTrace[] = [ { ordered_globals: ["c"], stdout: "", func_name: "<module>", stack_to_render: [], globals: { c: ["REF" ...

javascriptreactjstypescript

Issues with data communication in AJAX and Node JS/Express post requests

I'm currently exploring Node.js and I'm running into an issue with app.post. Everything seems to be working fine, as I can see the console log whenever the action is executed. However, the data sent by AJAX from main.js does not seem to be receiv ...

javascriptjqueryajaxnode.jsexpress

JavaScript Regular Expression for separating a collection of email addresses into individual parts

I am very close to getting this to work, but not quite there yet. In my JavaScript code, I have a string with a list of email addresses, each formatted differently: var emailList = '<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data- ...

javascriptregexsplit

splitting xmlhttp.responsetext using loops

Currently, I have a JavaScript function that utilizes xmlhttp.responsetext to fetch data from MySQL. This data is then used to populate form fields in a dropdown menu, which has been functioning perfectly so far. However, the issue arises when I attempt to ...

phpjavascriptwhile-loopxmlhttprequest

Building the logic context using NodeJS, SocketIO, and Express for development

Exploring the world of Express and SocketIO has been quite an eye-opener for me. It's surprising how most examples you come across simply involve transmitting a "Hello" directly from app.js. However, reality is far more complex than that. I've hi ...

javascriptnode.jssocketsexpresssocket.io

Converting and storing Canvas data as a blob, and then saving the blob as

There is a clickable icon on the page that triggers an action when clicked. Currently, the icon is set as an anchor tag. However, I want to change it to a div like all the other icons in my UI. But for some reason, the following code isn't working. W ...

javascriptjquerycanvasblob

Tips for updating and using a map value array as state in React

One React state I am working with is as follows: const [tasksMap, setTasksMap] = useState(new Map()); This map is created using the following code: tasks.forEach((task) => { const key = `${week.year}-${week.weekNo}`; if (!tasksMap.has(key)) { ...

javascriptreactjsuse-state

Angular and Three JS collaboration leads to misplacement of canvas rendering

Currently in the process of developing code for a website, I am attempting to integrate Three JS with Angular. After conducting some research, I have found that this combination is feasible and I have successfully merged these two libraries. However, I am ...

javascriptangularcanvasthree.jswebgl

Combining round brackets and square brackets when initializing an array

In the snippet below, values are assigned with a mix of parentheses and square brackets without any errors. However, most other combinations (such as parentheses inside square brackets) do not work at all. var myItems = []; myItems[5] = ("A1", "B1", ["C1" ...

javascript

Launching Node.js + Express on the server

Trying to Deploy Node.js + Express on Server I'm diving into Node.js and Express development for the first time, and before I fully commit to using these technologies in a new project at work, I want to test them on our server to ensure everything ru ...

javascriptnode.jsexpress

What could be the reason behind receiving an "undefined" message when attempting to access db.collection in the provided code snippet?

var express = require('express'); var GoogleUrl = require('google-url'); var favicon = require('serve-favicon'); var mongo = require('mongodb').MongoClient; var app = express(); var db; var googleUrl = new GoogleUrl( ...

javascriptnode.jsmongodbexpress

Error encountered in Angular10: XHR request for POST failed due to browser blocking HTTP Request to a domain with a similar name

I am encountering an issue with my webpage that consists of a Django REST API and an Angular 10 Frontend SPA. Normally, I can successfully send GET, POST, PUT, and DELETE XHR Requests to my backend without any problems. However, there is a specific API End ...

javascriptangularajaxhttpxmlhttprequest

The flat function for JavaScript Arrays is not defined in React Native

I am currently developing an application using react-native and it's common knowledge that we can utilize JavaScript code in this particular project as well as any other react projects. However, whenever I attempt to use the following code snippet, t ...

javascriptarraysreact-native

Why isn't JQuery's .prependTo('body') function functioning correctly?

It's getting late and I should probably call it a night, but I am completely puzzled. I hate to admit it, but why isn't this working?? var informationBox = ''; informationBox += '<div class="informationBox">'; informati ...

javascriptjquery

A guide on Extracting Values from Nested Objects

Although I am not well-versed in JavaScript, I have a small project where I need to use JavaScript. I am attempting to retrieve values from an object nested within another object. However, my code is throwing errors. Below is the snippet of my code with d ...

javascripthtml

What are the steps for integrating DoctorJS with Emacs?

Is there a method to utilize DoctorJS (formerly known as jsctags) in order to create a TAGS file specifically for Emacs? I have been researching this topic and it appears that it typically defaults to the vi tags style, although I may be overlooking a str ...

javascriptemacsctagsjsctagsetags

Filtering data within a specific date range on an HTML table using JavaScript

I am attempting to implement a date filtering feature on my HTML table. Users should be able to input two dates (From and To) and the data in the "Date Column" of the table will be filtered accordingly. The inputs on the page are: <input type="date" i ...

javascripthtmlhtml-table

Error updating model: The `teams` model cannot be modified once it has been compiled

After spending hours researching on StackOverflow, I came across numerous articles related to my issue. However, I am still unable to identify what mistake I have made here. Here is my code: models/Team.js const mongoose = require('mongoose'); ...

javascriptnode.jsmongodbmongoose