From 8954770ff777f377d27e399cda12918e7957df80 Mon Sep 17 00:00:00 2001 From: goynov Date: Fri, 20 Feb 2026 20:38:57 +0200 Subject: [PATCH] xr gamepad designmode controls --- .../AssetsManagement/AssetPreview.vue | 3 +- .../{GenenricObject.js => GenericObject.js} | 0 .../InteractiveObjects/InteractiveObject.js | 2 +- src/lib/Dashboard.js | 2 +- src/lib/GameEngine.js | 88 ++++++++++--------- 5 files changed, 52 insertions(+), 43 deletions(-) rename src/components/InteractiveObjects/{GenenricObject.js => GenericObject.js} (100%) diff --git a/src/components/AssetsManagement/AssetPreview.vue b/src/components/AssetsManagement/AssetPreview.vue index 21fcbaa..8f6ece8 100644 --- a/src/components/AssetsManagement/AssetPreview.vue +++ b/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(); } diff --git a/src/components/InteractiveObjects/GenenricObject.js b/src/components/InteractiveObjects/GenericObject.js similarity index 100% rename from src/components/InteractiveObjects/GenenricObject.js rename to src/components/InteractiveObjects/GenericObject.js diff --git a/src/components/InteractiveObjects/InteractiveObject.js b/src/components/InteractiveObjects/InteractiveObject.js index b4f9e91..a49f085 100644 --- a/src/components/InteractiveObjects/InteractiveObject.js +++ b/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"; diff --git a/src/lib/Dashboard.js b/src/lib/Dashboard.js index eab90ff..a3637fa 100644 --- a/src/lib/Dashboard.js +++ b/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] diff --git a/src/lib/GameEngine.js b/src/lib/GameEngine.js index 6cfecad..8427688 100644 --- a/src/lib/GameEngine.js +++ b/src/lib/GameEngine.js @@ -50,38 +50,36 @@ class GameEngine extends EventManager{ this.initCameraPivot() - // let light = new THREE.AmbientLight( 0x404040, 24 ); // soft white light - // scene.add( light ); + this.ambientLight = new THREE.AmbientLight( 0x404040, 11 ); // soft white light + scene.add( this.ambientLight ); - var hemiLight = new THREE.HemisphereLight( 0xffffff, 0x444444 ); - hemiLight.position.set(0, 33, 0); - 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); + // var hemiLight = new THREE.HemisphereLight( 0xffffff, 0x444444, 10 ); + // hemiLight.position.set(0, 33, 0); + //scene.add( hemiLight ); // 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 bck = await this.loadTexture('/static/textures/bck.webp'); - // bck.premultiplyAlpha = true; - texture.mapping = THREE.EquirectangularReflectionMapping; - // scene.background = bck; //new THREE.Color(0.7,0.7,0.7); - scene.environment = texture; + // let texture = await GameEngine.loadTexture('/static/textures/bck.webp', ''); + // // let bck = await this.loadTexture('/static/textures/bck.webp'); + // // bck.premultiplyAlpha = true; + // texture.mapping = THREE.EquirectangularReflectionMapping; + // // scene.background = bck; //new THREE.Color(0.7,0.7,0.7); + // 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) { - //console.log(event.type); - if (gameEngine.xrController1?.gamepad) { - 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; - } - } + handleXrActionGameMode(gameEngine, delta) {} + + handleXrActionDesignMode(gameEngine, 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); - gameEngine.activeObjects.scale.set(sc, sc, sc); + let sc = gameEngine.activeObjects.scale.x + * (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) {