Having trouble with sluggish performance on openbim-components? The OrthoPerspectiveCamera tends to slow down or get stuck when zooming

While using the OrthoPerspectiveCamera in my App (from openbim-components package), I am facing an issue. Whenever I zoom into my model, it automatically switches to FirstPerson mode. This change makes it extremely slow to navigate and zoom in/out of the scene. I am looking for a way to prevent this automatic mode switch with OrthoPerspectiveCamera. Is there any option within the class or something similar that can help?

Upon attempting to zoom into a model, the camera transitions to first person mode on its own, resulting in sluggish movement. It hinders smooth navigation around the scene. My preference is for the camera to remain in orbit mode at all times.

javascriptthree.jsifc

Answer №1

One interesting discovery is that Open BIM components are utilizing the camera controls package from this link: https://github.com/yomotsu/camera-controls. The main issue seems to lie with the default dolly setup.

Essentially, to resolve this issue, you must set the infinityDolly property to true and adjust the minimum and maximum distance values to properly position the target:

const cameraComponent =
  new OBC.OrthoPerspectiveCamera(viewer);
cameraComponent.controls.infinityDolly = true;
    cameraComponent.controls.minDistance = 3;
    cameraComponent.controls.maxDistance =5;

Take a look at the sample provided here:

I hope this information proves helpful!

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 best way to save the toggleClass value of various selectors along with their corresponding classes in localStorage?

I've been attempting to preserve the toggled class of multiple elements using local storage or cookies in order to maintain the toggled class after a page refresh. Despite trying various solutions such as js cookie and other tutorials, I've had n ...

javascriptjqueryhtmlcookieslocal-storage

Tips for aligning a 3D object with its orientation and the ground?

I'm working on a game where characters navigate a 3D terrain as if it were a 2D map. Each character moves with a direction and rotation on a 2D plane. As the characters move across the terrain, I want them to rotate so they are properly oriented rela ...

math3dthree.js

Transfer the document into JavaScript by copying and pasting

I am in need of some assistance with a basic form that includes an input field. While the form is functional, I would like to provide users with the option to upload a file by simply pasting it into the browser using CTRL+V. Is there a way to achieve this ...

javascripthtml

Creating dynamic headers in Axios within an ExpressJS application

I have a specific requirement that calls for setting a custom Request-Id header for each axios request. The value of this header is generated dynamically by a separate express middleware. While I could manually set the header like this: axios.get(url, he ...

javascriptexpressaxios

Showcasing a JSON attribute in the title using AngularJS

I'm struggling to display the Title of a table. Here is where I click to open a "modal" with the details: <td><a href="#" ng-click="show_project(z.project_id)">{{z.project}}</a></td> This is the modal that opens up with det ...

javascripthtmlangularjsjson

Tips on successfully transferring a JavaScript variable from PHP to JavaScript

I am struggling with how to manipulate a JavaScript variable in my HTML script and then pass it to a PHP file for incrementing by 1. However, I am unsure of how to return this modified variable back to the HTML file for display. Additionally, I am uncertai ...

javascriptphphtmlvariablesincrement

Assigning a unique identifier to a button that will vary depending on the selected radio input

UPDATED HTML: The circumstances have changed because I am no longer in my office, but the concept remains unchanged. The situation is that on a certain part of a website, users have the option to choose from multiple saved addresses. Each address has a un ...

javascriptjqueryhtmlformsdynamic

Utilize jQuery to deactivate all click interactions except for the scrollbar

I am currently working on creating a page that is completely unclickable, both with right and left clicks, and I want to display a message when someone attempts to click. This may lead to some questions such as "Why would anyone want to do this? This s ...

javascriptjquery

Looking for non-case-sensitive letters in a text input field

Having trouble with case-insensitive search using jquery? The search option seems to be working fine, but there's an issue with uppercase and lowercase letters in the content. Check out my full code on jsfiddle where if I search for "senthil" it doesn ...

javascriptjquerysearchcase-insensitive

The tablesort feature is experiencing difficulty sorting tables with dynamically changing content

I have a question about sorting columns in a PHP file that calls a JS file. The PHP file contains two tables with the table sorter plugin implemented, but one of them works and the other doesn't. The working table is populated through an Ajax call, wh ...

javascriptphpjqueryajaxtablesorter

The button should only be visible when the input is selected, but it should vanish when a different button within the form is

Having an issue with displaying a button when an input field is in focus. The "Cancel" button should appear when a user interacts with a search bar. I initially used addEventListener for input click/focus to achieve this, but ran into a problem: on mobile ...

javascripthtmlbuttoninputaddeventlistener

Personalizing text in HTML using JavaScript results

I have a modal dialog box function that pops up when a user clicks a button, triggered by a javascript/jquery script. The text displayed in the dialog is set up within an HTML div element that references the script function. My query is how to personalize ...

phpjavascriptjquery

Using Router.back in Next.js triggers a complete page refresh

I am working on a page called pages/conversations/[id].tsx, and here is the code: import Router, { useRouter } from 'next/router' export default function ConversationPage() { const router = useRouter() ... return ( <View ...

javascriptreact-routernext.js

"Trouble encountered while trying to display Angular in an HTML document

In my Angular project, there is a feature where a list of orders is displayed in one view. Each order is represented by its title only. When the user clicks on the title, they should be redirected to a new view showing the complete content of that particul ...

javascripthtmlangularjs

What is the best way to initiate a re-render after updating state within useEffect()?

I'm currently strategizing the structure of my code using React hooks in the following manner: Implementing a state variable to indicate whether my app is loading results or not The loading state turns to true when useEffect() executes to retrieve da ...

javascriptreactjs

I'm having trouble locating the documents I recently saved in my mongoose model

Here is my current challenge: I am populating a collection called "fruits" with some values. Once the data has been inserted, I want to use map to console.log each fruit individually. However, during the first attempt, instead of displaying a single fruit ...

javascriptnode.jsmongoose

Utilize PHP to transform JSON data into JavaScript

Hello, I am a newcomer to Stackoverflow and I need some assistance. My issue involves converting JSON with PHP to JavaScript. I am using PHP to fetch data from a database and create JSON, which I then want to convert for use in JavaScript as an object (obj ...

javascriptphpjson

Retrieve the child DIV element within its sibling without using an identifier

I have a setup similar to the following: <div class="panel panel-primary"> <div class="panel-heading"> <h3 class="panel-title">Tiger128 (v2)</h3> </div> <div class="panel-body"> <inp ...

javascriptjqueryhtml

Blur function not performing as anticipated

I am attempting to achieve a blur effect on a dialog pop-up. Currently, I am using the primeng p-dialog component for this purpose. <p-panelMenu [model]="items" [style]="{'width':'300px'}"></p-panelMenu> <p-dialog head ...

javascripthtmlcssangularprimeng

Submitting form based on HTML select input issue

I am facing an issue with a select form where the value resets to "10" every time I send the form. Is there a way to keep the selected option, for example "20", after submitting the form? Below is the code snippet: <form method='get' name=&a ...

javascriptjqueryhtml