Bird's-eye view captured by a high-angle camera

As I rotate a sphere around the z-axis, I'm looking for a way to prevent the camera from causing motion sickness by creating a stable elevated view of the sphere. How can I achieve this without the camera's movements being so jarring?

If you're interested in seeing the code that controls this sphere rotation and camera movement, check out the animate method in this JS Fiddle.

function animate() {
    requestAnimationFrame(animate);
    var timer = Date.now() * 0.0009;
    sphere.position.x = Math.sin(timer) * 3000;
    sphere.position.y = Math.cos(timer) * 3000;
    camera.lookAt(sphere.position);
    render();
}

Answer №1

To ensure the camera keeps focusing on the horizon, utilizing an Object3D is necessary:

obj = new THREE.Object3D(); // using object to maintain relative rotation
obj.add(sphere);
sphere.position.y = 3000; // distance from origin
scene.add(obj);    // adding object instead of sphere

Check out an example here: http://jsfiddle.net/kjtffr02/4/

Answer №2

To avoid the awkward camera rotation, I recommend reversing the axis when the camera reaches 180 degrees on the y axis. This will help maintain smooth camera movements without any strange rotations.

For an example of how to implement this, check out the code here (specifically the render() function) and see the demo here.

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 is the purpose of using route('next') within ExpressJS?

In the documentation it states: You can have multiple callback functions that act as middleware and can invoke next('route') to skip the remaining route callbacks. This is useful for setting pre-conditions on a route and then passing control t ...

Is there a way to stop TinyMCE from adding CDATA to <script> elements and from commenting out <style> elements?

Setting aside the concerns surrounding allowing <script> content within a Web editor, I am fully aware of them. What I am interested in is permitting <style> and <script> elements within the text content. However, every time I attempt to ...

What is the best way to view or save the content of a PDF file using a web service?

As a newcomer to web services and JavaScript, I am facing a challenge with calling a web service that returns a PDF file in a specific format. Here is the link to view the PDF: https://i.stack.imgur.com/RlZM8.png To fetch the PDF, I am using the following ...

Troubleshooting: React Testing Library Issue with Updating Material UI DatePicker Input Content

I'm attempting to update the value of the Material UI Datepicker Input using React Testing Library. Unfortunately, I have not been successful with the fireEvent.change() method. import React from "react"; import { render, screen, waitFor, fi ...

Extracting data from websites: How to gather information from dynamic HTML elements

On the website I am exploring, there is a dynamic graph with descriptions below it that keep changing. My goal is to extract all these trajectory descriptions. The HTML code snippet related to the description area looks like this: <div class="trajDesc ...

What is the best way to bind a click handler or any event handler to my object or module?

Can someone help me with attaching event handlers to my module in a way that I am not sure how to achieve? Here is the snippet of my module: var globalModule = { name:'Banana on princess bed', init:function(){ alert('Init ...

Would it be better to lock a variable stored in req.session, or opt for a massive global variable instead?

As I delve into creating a game using node.js, the premise is sending units on missions and waiting for their return. The challenge lies in ensuring that the same unit cannot be sent on two different missions simultaneously, nor can two sets of units be di ...

Using Javascript or Jquery, you can submit a form without the need for a button

I'm attempting to submit a form without using a button by invoking a JavaScript function and processing the form with JQUERY/PHP. My goal is for the form to be submitted silently on the backend without causing the page to reload. However, I keep encou ...

The store for WrappedApp was just initialized using withRedux(MyApp) { initialState: undefined, initialStateFromGSPorGSSR: undefined }

I am trying to create multiple routes with express and next.js. After running npm run export, I encountered the following message: next export info - using build directory: C:_PROJECT.next info - Copying "static build" directory info - Launching 3 wor ...

Executing an external HTTP request within an ExpressJS middleware prior to rendering the response

Currently, I am facing a challenge while trying to utilize Express middleware for a login request. The default route generates an external URL that redirects to /login?code={login-code}. This URL triggers an external HTTP request to obtain the user_id and ...

Setting the value for a textbox using Jquery's .val() function works, while .attr() does not have the

//unable to get it working $("#TextBoxID1").attr("value","HI Value Change") //works perfectly fine $("#TextBoxID2").val("HI Value Change") <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.0/jquery.min.js"></script> <input type= ...

What is the method for invoking an imported function in a template?

Let's analyze the code snippet below, which utilizes a method and an imported function: <template> <div> {{sayHello()}} {{sayDate()}} {{DateTime.now()}} <div> </template> <script> import {DateTime} from & ...

Is the Positioning of JS Scripts in Pug and Jade Documents Important?

Have you ever wondered why a page loads faster when certain lines are placed at the end of the tag instead of inside it? script(src="/Scripts/jquery.timeago.js") This phenomenon is often seen in code like this: //Jade file with JQuery !!! 5 html(lang=" ...

How to access a variable in an Angular Factory's callback function from outside the factory

Here's a look at the structure of My Factory: .factory('MyFactory', function(){ return: { someFunction: functon(firstParam, secondParam, resultObject) { $http.get(url).success(resultObject); } ...

Using JQuery to append elements and then locate them with the find method does not produce the expected

Hey there, I'm having trouble inserting one DOM element into another. It's something I've done many times before successfully, but for some reason it's not working this time and I can't figure out why. Currently, I am using an Aja ...

Connecting Next.js to a Database: A Step-by-Step Guide

I am interested in developing an application similar to Samsung Health that will involve heavy querying on a database. I am unsure whether it would be more beneficial to create a custom server using Node.js (with Express.js) instead of using the integrate ...

Why is there an issue with the JavaScript array when accessing data['sax']?

There seems to be some confusion regarding the contents of this array and how it assigns values to the variable set. It would be greatly appreciated if someone could provide an example pertaining to the usage of data['sax']. Additionally, an expl ...

Looking to enhance my current workaround for utilizing Google Spreadsheet's ImportRange feature

I recently joined this forum and have just started using Google Scripts. I don't have any prior experience with JavaScript or programming languages, but had to learn them when I decided to use Google Apps as the main platform for my small business. M ...

JavaScript code to copy a specified column through the last column, and then paste it down to the last row

I have limited experience with JavaScript and I've been putting together the code I need by searching online resources and watching videos. My goal is to set multiple columns in row 4, starting from column 18 to the last column, as the active cells fo ...

Encountered an error with Aurelia webpack 4 when trying to load a necessary CSS file during runtime

I encountered a unique issue with webpack and aurelia that I can't seem to figure out. After creating a new webpack configuration based on online resources and official documentation, the compilation goes smoothly without any errors. However, during r ...