Unusual happenings when adjusting camera settings in three.js

After creating a basic three.js application that displays a cube and includes buttons to set fixed camera positions, I encountered some unexpected behavior. You can view a demo of my code here: https://jsfiddle.net/ph0ropg7/9/

In my application, I have implemented the ability to switch to a top view using the TOP VIEW button, and to adjust the cube to fit the screen with the SHOW ALL button. However, I have observed three peculiar issues:

  • After panning and rotating the cube, pressing the SHOW ALL button results in a change in camera orientation when the cube adjusts to the screen size.

  • When switching to the top view using the dedicated button, it seems like the controls become unresponsive or locked.

  • If I select the top view by clicking the TOP VIEW button, and then drag before releasing the left mouse button, the controls behave erratically, causing the objects to vibrate in a strange and bothersome manner.

As a newcomer to three.js, I am struggling to understand why these issues are occurring. Any advice or suggestions on how to address these problems would be greatly appreciated. Thank you.

javascriptthree.jscameraorthographic

Answer №1

After examining the code in the OrthographicTrackballControls repository, I discovered that it utilizes the camera's lookAt method for resetting. This method aligns the camera with its up vector. To resolve the issue, it is necessary to eliminate the camera.lookAt(look_at_position); call in your ShowAll & ShowTop functions and include controls.up0.copy(camera.up); in your 

_reset_controls_after_camera_movement
method. This adjustment ensures that the control has the correct up vector and can execute the lookat action properly.

Here is a revised fiddle for reference.

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

Browsing HTML Documents with the Click of a Button

After collecting JSON data from a SharePoint list, I am currently in the process of creating an HTML Document. At this point, I have completed approximately 80% of the expected outcome. Due to Cross-Origin Resource Sharing (CORS) restrictions, I have hard ...

javascripthtmljquerycssjson

The image momentarily pauses as the arrow keys are switched

I have a query regarding the movement of the main player image. While it generally moves smoothly Left or Right, there is an issue when quickly switching directions from right to left. When the left key is pressed while the right key is still held down, th ...

javascriptcsshtml

Can you import a Three.js Editor export scene into React Three Fiber (r3f)?

As I was working on implementing a scene using Three.js Editor and r3f, I encountered a particular issue. Is there any problem with loading JSON data from an exported file? function Scene() { const gltf = useLoader (GLTFLoader, '/app.json') ...

reactjsthree.jsreact-three-fiber

Issue encountered while loading JSON data into DynamoDB's local instance

I have successfully set up DynamoDB local and everything is functioning as expected after going through their documentation. I have also tested their example code, which worked flawlessly. The Users table has been created with the name "Users". Below is ...

javascriptjsonamazon-dynamodb

Struggling with a TypeORM issue while attempting to generate a migration via the Command Line

Having some trouble using the TypeORM CLI to generate a migration. I followed the instructions, but when I run yarn run typeorm migration:generate, an error pops up: $ typeorm-ts-node-commonjs migration:generate /usr/bin/env: ‘node --require ts-node/regi ...

javascripttypescriptyarnpkgtypeorm

Unveiling the secret to organizing messy code in node_modules for better readability in React applications

When I need to access files in node modules, I often come across compressed code that is difficult to read. My prettier formatter doesn't seem to format these files. Is there a way to clean up the raw code and make it more readable, similar to regular ...

javascriptnode.jsreactjsnode-modules

The functionality for tabbed content seems to be malfunctioning on Chrome and Firefox, however it works perfectly

In my index.js file, I have various functions set up like so: // a and b is placed at index.jsp $("#a").click(function (){ //this works on index.jsp and display.jsp(where the servlets forwards it). $("#b").load('servletA.html?action=dis ...

javascriptjqueryhtmljsp

Implementing additional states in an AngularJS app configuration with Ui-Router

Currently tackling a major application with numerous routes for its different components, my team and I have decided to break down the routes into separate files instead of cramming everything into one large file. In attempting to create a variable and im ...

javascriptangularjsangular-ui-routerangular-ui-router-extras

Nested solution object populated with promises

Looking for a solution similar to the npm libraries p-props and p-all, but with the added functionality of recursively resolving promises. const values = { a: () => Promise.resolve(1), b: [() => Promise.resolve(2)], c: { d: () =&g ...

javascriptobjectnpmrecursionpromise

Attempting to perform recursion on two functions simultaneously may result in one of the functions being undefined

There is a page on my site that clients tend to keep open for long periods of time without refreshing, sometimes over 24 hours. Some of the actions on this page require a valid PHP session, so I created a simple set of functions to check this every 10 minu ...

javascriptjqueryfunctionrecursionundefined

Switch between playing and pausing the mp3 audio in the Next application by using the toggle

I am currently working on my website and I have been trying to add a button to the bottom of the page that can play or pause a song using useSound library. The song starts playing when I click it for the first time, however, I am facing difficulty in stopp ...

javascriptreactjsnext.jsusesound

"Troubleshooting: Next.js useEffect and useState hooks fail to function properly in a

Working on my project in nextjs, I've implemented the useEffect and useState hooks to fetch data: export default function PricingBlock({ data }) { const [pricingItems, setPricingItems] = useState() const [featuredItem, setFeaturedItem] = useState( ...

javascriptreactjsnext.js

Having trouble getting an AjaxBeginForm to function properly within a JQuery script on a PartialView

Within the main controller view, we bring in the partial view utilizing the following code: @Html.Partial("MapPartial", Model) Within the Partial View, I aim to display a map. Currently, there is an Ajax beginform with a submit button that ...

javascriptjqueryajaxasp.net-mvc

Populating options in <select> for Internet Explorer version 5

Let me address the first question here. The reason why I am using IE5 is because I am working on a Windows CE device which limits me to this browser. My application involves a webpage with various elements. In my HTML code, I have two text fields and a se ...

javascripthtml

Display multiple markers on a Google Map using google-map-react library

I am currently struggling to display markers on my Google Map using the map function. I have tried various approaches but nothing seems to work. Could there be limitations that I'm not aware of, or am I overlooking something critical? I experimented w ...

javascriptreactjsgoogle-map-react

Step-by-step guide on displaying a tag image in HTML using html2canvas

html2canvas($('#header'), { allowTaint: true, onrendered: function (canvas) { var imgData = canvas.toDataURL("image/png"); console.log(imgData); } }); click here for an example ...

javascriptjqueryhtmlhtml2canvas

HighCharts: visualize vertical stacked bars displaying the distribution of percentages within each stack

I currently have a stacked bar chart similar to the one shown in this JSFiddle demo. My goal is to transform the stacks so that each bar represents a percentage of the total stack height. For instance, in the Apples stack we currently have values {3, 2, 5 ...

javascripthighcharts

Can someone help me understand why my component is not rendering when placed inside a conditional block, but it renders fine on its own?

I want to display a specific page only if the user is currently logged in; otherwise, prompt them to log in. My approach involves leveraging Firebase authentication for this functionality. import Head from "next/head"; import { auth } from "../../comp ...

javascriptreactjsfirebasenext.jsfirebase-authentication

How can you extract the text associated with the chosen value in a dropdown list implemented in JavaScript?

Hello, I've been having difficulty extracting the value from a dropdown list created using the FacetWP plugin. Despite extensive research and numerous attempts using various methods to retrieve the text value from the list, I have not been successful. ...

javascriptjqueryhtmlajaxdropdown

Achieving proper HTML element order?

Here is the HTML page I am working with: Click here to view the code on jsfiddle <!DOCTYPE html> <html> <head> <meta charset="UTF-8" /> <title>Extended UI</title> <style type="text/css"> .header{ padding-rig ...

javascriptjqueryhtmlcss