xr gamepad designmode controls

src/components/AssetsManagement/AssetPreview.vue

@@ -58,7 +58,8 @@ export default{
             this.gameEngine = gameEngine;
             await gameEngine.init(this.$refs.target, {
                 gizmo: true, 
-                xr: true, 
+                xr: true,
+                mode: 'ObjectPreview'
             });
             await this.loadAsset();
         }

src/components/InteractiveObjects/InteractiveObject.js

@@ -1,7 +1,7 @@
 import { Group, MeshStandardMaterial, Mesh, SphereGeometry, Vector3 } from "three";
 import { EventManager } from '@/lib/EventManager';
 
-import { GenericObject } from "./GenenricObject";
+import { GenericObject } from "./GenericObject";
 import { TextObject } from "./TextObject";
 import { ImageObject } from "./ImageObject";
 import { GltfObject } from "./GltfObject";

src/lib/Dashboard.js

@@ -94,7 +94,7 @@ class DashBoard extends EventManager {
 		const text = new Text()
 		Object.assign(text, {
 			text:``, 
-			fontSize: 0.033 * dashHeight, lineHeight: 1 * dashHeight, maxWidth: dashWidth * 0.8,
+			fontSize: 0.033 * dashHeight, lineHeight: 1.33, maxWidth: dashWidth * 0.8,
 			textAlign: 'center', font: '/static/fonts/Montserrat-Regular.ttf',
 			anchorX: 'center', anchorY: 0.03 * dashHeight, depthOffset: 0.1, color: 0x000000,
 			clipRect: [-dashWidth * 0.4, -0.12 * dashHeight, dashWidth * 0.4, 0]

src/lib/GameEngine.js

@@ -50,38 +50,36 @@ class GameEngine extends EventManager{
 
         this.initCameraPivot()
 
-        // let light = new THREE.AmbientLight( 0x404040, 24 ); // soft white light
+        this.ambientLight = new THREE.AmbientLight( 0x404040, 11 ); // soft white light
-        // scene.add( light );
+        scene.add( this.ambientLight );
 
-        var hemiLight = new THREE.HemisphereLight( 0xffffff, 0x444444 );
+        // var hemiLight = new THREE.HemisphereLight( 0xffffff, 0x444444, 10 );
-        hemiLight.position.set(0, 33, 0);
+        // hemiLight.position.set(0, 33, 0);
-        scene.add( hemiLight );
+        //scene.add( hemiLight );
-
-        const dirLight = new THREE.DirectionalLight(0xffffff, 0.51);
-        dirLight.color.setHSL(0.1, 1, 0.95);
-        dirLight.position.set(12, 33, -37);
-        // dirLight.position.multiplyScalar( 0.20 );
-        // hemiLight.position.multiplyScalar( 0.20 );
-        scene.add(dirLight);
 
         // scene.fog = new THREE.Fog(0xbbaaaa, 11, 33);
         // scene.fog = new THREE.FogExp2(0xaaaaaa, 0.037);
 
+        const dirLight = new THREE.DirectionalLight(0xffffff, 1);
+        dirLight.color.setHSL(0.1, 1, 0.95);
+        dirLight.position.set(12, 33, -37);
+        dirLight.position.multiplyScalar( 0.20 );
+        // hemiLight.position.multiplyScalar( 0.20 );
+        //scene.add(dirLight);
         dirLight.castShadow = true;
-
         dirLight.shadow.mapSize.width = 1024;
         dirLight.shadow.mapSize.height = 1024;
-
         const d = 50;
-
         dirLight.shadow.camera.left = - d;
         dirLight.shadow.camera.right = d;
         dirLight.shadow.camera.top = d;
         dirLight.shadow.camera.bottom = - d;
-
         dirLight.shadow.camera.far = 1000;
         dirLight.shadow.bias = - 0.001;
 
+        // const spotLight = new THREE.SpotLight(0xffffff);
+        // scene.add(spotLight);
+
         const renderer = new THREE.WebGLRenderer({
             antialias: true,
             alpha: false,
@@ -147,6 +145,8 @@ class GameEngine extends EventManager{
 
         this.renderType = 'ST';
 
+        this.handleXrAction = ['ObjectPreview', 'DesignMode'].includes(opts.mode) ? this.handleXrActionDesignMode : this.handleXrActionGameMode;
+
         function animate(time) {
             let delta = clock.getDelta();
             gameEngine.physics?.step();
@@ -179,12 +179,12 @@ class GameEngine extends EventManager{
 
         domNode.appendChild(renderer.domElement);
 
-        let texture = await GameEngine.loadTexture('/static/textures/bck.webp', '');
+        // let texture = await GameEngine.loadTexture('/static/textures/bck.webp', '');
-        // let bck = await this.loadTexture('/static/textures/bck.webp');
+        // // let bck = await this.loadTexture('/static/textures/bck.webp');
-        // bck.premultiplyAlpha = true;
+        // // bck.premultiplyAlpha = true;
-        texture.mapping = THREE.EquirectangularReflectionMapping;
+        // texture.mapping = THREE.EquirectangularReflectionMapping;
-        // scene.background = bck; //new THREE.Color(0.7,0.7,0.7);
+        // // scene.background = bck; //new THREE.Color(0.7,0.7,0.7);
-        scene.environment = texture;
+        // scene.environment = texture;
         scene.background = new THREE.Color(1, 1, 1);
         //console.log('GameEngine started')
         renderer.domElement.addEventListener('wheel', (event) => {
@@ -307,35 +307,33 @@ class GameEngine extends EventManager{
         await this.physics.init();
     }
 
-    handleXrAction(gameEngine, delta) {
+    handleXrActionGameMode(gameEngine, delta) {}
-        //console.log(event.type);
+
-        if (gameEngine.xrController1?.gamepad) {
+    handleXrActionDesignMode(gameEngine, delta) {
-            let gp = gameEngine.xrController1.gamepad;
-            if (gp.axes[3] != 0) {
-                gameEngine.activeObjects.position.z += gp.axes[3] * delta;
-            }
-            if (gp.axes[2] != 0) {
-                gameEngine.activeObjects.position.x += gp.axes[2] * delta;
-            }
-        }
         if (gameEngine.xrController2?.gamepad) {
-            let gp = gameEngine.xrController2.gamepad;
+            let gp2 = gameEngine.xrController2.gamepad;
             let gp1 = gameEngine.xrController1.gamepad;
             // if (gp.axes[3] != 0){
             //     let sc = gameEngine.scene.scale.x + gp.axes[3] * delta * 0.5;
             //     gameEngine.scene.scale.set(sc, sc, sc);
             // }
-            if (gp.axes[2] != 0) {
+            if (gp2.axes[2] != 0 || gp2.axes[3] != 0) {
                 if (gp1.buttons[4]?.pressed) {
-                    gameEngine.activeObjects.position.y += gp.axes[2] * delta;
+                    gameEngine.activeObjects.position.y += gp2.axes[2] * delta;
                 } else if (gp1.buttons[5]?.pressed) {
-                    let sc = gameEngine.activeObjects.scale.x * (gp.axes[2] * delta * 0.5 + 1);
+                    let sc = gameEngine.activeObjects.scale.x 
-                    gameEngine.activeObjects.scale.set(sc, sc, sc);
+                        * (gp2.axes[2] * delta * 0.5 + 1)
+                        * (gp2.axes[3] * delta * 0.05 + 1);
+                    gameEngine.activeObjects.scale.setScalar(sc);
                 } else {
-                    gameEngine.activeObjects.rotation.y += gp.axes[2] * delta * 0.5;
+                    gameEngine.activeObjects.rotation.y += gp2.axes[2] * delta * 0.5 + gp2.axes[3] * delta * 0.05;
                 }
             }
-            if (gp.buttons[4]?.pressed) {
+            if (gp2.buttons[5]?.pressed && (gp1.axes[3] != 0 || gp1.axes[2] != 0)) {
+                gameEngine.ambientLight.intensity += gp1.axes[3] * delta * 5 + gp1.axes[2] * delta;
+                return;
+            }
+            if (gp2.buttons[4]?.pressed) {
                 let x = performance.now() % 1000;
                 if (x < 333) {
                     gameEngine.transformControls.setMode('translate');
@@ -346,6 +344,16 @@ class GameEngine extends EventManager{
                 }
             }
         }
+        
+        if (gameEngine.xrController1?.gamepad) {
+            let gp1 = gameEngine.xrController1.gamepad;
+            if (gp1.axes[3] != 0) {
+                gameEngine.activeObjects.position.z += (Math.exp(1+Math.abs(gp1.axes[3]))-2) * delta * Math.sign(gp1.axes[3]) * 0.2;
+            }
+            if (gp1.axes[2] != 0) {
+                gameEngine.activeObjects.position.x += (Math.exp(1+Math.abs(gp1.axes[2]))-2) * delta * Math.sign(gp1.axes[2]) * 0.2;
+            }
+        }
     }
 
     onControllerEvent(event) {