How do you modify the up vector of the camera in three.js?

When working with three.js, I encountered a situation where I set the camera's focal point using camera.lookAt(0, 0, 0), but the camera's up vector ended up pointing in a random direction. I have a specific up vector in mind that I want the camera's up direction to align with, but when I try to set it using camera.up.set(), it doesn't seem to have any effect:

camera.position.set(0, 0, 5);  // works
camera.lookAt(0, 0, 0);        // works
camera.up.set(1, 0, 0);        // nothing
camera.up.set(-1, 0, 0);       // nothing
camera.up.set(0, 1, 0);        // nothing
camera.up.set(0, -1, 0);       // nothing
camera.up.set(0, 0, 1);        // nothing
camera.up.set(0, 0, -1);       // nothing

I'm wondering how to effectively change the camera's up vector. While using camera.rotateZ(0.1) works to some extent, it involves trial and error to find the right rotation amount. I would prefer to simply set the up vector directly.

Answer №1

up should only be utilized in conjunction with the lookAt method. It's important to remember that lookAt is not a state, but rather a function that establishes the rotation property for you. Therefore, if you make changes to the up property, you will need to subsequently call the lookAt function again.

camera.position.set(0, 0, 5);  
camera.up.set(1, 0, 0);        
camera.lookAt(0, 0, 0);        

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

Why does my JSON variable contain "type" and "data" values instead of something else?

After using JSON.stringify() on my object to save it to a file, I noticed that one of the parameters does not have the expected string value assigned. Instead, it has a "type" and "data". Code: fs.writeFileSync('myjson.json', JSON.stringify(myjs ...

Display an image from the API that rotates when hovered over with the mouse

Currently, I am fetching data from pokeapi.co and dynamically inserting it into a table. This data includes various stats and an image. My goal is to make the image rotate when hovered over. While creating the table, I added an id="pokeImage" dynamically. ...

Assistance in configuring Zurb Foundation 5 for optimal integration with Laravel

As a relatively new user to Laravel with previous experience using older versions of Foundation, I am currently in the process of setting up a new Laravel project. My goal is to integrate the Foundation framework into my project, but I find myself a bit co ...

No mouse cursor activity while in Pointer Lock mode

Using Pointer Lock for capturing the cursor in a game being developed in JavaScript with three.js has been quite interesting. Despite extensive online research, the reason why the cursor doesn't seem to move on Chrome OS remains elusive. A working exa ...

The property being set in Angular is undefined, causing an error

I am struggling to understand why the code below is not functioning as intended: Main.html <div class="MainCtrl"> <h1>{{message.test}}</h1> </div> Main.js angular.module('myApp') .controller('MainCtrl', f ...

Parent Route Abstractions in Vue-Router

I am currently in the process of transitioning my existing website to vuejs. The navigation structure I aim for is as follows: /login /signup /password-reset /browse /search ... numerous other paths Since some of these paths have similar functionalities, ...

An issue encountered while implementing a post method with fetch and Express

I'm just starting out, so I hope my question isn't too basic. My goal is to send a longitude and latitude from client-side JavaScript to a Node.js server using Fetch and Express.js. Below is the HTML code snippet: <!DOCTYPE html> <html ...

Secure your website against XSS attacks with DOMPurify

Currently I am working on resolving a cross-site scripting (XSS) vulnerability using DOMPurify. The issue lies in the URL provided below: https://stage-xyzmysite.com/login/?rUrl=javascript:alert('hi'). In order to create a proof of concept, I am ...

What is the solution to the error "Maximum update depth exceeded. Calls to setState inside componentWillUpdate or componentDidUpdate" in React?

Everything was running smoothly until this unexpected issue appeared. I attempted to change the condition to componentDidMount, but unfortunately, that didn't resolve the problem. The error is occurring in this particular function. componentDidUpd ...

Storing data in a TypeBuffer and then retrieving it from a file can lead to surprising outcomes

Upon executing the following code: var list = new Uint32Array(16); for (var i=0; i<16; ++i) list[i] = i; fs.writeFileSync("list", new Uint8Array(list).buffer); console.log([].slice.call(new Uint32Array(fs.readFileSync("list")))); We anticipate the out ...

Learn how to upload an image using Vue.js and then trigger a custom method

Greetings! I am a newcomer to Vue.js and I have encountered a problem that I need help with. In my component, there is a hidden input for files. When I click a button, the browser displays a window for importing files from my PC. Once I choose a file, I wa ...

What is the process for encrypting data with javascript and decrypting it with php?

Looking for a way to encrypt data with a JavaScript function to use in a URL passed through an ajax GET request? For example, you could have encrypted data like TDjsavbuydksabjcbhgy which is equivalent to 12345: http://sample.com/mypage/TDjsavbuydksabjcbh ...

Hold on for the useState object to contain a value

Created a custom hook that fetches the user's location and determines the nearest marker on a map based on that information. Initially, it returns the default value of useState. The response looks like this: { coordinates: { lat: '', lng: ...

What is the best way to change a canvas into an image while preserving transparency?

Currently, I am attempting to modify a weather radar image with a black background by making the background transparent using canvas. However, when I view the modified image, instead of transparency, the background now appears as a red and black checkerboa ...

Enhancing Tables with Angular for Dynamic Translation and Filtering

I'm facing a challenge with my search feature in a basic table - <table> <thead> <tr> <th> Name </th> <th> Lastname </th> <th> Job Title </th> </tr> </the ...

Dealing with Superagent and Fetch promises - Tips for managing them

Apologies for posing a question that may be simple for more seasoned JS programmers. I've been delving into superagent and fetch to make REST calls, as I successfully implemented odata but now need REST functionality. However, I'm facing confusio ...

Reduxforms does not rely on preloaded CSS or JavaScript

Currently, I am utilizing MDBootstrap as my primary CSS framework and integrating redux forms to simplify form management. The issue at hand is that the design and style of elements appear different compared to the original static html page layout. Here ...

Guide for setting up multiple checkbox event listeners with jQuery

I currently have 2 checkboxes on my form: <form action=""> <input id="bikeCheckbox" type="checkbox" name="bikeCheckbox" value="Bike">I own a bike<br> <input id="carCheckbox" type="checkbox" name="carCheckbox" value="Car">I ...

I successfully merged two arrays (decks of cards) without using recursion, but I'm curious to understand where I went wrong with the recursive approach

Currently, I am working on a function that shuffles two arrays together using recursion. The goal is to combine the top and bottom halves of a deck of cards into a single array with elements interleaved. For example: The first element should come from the ...

Unlock hidden content with a single click using jQuery's click event

I have a question that seems simple, but I can't quite get the syntax right. My issue is with a group of stacked images. When I click on an image, I want it to move to the front and display the correct description above it. Currently, clicking on the ...