mini games

src/lib/gameEngine.js

@@ -14,6 +14,7 @@ import { ARButton } from 'three/addons/webxr/ARButton.js';
 import { XRButton } from 'three/addons/webxr/XRButton.js';
 import { XRControllerModelFactory } from 'three/addons/webxr/XRControllerModelFactory.js';
 import * as CANNON from 'cannon-es';
+import { Clickable } from './Clickable.js';
 
 class GameEngine {
     async init(domNode, opts = {}) {
@@ -68,8 +69,8 @@ class GameEngine {
         const renderer = new THREE.WebGLRenderer({
             antialias: true,
             // alpha: true,
-            preserveDrawingBuffer: true //this is important for screenshots capturing
-            //powerPreference: "high-performance",
+            preserveDrawingBuffer: true, //this is important for screenshots capturing
+            powerPreference: "high-performance",
         });
         renderer.setPixelRatio(window.devicePixelRatio);
         // renderer.toneMapping = THREE.CineonToneMapping;
@@ -173,6 +174,8 @@ class GameEngine {
             } : {}));
             this.initXrControllers();
         }
+
+        this.clickable = new Clickable(20);
     }
 
     initXrControllers() {
@@ -466,6 +469,12 @@ class GameEngine {
         return intersects;
     }
 
+    onClick(mouseEvent, domElement){
+        let mouse = this.getMouseVector(mouseEvent, domElement);
+        this.raycaster.setFromCamera(mouse, this.camera);
+        this.clickable.update(mouse, this.camera, mouseEvent);
+    }
+
     autoScale(object, mk = 1) {
         let bb = new THREE.Box3().setFromObject(object);
         let k = Math.max(bb.max.x - bb.min.x, bb.max.y - bb.min.y, bb.max.z - bb.min.z);