XR controllers on scene

src/lib/GameEngine.js

@@ -245,8 +245,8 @@ class GameEngine extends EventManager{
             this.initXr();
         }
 
-        this.clickable = new Clickable(20);
-        this.draggable = new Draggable(20);
+        this.clickable = new Clickable(this, 20);
+        this.draggable = new Draggable(this, 20);
     }
 
     initXr() {
@@ -261,7 +261,7 @@ class GameEngine extends EventManager{
             // this.session = this.renderer.xr.getSession();
             // this.session.addEventListener('selectstart', this.onControllerEvent.bind(this));
         })
-        this.scene.add(c1);
+        this.cameraRig.add(c1);
 
         let c2 = this.renderer.xr.getController(1);
         c2.addEventListener('select', this.onSelect.bind(this));
@@ -272,17 +272,17 @@ class GameEngine extends EventManager{
         c2.addEventListener('connected', e => {
             c2.gamepad = e.data.gamepad;
         })
-        this.scene.add(c2);
+        this.cameraRig.add(c2);
 
         const controllerModelFactory = new XRControllerModelFactory();
 
         let controllerGrip1 = this.renderer.xr.getControllerGrip(0);
         controllerGrip1.add(controllerModelFactory.createControllerModel(controllerGrip1));
-        this.scene.add(controllerGrip1);
+        this.cameraRig.add(controllerGrip1);
 
         let controllerGrip2 = this.renderer.xr.getControllerGrip(1);
         controllerGrip2.add(controllerModelFactory.createControllerModel(controllerGrip2));
-        this.scene.add(controllerGrip2);
+        this.cameraRig.add(controllerGrip2);
 
         const geometry = new THREE.BufferGeometry().setFromPoints([new THREE.Vector3(0, 0, 0), new THREE.Vector3(0, 0, - 1)]);
 
@@ -379,14 +379,10 @@ class GameEngine extends EventManager{
     }
 
     onControllerEvent(event) {
-        //this.handleXrAction(event, this);
-        //event.type !== 'move' && console.log(event)
         const controller = event.target;
-        //console.log(event)
+        if (!controller.userData?.active) return;
         
         if (this.opts.designMode){
-            if (!controller.userData) return
-            if (controller.userData.active === false) return;
             this.transformControls.getRaycaster().setFromXRController(controller);
             switch (event.type) {
                 case 'selectstart':
@@ -400,26 +396,27 @@ class GameEngine extends EventManager{
                     this.transformControls.pointerMove(null);
                     break;
             }
+        }else{
+            this.draggable?.handleController(controller, event.type)
         }
     }
 
     onSelect(event) {
         const controller = event.target;
+        this.xrController1.userData.active = false;
+        this.xrController2.userData.active = false;
+
+        if (controller === this.xrController1) {
+            this.xrController1.userData.active = true;
+            this.xrController1.add(this.controllerLine);
+        }
+
+        if (controller === this.xrController2) {
+            this.xrController2.userData.active = true;
+            this.xrController2.add(this.controllerLine);
+        }
 
         if (this.opts.designMode){
-            this.xrController1.userData.active = false;
-            this.xrController2.userData.active = false;
-
-            if (controller === this.xrController1) {
-                this.xrController1.userData.active = true;
-                this.xrController1.add(this.controllerLine);
-            }
-
-            if (controller === this.xrController2) {
-                this.xrController2.userData.active = true;
-                this.xrController2.add(this.controllerLine);
-            }
-
             this.raycaster.setFromXRController(controller);
             const intersects = this.raycaster.intersectObjects(this.activeObjects.children, true);
 
@@ -434,6 +431,8 @@ class GameEngine extends EventManager{
                     this.transformControls.attach(intersects[0].object);
                 }, 100);
             }
+        }else{
+            this.clickable.handleController(controller, event);
         }
     }
 
@@ -525,14 +524,14 @@ class GameEngine extends EventManager{
 
     onClick(mouseEvent, domElement){
         let mouse = this.getMouseVector(mouseEvent, domElement);
-        this.raycaster.setFromCamera(mouse, this.camera);
-        this.clickable.update(mouse, this.camera, mouseEvent);
+        //this.raycaster.setFromCamera(mouse, this.camera);
+        this.clickable.handleMouse(mouse, mouseEvent);
         this.hero?.idleReset();
     }
 
     onPointer(mouseEvent, domElement, type){
         let mouse = this.getMouseVector(mouseEvent, domElement);
-        this.draggable?.update(mouse, this.camera, type);
+        this.draggable?.handleMouse(mouse, type);
     }
 
     setCamera(camera) {