Unresponsive Three.js OrbitControls

Question

Unresponsive Three.js OrbitControls

*Update: I'm feeling a bit confused because I don't believe my function is causing this issue. It seems that simply double-clicking without moving the mouse triggers this behavior consistently, even in the Three.js example.

I'm still unsure how to eliminate this behavior or if it's a deliberate feature.

Whenever I double-click on the scene, a function is triggered to smoothly reset the camera to its original position. However, after the reset, any attempt to move with OrbitControls results in the cursor changing to not-allowed and the controls barely rotate before coming to a halt. The only way to regain control is by single-clicking on the canvas without dragging, which resets the controls to a functional state.

When I remove the resetPosition function, which gradually moves the camera back to the origin, the controls mostly work as intended. I've checked the code and can't identify any obvious cause.

*A similar issue occurs inconsistently when double-clicking, especially when quickly dragging the controls on the second click, even without resetPosition. The presence of resetPosition just makes the issue more predictable. This behavior can be observed even in this official Three.js example.

View an image of the issue, as I can't directly post images on StackOverflow

How can I prevent this issue? I've come across several Three.js examples that don't have this problem, but I'm unsure what sets them apart.

Here is the relevant code snippet:

this.controls = new OrbitControls(this.camera, this.element)
this.controls.target.set(CONTROLS_TARGET.x, CONTROLS_TARGET.y, CONTROLS_TARGET.z)
this.controls.userRotateSpeed = 3
this.controls.maxDistance = 200
this.controls.minDistance = 10

resetPosition() {
    let azimuthalAngle = this.controls.getAzimuthalAngle(),
        polarAngle = this.controls.getPolarAngle() - Math.PI / 2,
        distance = this.controls.getDistance() - 30,
        movement = this.controls.target.clone()

    let lerpDelta = LERP_ALPHA ** (1 + this.deltaTime * 60)

    if (Math.abs(azimuthalAngle) < 0.001) azimuthalAngle = 0
    if (Math.abs(polarAngle) < 0.001) polarAngle = 0
    if (Math.abs(distance) < 0.001 && Math.abs(distance) > -0.001) distance = 0
    if (movement.distanceTo(CONTROLS_TARGET) < 0.05) movement = CONTROLS_TARGET

    this.controls.minAzimuthAngle = lerpDelta * azimuthalAngle
    this.controls.maxAzimuthAngle = this.controls.minAzimuthAngle

    this.controls.minPolarAngle = Math.PI/2 + lerpDelta * polarAngle
    this.controls.maxPolarAngle = this.controls.minPolarAngle

    this.controls.minDistance = lerpDelta * distance + 30
    this.controls.maxDistance = this.controls.minDistance

    movement.lerp(CONTROLS_TARGET, 1.0 - lerpDelta)
    this.controls.target.set(movement.x, movement.y, movement.z)

    if(azimuthalAngle === 0
        && polarAngle === 0
        && distance === 0
        && movement.equals(CONTROLS_TARGET)
    ) this.finishReset()
}

finishReset() {
    this.controls.minAzimuthAngle = -Infinity
    this.controls.maxAzimuthAngle = Infinity
    this.controls.minPolarAngle = 0
    this.controls.maxPolarAngle = Math.PI
    this.controls.minDistance = 10
    this.controls.maxDistance = 200
    this.doReset = false
}

animate() {
    if (this.doReset) this.resetPosition()
    this.controls.update()
    
    this.render()
}

javascript three.js orbitcontrols

Answer 1

Answer №1

You may be experiencing difficulties due to how the resetPosition() function is being handled in conjunction with continuous updates to the OrbitControls during the animation loop. When you double-click on the scene, the resetPosition() function is triggered, smoothly resetting the camera position. This process involves adjusting the min/max azimuthal and polar angles, as well as the min/max distance of the OrbitControls to prevent the camera from moving during the reset.

The issue arises when these constraints are continuously modified during the animation loop. The resetPosition() function is being called on every frame when this.doReset is true, potentially disrupting the smooth operation of the OrbitControls and leading to the described undesired behavior.

To resolve this, consider implementing the following changes:

Ensure that the resetPosition() function is only called once when double-clicking to reset the camera. Use a flag to signal the start of the reset process and clear the flag once the reset is completed.
Avoid continuously updating the min/max azimuthal and polar angles, as well as min/max distance, within the resetPosition() function. Instead, set these constraints during the OrbitControls initialization phase.

Below is an altered version of your code:

// Initialization code
this.controls = new OrbitControls(this.camera, this.element);
this.controls.target.set(CONTROLS_TARGET.x, CONTROLS_TARGET.y, CONTROLS_TARGET.z);
this.controls.userRotateSpeed = 3;
this.controls.maxDistance = 200;
this.controls.minDistance = 10;

// Flag to trigger reset process
this.doReset = false;

// Function to handle double-click event
function onDoubleClick() {
  this.doReset = true;
}

// Double-click event listener on canvas
this.element.addEventListener('dblclick', onDoubleClick.bind(this));

// Function to reset camera position
function resetPosition() {
  // Reset logic here
}

function finishReset() {
  // Code to finalize reset
}

function animate() {
  if (this.doReset) {
    resetPosition.call(this);
  }
  this.controls.update();
  this.render();
}

// Add animate function call in main animation loop

Ensuring that the resetPosition() function is only triggered once during double-click events and setting constraints during initialization should enable smooth operation of the OrbitControls without encountering the cursor issue.

Answer 2

You may be experiencing difficulties due to how the resetPosition() function is being handled in conjunction with continuous updates to the OrbitControls during the animation loop. When you double-click on the scene, the resetPosition() function is triggered, smoothly resetting the camera position. This process involves adjusting the min/max azimuthal and polar angles, as well as the min/max distance of the OrbitControls to prevent the camera from moving during the reset.

The issue arises when these constraints are continuously modified during the animation loop. The resetPosition() function is being called on every frame when this.doReset is true, potentially disrupting the smooth operation of the OrbitControls and leading to the described undesired behavior.

To resolve this, consider implementing the following changes:

Ensure that the resetPosition() function is only called once when double-clicking to reset the camera. Use a flag to signal the start of the reset process and clear the flag once the reset is completed.
Avoid continuously updating the min/max azimuthal and polar angles, as well as min/max distance, within the resetPosition() function. Instead, set these constraints during the OrbitControls initialization phase.

Below is an altered version of your code:

// Initialization code
this.controls = new OrbitControls(this.camera, this.element);
this.controls.target.set(CONTROLS_TARGET.x, CONTROLS_TARGET.y, CONTROLS_TARGET.z);
this.controls.userRotateSpeed = 3;
this.controls.maxDistance = 200;
this.controls.minDistance = 10;

// Flag to trigger reset process
this.doReset = false;

// Function to handle double-click event
function onDoubleClick() {
  this.doReset = true;
}

// Double-click event listener on canvas
this.element.addEventListener('dblclick', onDoubleClick.bind(this));

// Function to reset camera position
function resetPosition() {
  // Reset logic here
}

function finishReset() {
  // Code to finalize reset
}

function animate() {
  if (this.doReset) {
    resetPosition.call(this);
  }
  this.controls.update();
  this.render();
}

// Add animate function call in main animation loop

Ensuring that the resetPosition() function is only triggered once during double-click events and setting constraints during initialization should enable smooth operation of the OrbitControls without encountering the cursor issue.

Unresponsive Three.js OrbitControls

Answer №1

Similar questions

Feature for jotting down notes, creating a break between lines without any information present

When a page with parameters is reloaded, React fails to initiate

React - Refreshing a component with the help of another component

Chrome extensions using Cross-Origin XMLHttpRequest

Tips for creating a fading effect when hovering over a div element

Selecting dates based on week number

Tips for handling Promise.all and waiting for all promises to resolve in an async function in Express JS

Increase the options available in the dropdown menu by adding more selected items, without removing any already selected

Converting Greek text to UTF-8 using Javascript

angular5: The ngFor directive will only function properly after the second button click

Personalized information boxes for particular data points within highcharts

What is the threading model utilized by node.js?

Issue with implementing MUI Style Tag in conjunction with styled-components and Typescript

Steps to dynamically adjust an element's width in CSS depending on the presence of a separate element

Tips for incorporating an outside model into vue.js with babylon js

The functionality of JavaScript on an icon that is supposed to expand and collapse a table is not functioning properly when the enter

Highlighting a Table Column with a Radio Button

Navigating through Node's asynchronous behavior

Error: The property 'target' cannot be read

Utilize Node.js and Socket.IO to download a PNG image in a web browser