Move the object by clicking on it and dragging

Question

Move the object by clicking on it and dragging

I need help figuring out how to move my 3D object in .gltf format to a different position when a checkbox is checked, and then back to its original position when the checkbox is unchecked. I attempted to create a transition function for this purpose, but the object doesn't seem to respond correctly to the checkbox.

Below is the code for my function:

function zoom() {
                    var move = document.getElementById('controllr');
                    if (move.checked) {
                        model2.position.set(0, 50, 0);
                    } else {
                        model2.position.set(0, 25, 0);
                    }
                }

Any solutions or advice on how to achieve this would be greatly appreciated. I have also posted the full code in a new thread here: Moving object on checkbox event

javascript three.js

Answer 1

Answer №1

Have you identified the exact moment when the zoom function is being called in your code? Embedding this snippet within an event listener could potentially resolve any issues.

let controller = document.getElementById('controller');
controller.addEventListener('change', (event) => {
  if (event.currentTarget.checked) {
    model.position.set(0, 50, 0);
  } else {
    model.position.set(0, 25, 0);
  }
}

Answer 2

Have you identified the exact moment when the zoom function is being called in your code? Embedding this snippet within an event listener could potentially resolve any issues.

let controller = document.getElementById('controller');
controller.addEventListener('change', (event) => {
  if (event.currentTarget.checked) {
    model.position.set(0, 50, 0);
  } else {
    model.position.set(0, 25, 0);
  }
}

Move the object by clicking on it and dragging

Answer №1

Similar questions

Angular 4 is unable to attach to 'formGroup' as it is not recognized as a valid property of 'form'

Is it possible to emphasize a duration of 25 minutes on an analog clock by utilizing CSS gradients?

Connect select with an array of objects and showcase information when an item is chosen from the dropdown menu

Impressive javascript - extract file from formData and forward it

What is the process for sending a POST request from a React app to a Node.js Express server?

Is there a way to effectively organize an RSS feed using the .isoDate parameter while ensuring that the feed's elements remain interconnected (such as title and link)?

React-Redux is throwing a TypeError due to its incapability of reading the property 'map' which is undefined

Issue on Heroku with Discord.js displaying a "Service Unavailable" message

Device sending incorrect JSON format

Sort through the JSON data and showcase it in a gridded format

What is the best way to send variables from JavaScript to PHP while utilizing Ajax technology?

Utilizing Kendo for Dynamic HTML Element Connection

Retrieve, establish cookies, and guard against CSRF attacks

Using JQuery to swap out background images in CSS

Monitor Socket IO for client disconnection events

Is there a way to efficiently clear the Express session for all users without the need to restart the application?

Utilizing jQuery and DOM to interact with form elements

Trying to modify the chosen option while filtering an ajax source using select2?

Displaying URLs stylishly with Pills Bootstrap

Effectively detect the 'scrollend' event on mobile devices