Spin the camera in circles, capturing every angle of the setting

Is there a way to rotate my camera 90 degrees around the scene? I attempted to use

cosole.log(camera.position);

and adjust the camera position based on the logged values, but it did not work as expected.

This is how the camera is set up initially (for the first image):

var width  = window.innerWidth,
    height = window.innerHeight;
var camera = new THREE.PerspectiveCamera(45, width / height, 0.1, 1000);
camera.position.set(0, -22, 22);

Current camera setup:

Desired camera rotation (90 degrees counter-clockwise turn):

UPDATE

I discovered that I can rotate the object itself using this code:

plane.rotation.z = 90 * Math.PI / 180;

However, I am still interested in achieving the same effect by rotating the camera specifically.

Answer №1

In order to achieve a circular camera movement, the camera's position must be rotated around the object or scene using the lookAt function:

var rotationSpeed = .02;
camera.position.x = x * Math.cos(rotationSpeed) - z * Math.sin(rotationSpeed);
camera.position.z = z * Math.cos(rotationSpeed) + x * Math.sin(rotationSpeed);
camera.lookAt(scene.position);

To rotate in the opposite direction, simply switch the plus and minus signs accordingly.

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

Steps to make a sliding tab

I am currently faced with the challenge of coding the support tab on the right side of this page - . The tab currently slides out when clicked. I found the current tab slide-out effect here: My goal is to have both the main tab and the side tab appear wh ...

Utilizing web components from NPM packages in conjunction with Svelte

My current project involves the development of a simple Single Page App (SPA) using Svelte. I have successfully implemented a basic layout and styling, as well as an asynchronous web request triggered by a button click. Now, my next objective is to utiliz ...

Unauthenticated user attempting to send a post request via React JS without proper authentication

Currently, I am working on a project where I am following a video tutorial that demonstrates how to authenticate a user using node and passport JS. The tutorial itself uses Hogan JS as its view engine, but I have decided to implement React as my front end ...

prevent clicking on the div element

I have been attempting for quite some time to disable a click on a specific div element. The purpose behind this is to prevent unauthorized users from triggering certain events that are activated when the div is clicked. In my previous attempt shown below ...

A guide on updating progress bar value based on user input

I have an input field and a progress bar that needs to be updated based on the input. The task is to input a number (%) and then display that value in the progress bar upon clicking the "Apply" button (btn-primary). Below is the HTML code provided: < ...

Top solution for efficiently capturing and storing user input in a React JS application: Event Handler

I've recently designed an input field for inputting details of items. In order to effectively capture and save the entered information, which of the following event handlers would be most suitable? onClick onChange onLoad onKeyPress ...

Is it possible for Sequelize to utilize a getter or setter within a find query?

When it comes to storing and querying email addresses in my database, I always opt for lowercase strings to prevent duplicate emails such as <a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="077274627547627f666a776b62d48ed88e5"> ...

Is there potentially a memory leak in this code? If there is, what steps can be taken to eliminate it?

Recently I inherited a project from my senior colleagues that focused on seamless page reloading using AJAX. The code is filled with numerous functions like this one: function iCreateProblems() { //some random code document.getElement ...

I am facing an issue with my JavaScript JSON code in an HTML page where the RESTful API array objects are not rendering, even though I am successfully retrieving data from the API. What steps

view image description hereMy issue arises from the fact that the items in the API are not appearing in HTML, where did I make a mistake? <button onclick = "showCountries()">Display Countries</button> <div id = &qu ...

Combining onmousedown and onchange for optimal event handling

There is a div with three slide-bars, each representing an 'rgb' value with a range of 0-255. When the slide-bars are dragged, the background-color of the div should change accordingly. Currently, an 'onchange' event is called to a func ...

I am encountering an issue with the return ( statement and I'm unable to comprehend the reason behind it

import { connect } from 'react-redux' import { Link } from 'react-router-dom' class MyFavoriteStories extends React.Component { markAsFavorite = (e) => { this.setState({ bgColor: "blue" }) } render () { con ...

In Angular, there is a situation where two input fields are both referencing the same event.target

I am facing an issue where I have two input fields that are linked to the same event.target.value object, but I want them to be separate. <form class="flex-list" [formGroup]="calculation_Input" (input)="input($eve ...

"Run JavaScript code within the boundaries of the start and end of XMLHttpRequest

Currently, I am using XMLHttpRequest to execute an AJAX request without the use of jQuery, relying solely on plain old Javascript. This particular AJAX request may take some time as it calls an endpoint responsible for processing transactions. In order to ...

Having an issue with retrieving value from a textfield in JavaScript

<input id="checkOldPassword" type="button" title="Check New Password" value="Check New Password" onclick="checkPassword()" /> <input id="newPassword" type="text" maxlength="8" min="8" /> <script language="javascript"> function checkPassw ...

Use jQuery to insert items into the text box

When I drag li elements into the textbox, they are arranged in the middle. How can I arrange these elements at the beginning? I am using Foundation. Is there a possible issue? This is my jQuery code: <script type="text/javascript"> $(function( ...

Interactive Code Playground for JS/JQuery, HTML, and CSS

I am in the process of developing my unique code for a real-time html/js/jquery/css editor. I have successfully integrated css and html, but I am facing challenges with getting jquery or javascript to function properly. Below is an excerpt of the code caus ...

Guidelines for providing the image file path in an external JavaScript file for creating a Flask API

I am looking to modify the attribute value in the index.html file from an external JavaScript file that is linked to the HTML file. The structure of my folders is as follows: folder structure When I try to specify the path from the HTML file using: {{url ...

What is the method to retrieve a javascript object from within a string template?

I am trying to find a way to map data from an object into a string template using JavaScript. Here is an example of the string and object I am working with: const menu = { breakfast: { description:'something' } meal: { d ...

Angular Navbar-Toogle Not Functioning with Bootstrap 5

I encountered an error on my console related to Popper.js. Specifically, I am receiving the following error message: "scripts.js:7 Uncaught SyntaxError: Unexpected token 'export'." Due to this error, I suspect that my toggle button is not functio ...

What is the best way to implement CSS rules for a hidden submenu?

Can anyone help me figure out how to apply CSS rules for a hidden submenu? I've attempted to use some JavaScript, but it's not working as expected. Below is a sample of the code I'm working with. The idea is that when you click on the anchor ...