Flaw in Three.js POV camera causing issues with looking around

In my latest project with three.js, I have created a simple scene and my aim is to implement a point of view camera based on FirstPersonControls.js.

I made some adjustments to the code in order to customize it according to my requirements like moving the view upon mouse click. Although I am almost finished with the implementation, there is one persistent issue: when I initiate movement for the first time, the camera does not start from the object's position that I am currently viewing at scene load.

This problem only occurs when I explicitly set the camera's position. Otherwise, it works relatively fine, you can see the progress on this link: http://jsfiddle.net/42qeojs0/

If you uncomment these 3 lines (after line 60):

    camera.position.x = 10;
    camera.position.y = 10;
    camera.position.z = 250;

Afterward, attempt to navigate around the object by dragging your mouse. You will notice that the starting position of your drag differs from where you initially looked at.

Thank you for any assistance you can provide!

javascriptmath3dthree.js

Answer №1

To eliminate the initial jump when clicking the mouse, you can implement a new variable called dist to determine the distance to the object being viewed. Utilizing atan2 provides a more accurate way of obtaining the longitude.

dist = Math.hypot(blue1.position.x, blue1.position.y, blue1.position.z);
phi = Math.acos(blue1.position.y/dist);

theta = Math.atan2(blue1.position.z, blue1.position.x);

lon = THREE.Math.radToDeg(theta);
lat = 90 - THREE.Math.radToDeg(phi);

When using onDocumentMouseMove:

camera.target.x = dist * Math.sin( phi ) * Math.cos( theta );
camera.target.y = dist * Math.cos( phi );
camera.target.z = dist * Math.sin( phi ) * Math.sin( theta );

By following this method of calculating lat, long, and dist from the initial position, then determining the viewing vector, you maintain consistency with the original point of view. Previously, using a fixed multiple of 500 caused a sudden jump to a location further away than the starting point. (Note: Math.Hypot is not compatible with IE, so manual calculation may be required for IE compatibility).

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

React Native Material - Implementing a loading indicator upon button press

With React Native Material, I am trying to implement a loading feature when a button is clicked. The goal is to show the "loading" message only when the button is active, and hide it otherwise. Additionally, I would like for the loading message to disappea ...

javascripttypescriptreact-nativematerial-ui

Tips for reloading a page following a transition on Streoids.js?

In my quest to develop an application with Appgyver Steroids, I have encountered a challenge. The application consists of a central menu (index.html) and other pages. My main issue arises when I update cookie information on one of the pages (e.g., during l ...

javascriptandroidiosangularjsmobile

What is the best way to target the iframe within the wysihtml5 editor?

Currently, I am utilizing the wysiwyg editor called wysihtml5 along with the bootstrap-wysihtml5 extension. As part of my project, I am designing a character counter functionality that will showcase a red border around the editor area once a specific maxl ...

javascriptjquerywysiwygwysihtml5

Tips for maintaining a marker at the bottom of the screen while zooming, similar to Google Maps

Is there a way to customize the zoom behavior in my project? I want to maintain the bottom position while resizing the other three directions, and also include pitch adjustments. https://i.sstatic.net/hQdg8.gif https://i.sstatic.net/m3xef.gif I aim for t ...

javascripttypescriptreact-nativegoogle-mapsreact-native-maps

Display user input within a modal dialogue box

I have a subscription form that requires users to enter their name and email address. After clicking on "Compete Now," a pop-up appears asking for workshop information and postal code. The form is functioning correctly as intended. However, I want the em ...

javascripthtmlcsstwitter-bootstrap

Seeking out an item using anchor text: The ultimate guide

Here is a collection of various links to choose from: <a href="/111">AAAAA</a> <a href="/222">BBBBB</a> <a href="/333">CCCCC</a> I am interested in selecting the link with the text BBBBB and then applying the following ...

javascriptjquery

What is the process for configuring the global warning level in ESLint?

My current setup involves using WebStorm and the ESLint configuration provided by Airbnb. I'm curious if there is a way to have ESLint errors displayed in a more subtle manner instead of the harsh red color, or perhaps make all ESLint rules warnings ...

javascriptintellij-ideawebstormeslinteslint-config-airbnb

Get detailed coverage reports using Istanbul JS, Vue JS, Vue CLI, Cypress end-to-end tests, and Typescript, focusing on specific files for analysis

I have a VueJS app written in Typescript that I am testing with Cypress e2e tests. I wanted to set up coverage reports using Istanbul JS to track how much of my code is covered by the tests. The integration process seemed straightforward based on the docum ...

javascripttypescriptvue.jscypressistanbul

What are the steps to achieve consistent response behavior in POSTMAN that matches that of a web browser?

Below is an example of my code: const express = require('express'); const app = express(); app.get('/', function (req, res) { res.setHeader('Content-Type', 'text/html'); res.write("First \n"); set ...

javascriptnode.jsasynchronouspostmansettimeout

In vuex, dynamic modules share common data and do not have unique data

Currently, I am facing an issue with an asynchronous API call that returns an array of objects. After receiving this data, I map it to dynamically registered modules in my store. The process looks something like this: dispatch // prior to this dispatch, ...

javascriptvue.jsvuejs2vuex

Images that are loaded from a file and appended cannot be chosen or selected

I have implemented a script that is designed to load images from a specific folder and then append them to a designated div: $(function() { var folder = "img/moreprojects/"; $.ajax({ url : folder, success: function (data) { ...

javascriptjquerytwitter-bootstrapbootstrap-4

Specific Character Count in Regular Expressions

THIS IS DISTINCT FROM THE REFERENCED QUESTION because I have extensively researched and tested various solutions before resorting to posting this inquiry. I am in need of a validation for inputs that adhere to the following criteria: The first character ...

javascriptregex

Steps to automatically make jest mocked functions throw an error:

When using jest-mock-extended to create a mock like this: export interface SomeClient { someFunction(): number; someOtherFunction(): number; } const mockClient = mock<SomeClient>(); mockClient.someFunction.mockImplementation(() => 1); The d ...

javascripttypescriptjestjsmocking

Is it possible for a 3D box with sides of varying lengths to completely fill the viewport regardless of its perspective orientation?

Displaying a box with unequal sides that can be re-positioned by dragging is demonstrated in the live snippet using three.js (also available at jsfiddle.net/gpolyn/une6tst5/21). The green square dots dynamically indicate the extreme corners of the box in t ...

3dthree.js3d-modelling3d-model

Rearranging components in React does not automatically prompt a re-render of the page

I'm currently working on a project to display the update status of my Heroku apps. The issue I encountered was that the parent component (Herokus) was determining the order, but I wanted them sorted based on their update dates starting from the most r ...

javascriptreactjsherokuecmascript-6

Employing momentjs to configure a date to a particular language and region

I am facing an issue with my global locale variable, which is based on a user's preference. Even after passing this variable to moment along with a timestamp, the date continues to be displayed in English instead of the desired format for that locale. ...

javascriptmomentjs

The Bootstrap validator triggers the form submission only after the second click

When I click on the submit button, I am attempting to submit a form that has its default action prevented and first checks a condition before proceeding. Below is the code snippet: $('#payment-form').bootstrapValidator({ live: 'dis ...

javascriptjqueryformstwitter-bootstrapbootstrapvalidator

Which framework should be used: client-side or server-side?

I am working on a project similar to craiglist, where users can post announcements for everyday items like cars and flats. I have already developed a significant portion of the backend using a RESTful API in three-tier architecture with Java, connecting to ...

javascriptangularjsweb-servicesember.jsframeworks

The React form's onChange event is lurking just around the corner

I'm encountering some difficulties while creating a form with React, specifically with the password and confirm password fields. My goal is to enable users to input a password and have it instantly verified against the confirm password field to indic ...

javascriptreactjsvalidationfrontend

Securely transmit data using a JQuery modal dialog form with HTTPS encryption

I currently have a functional modal login dialog. The only issue I'm facing is that when the original page is loaded through http, I still need to securely pass credentials to the server via https. Ideally, I would like to achieve this with minimal mo ...

javascriptjqueryajaxjsonp