DragControls began to work crookedly when the camera position changed

Questions
1

Hey.
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:

2

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.

3

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

уу1
уу11459×903 26.6 KB

Then I switched to 3D mode. I click on the cube and the cube does not selected.
уу2
уу21461×915 272 KB

If you click on the point where the cube was in mode 2D, then the click works there. The cube selected.
уу33
уу331463×915 272 KB

Here is the code:

class Drag {

constructor(objects, info = null, camera) {
    console.log(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.setMode(this.mode);
    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) {
        console.log(event.object);
        if (drag_lock === false) {
            let picked;
            if (event.object.userData.type != 'world') {

                elements.transform.attach(picked);
                scene.add(elements.transform);
                drag_lock = true;
            } else if (event.object.userData.type == 'world') {
                picked = event.object;
            }
        }
    });
}

stop() {
    this.transform.detach();
    drag_lock= false;

    let selector_pick = $('#selector_pick');
    selector_pick.text('');
    selector_pick.closest('.left').removeClass('active');

    selector.destroy();
}

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

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

                        this.objects.splice(object, 1);
                        this.transform.detach();
                        drag_lock = false;
                    }
                }
            }
        }
    }
    selector.destroy();
}

}

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);
scene.add(test_mesh);
objects.push(test_mesh);
crafter.load_id = 11;

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

up the post