Developing controls for vertical movement

Question

Developing controls for vertical movement

if ( upDownMovement == true) {  
                        SELECTED.position.y = mouse.y * scale;
                              }

In my attempt to create a vertical movement control that only allows for direct up and down motion along the Y-axis, I discovered a critical flaw in my implementation. The issue lies in the discontinuity between the initial mouse position and the model's original position, resulting in a noticeable "jump" at the beginning of the movement.

I am now seeking guidance on the correct approach to implementing this type of control. If there are any libraries or resources available that excel in this area, I would greatly appreciate any recommendations.

One potential solution I'm considering is modifying the code to read as follows: SELECTED.position.y = SELECTED.position.y + mouse.y * scale; however, I am open to suggestions and feedback from experienced developers.

javascript opengl-es three.js

Answer 1

Answer №1

It is important to capture the initial mouse position when upDownMovement becomes true and use it as a reference point. Here is an example:

if (upDownMovement == true) {
  mouse_y_reference = mouse_y_reference || mouse.y;
  SELECTED.position.y += (mouse.y - mouse_y_reference) * scale;
} else {
  mouse_y_reference = null;
}

For a smoother movement, consider using an animation library like tween.js with the following approach:

mouse_y_reference = mouse_y_reference || mouse.y; // ensure this variable is declared in a higher scope
var toY = SELECTED.position.y + (mouse.y - mouse_y_reference) * scale;
new TWEEN.Tween(SELECTED.position)
  .to({ y: toY }, 100) // adjust the duration as needed
  .easing( TWEEN.Easing.Elastic.InOut )
  .onComplete(function() {
    mouse_y_reference = null;
  })
  .start();

Answer 2

It is important to capture the initial mouse position when upDownMovement becomes true and use it as a reference point. Here is an example:

if (upDownMovement == true) {
  mouse_y_reference = mouse_y_reference || mouse.y;
  SELECTED.position.y += (mouse.y - mouse_y_reference) * scale;
} else {
  mouse_y_reference = null;
}

For a smoother movement, consider using an animation library like tween.js with the following approach:

mouse_y_reference = mouse_y_reference || mouse.y; // ensure this variable is declared in a higher scope
var toY = SELECTED.position.y + (mouse.y - mouse_y_reference) * scale;
new TWEEN.Tween(SELECTED.position)
  .to({ y: toY }, 100) // adjust the duration as needed
  .easing( TWEEN.Easing.Elastic.InOut )
  .onComplete(function() {
    mouse_y_reference = null;
  })
  .start();

Developing controls for vertical movement

Answer №1

Similar questions

Encountering issues with tesseract callbacks in nodejs due to validation errors

Deactivate Mongoose connection in Node.js after completing tasks

Reveal the array on the frontend in a row each time using Javascript

Asynchronously retrieving results in MongoDB

Turn off a feature

Transform Python list into a JavaScript array

Why is there a blank white space under my image in Safari?

Employ node's gm library in combination with promises and buffers

Objects within objects in TypeScript

Embracing unconventional attributes within AngularJS

Tips on passing a variable into a controller using jQuery AJAX from the URL

Creating Bi-directional Computed Properties with Vue.js Class Components

When working with THREE.js in Electron, web development tools seem to vanish into thin air

What is the process for obtaining a Facebook page ID using the Facebook page name?

Discover the hex codes for automatically generated shades in the Material UI Color Palette

Error: The property 'condition' is not defined and cannot be read

What is the process for creating URL query parameters?

Using jQuery to bind the "CTRL+A" key combination to exclusively selecting a specific region

The blend of Combination and Advanced Timeline triggers a "ReferenceError: Highcharts is not defined" error

Is there a way to utilize JSON parse for converting deeply nested keys from underscore to camelCase?