DragControls began to work crookedly when the camera position changed

Created 3 buttons to switch camera mode:

  1. 3D mode: OrbitControls (PerspectiveCamera)
  2. 2D mode: OrbitControls (OrthographicCamera)
  3. Game mode: PointerLockControls (PerspectiveCamera)

Ok, cameras switch normally.

But I found a problem with DragControls:
— For example, I switch to 2D mode and select the cube using the dragstart events from DragControls. Ok, everything is fine, the cube is selected.
— Now I go into 3D mode and try to select a cube. Here the cube will no longer stand out !! Selection does not work.
I understood why “dragstart” stopped working on the cube, because when switching modes, the camera position changed and therefore raycaster DragControls began to work crookedly.

What can I do with DragControls to work fine? I want the select to always work normally in any camera mode. :roll_eyes:

Everytime Raycaster is used in DragControls for intersections tests, it prepares itself via the following code:

_raycaster.setFromCamera( _mouse, _camera );

Meaning the raycaster should always reflect the latest state of your camera. So please demonstrate the issue with a live example if this is not working.

Here’s an uploaded example - http://kibbler.full-stack.kz/
At startup, 2D mode is launched. The cube in the center can be selected and moved in different directions.

For example, I moved the cube to this point

Then I switched to 3D mode. I click on the cube and the cube does not selected.

If you click on the point where the cube was in mode 2D, then the click works there. The cube selected.

Here is the code:

class Drag {

constructor(objects, info = null, camera) {
    this.transform = new TransformControls(camera, renderer.domElement); this.transform.name = info;
    this.drag = new DragControls(objects, camera, renderer.domElement );
    this.objects = objects;
    this.mode = $('.gaming .window .control .active').data('mode');
    this.drag_group = false;
    this.elements = null;

init() {
    this.transform.addEventListener('dragging-changed', function (event) {
        camera.controls.view.enabled = !event.value

    let elements = {
        'transform': this.transform,
        'drag_group': this.drag_group,
        'lightHelperUpdate': this._lightHelperUpdate,
    this.elements = elements;

    this.drag.enabled = false;
    this.drag.addEventListener('dragstart', function (event) {
        if (drag_lock === false) {
            let picked;
            if (event.object.userData.type != 'world') {

                drag_lock = true;
            } else if (event.object.userData.type == 'world') {
                picked = event.object;

stop() {
    drag_lock= false;

    let selector_pick = $('#selector_pick');


destroy() {
    if(this.objects.length > 0) {
        for (let object in this.objects) {
            if(this.objects[object].userData.type == 'world') {
            if (this.transform.object !== undefined) {
                if(this.transform.object.parent.type == 'Group') {
                    if(this.objects[object].uuid == this.transform.object.parent.uuid) {

                        this.objects.splice(object, 1);
                        drag_lock = false;
                } else {
                    if(this.objects[object].uuid == this.transform.object.uuid) {

                        this.objects.splice(object, 1);
                        drag_lock = false;


let objects = [];
// Cube
let test_q = new THREE.BoxBufferGeometry(2,2,2);
let test_m = new THREE.MeshBasicMaterial({color: 0x8c170b});
let test_mesh = new THREE.Mesh(test_q, test_m);
crafter.load_id = 11;

/* --------------- Панель управление -------------- */
// Управление объектами сцены
let drag_lock = false;
let drag_objects = new Drag(objects, null, camera.camera);

up the post