Turn off the orbit camera in three.js when utilizing the transform control

Question

Turn off the orbit camera in three.js when utilizing the transform control

In my project, I have a complex scene composed of multiple meshes, each assigned to a unique transformControl. To select different objects in the scene, I rely on raycasting techniques. Additionally, I utilize an orbit camera for navigating through the scene.

However, I've encountered an issue where when I adjust the position, rotation, or scale of an object using the transform control, the orbit camera remains active. This poses a problem as sometimes I inadvertently click on the background of the scene while selecting an object, causing the orbit camera to move unexpectedly.

I have attempted to resolve this issue by implementing various raycasting techniques, but unfortunately, none have been successful in preventing the unwanted behavior. If anyone has any suggestions or alternative solutions, I would greatly appreciate it.

javascript three.js transformation raycasting

Answer 1

Answer №1

Came across this and found it quite useful to find the answer (props to BuildingJarl):

// if you have a definition like
var controls = new THREE.OrbitControls( camera );

// you can easily turn it off with
controls.enabled = false;

In my situation, I encountered issues with a UI overlay and struggled to give it focus. Disabling the controls resolved my problems.

Best, Mat

Answer 2

Came across this and found it quite useful to find the answer (props to BuildingJarl):

// if you have a definition like
var controls = new THREE.OrbitControls( camera );

// you can easily turn it off with
controls.enabled = false;

In my situation, I encountered issues with a UI overlay and struggled to give it focus. Disabling the controls resolved my problems.

Best, Mat

Answer 3

Answer №2

Incorporating a snippet from the three.js editor's example code, one can easily deactivate orbitControls while utilizing transformControls:

import { OrbitControls } from 'three/addons/controls/OrbitControls.js';
import { TransformControls } from 'three/addons/controls/TransformControls.js';

let orbitControls= new OrbitControls(camera, renderer.domElement);
orbitControls.addEventListener('change', render);

let transformControls = new TransformControls(camera, renderer.domElement);
transformControls.addEventListener('change', render);
transformControls.attach(targetObject);
transformControls.addEventListener('dragging-changed', function (event) {
    orbitControls.enabled = !event.value;
});

Whenever controls are dragged, orbitControls will be disabled with orbitControls.enabled = false.

Note that in case you have

targetObject.matrixAutoUpdate = false

, it is essential to invoke targetObject.updateMatrix() prior to calling render in the change event handler.

Answer 4

Incorporating a snippet from the three.js editor's example code, one can easily deactivate orbitControls while utilizing transformControls:

import { OrbitControls } from 'three/addons/controls/OrbitControls.js';
import { TransformControls } from 'three/addons/controls/TransformControls.js';

let orbitControls= new OrbitControls(camera, renderer.domElement);
orbitControls.addEventListener('change', render);

let transformControls = new TransformControls(camera, renderer.domElement);
transformControls.addEventListener('change', render);
transformControls.attach(targetObject);
transformControls.addEventListener('dragging-changed', function (event) {
    orbitControls.enabled = !event.value;
});

Whenever controls are dragged, orbitControls will be disabled with orbitControls.enabled = false.

Note that in case you have

targetObject.matrixAutoUpdate = false

, it is essential to invoke targetObject.updateMatrix() prior to calling render in the change event handler.

Turn off the orbit camera in three.js when utilizing the transform control

Answer №1

Answer №2

Similar questions

Unable to dynamically display an HTML5 video using JavaScript

warning: issue detected with the password value in jquery

Building Vertical Tabs with external JS for loading custom visuals

Seeking assistance with changing the pages

What is the process through which Generator.next() works with its parameter?

Configuring Axios header in Java backend based on the value stored in the express session

Video DTO not defined with the utilization of a brightcove player

Exporting CSS file from css-loader in Webpack: A step-by-step guide

How to Use Conditional In-Line CSS for Internet Explorer and Other Browsers

tips for dealing with login pop-ups using Python's Selenium

Issue with saving Twitter stream data to MongoDB using Mongoose not being properly handled

Issue with unrecognized expression in JQuery when processing Ajax response

What is the best way to create a sign-up box that appears on the same page when you click on the sign-up button

Exploring the power of React Hooks with the useState() function and an array filled

The Ubuntu virtual machine hosted on Google Cloud is experiencing difficulties connecting through Node.js using an external IP address

Exploring the capabilities of JSON.stringify in Internet Explorer 11

How can we extract Euler angles from Trackball Controls in Three.js?

Using a combination of Javascript and PHP to dynamically update the innerHTML of multiple elements

Dealing with Uncaught Type Errors in the Fixed Data Table

Enhancing Security: Implementing Node.js API Authentication