imi-bas/pronature-platform
1
0
Fork 0
Code Issues 5 Pull Requests Actions Packages Projects Releases 1 Wiki Activity

xr

Browse Source
This commit is contained in:
goynov
2025-06-13 20:28:16 +03:00
parent a16156d24a
commit ba3ac19704
3 changed files with 111 additions and 70 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/GamePlaying/GamePlaying.vue
+9 -2
View File
@@ -14,6 +14,9 @@
<v-btn value="perspective" icon="mdi-cone"></v-btn>
<v-btn value="orthographic" icon="mdi-cone-off"></v-btn>
</v-btn-toggle>
<v-btn-toggle variant="tonal" v-model="store.prefs.xr.depthSense" class="ma-3" density="comfortable" color="green-darken-2">
<v-btn :value="true" icon="mdi-cube-outline"></v-btn>
</v-btn-toggle>
</v-navigation-drawer>
<div class="container my-3 position-relative game-designer-canvas">
<div ref="target" @click="targetClick" @pointerdown="targetPointerDown"></div>
@@ -48,6 +51,9 @@
<script>
import { GameEngine } from '@/lib/gameEngine';
import { useAppStore } from '@/stores/app';
const store = useAppStore();
let gameEngine = null;
@@ -63,7 +69,8 @@ export default {
pointerDownTime: 0,
scenario: null,
renderType: 'ST',
cameraType: 'perspective'
cameraType: 'perspective',
store
}
},
computed:{
@@ -120,7 +127,7 @@ export default {
async mounted(){
gameEngine = new GameEngine();
//this.gameEngine = gameEngine;
await gameEngine.init(this.$refs.target, { xr: true });
await gameEngine.init(this.$refs.target, { xr: true, depthSense: this.store.prefs.xr.depthSense});
gameEngine.scene.add(gameEngine.transformControls.getHelper());
gameEngine.scene.add(new gameEngine.$.GridHelper(100,100));
this.resize();
src/lib/gameEngine.js
+89 -65
View File
@@ -109,33 +109,7 @@ class GameEngine {
function animate(time) {
let delta = clock.getDelta();
mixer.update(delta);
if (gameEngine.xrController1?.gamepad){
let gp = gameEngine.xrController1.gamepad;
if (gp.axes[3] != 0){
gameEngine.scene.position.z += gp.axes[3] * delta;
}
if (gp.axes[2] != 0){
gameEngine.scene.position.x += gp.axes[2] * delta;
}
}
if (gameEngine.xrController2?.gamepad){
let gp = 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 (gp1.buttons[4]?.pressed){
gameEngine.scene.position.y += gp.axes[2] * delta;
}else if (gp1.buttons[5]?.pressed){
let sc = gameEngine.scene.scale.x + gp.axes[2] * delta * 0.1;
gameEngine.scene.scale.set(sc, sc, sc);
}else{
gameEngine.scene.rotation.y += gp.axes[2] * delta * 0.5;
}
}
}
gameEngine.handleXrAction(gameEngine, delta)
gameEngine.render(scene, gameEngine.camera);
gameEngine.gizmo?.render();
}
@@ -179,13 +153,14 @@ class GameEngine {
}
if (opts.xr){
renderer.xr.enabled = true;
document.body.appendChild( XRButton.createButton( renderer, {
'optionalFeatures': [ 'depth-sensing' ],
depthSensing: {
usagePreference: ["cpu-optimized", "gpu-optimized"],
dataFormatPreference: ["luminance-alpha", "float32"],
},
} ) );
document.body.appendChild(XRButton.createButton(renderer, opts.depthSense ?{
'requiredFeatures': ['depth-sensing'],
'depthSensing': {
usagePreference: ["gpu-optimized"],
dataFormatPreference: ["unsigned-short"],
matchDepthView: false
}
} : {}));
this.initXrControllers();
}
}
@@ -199,6 +174,8 @@ class GameEngine {
c1.userData.active = false;
c1.addEventListener('connected', e=>{
c1.gamepad = e.data.gamepad;
this.session = this.renderer.xr.getSession();
this.session.addEventListener('selectstart', this.onControllerEvent.bind(this));
})
this.scene.add( c1 );
@@ -233,45 +210,92 @@ class GameEngine {
this.xrController2 = c2
}
onControllerEvent(event) {
const controller = event.target;
if (controller.userData.active === false) return;
this.raycaster.setFromXRController(controller);
switch (event.type) {
case 'selectstart':
this.transformControls.pointerDown(null);
break;
case 'selectend':
this.transformControls.pointerUp(null);
break;
case 'move':
this.transformControls.pointerHover(null);
this.transformControls.pointerMove(null);
break;
handleXrAction(gameEngine, delta){
//console.log(event.type);
if (gameEngine.xrController1?.gamepad){
let gp = gameEngine.xrController1.gamepad;
if (gp.axes[3] != 0){
gameEngine.scene.position.z += gp.axes[3] * delta;
}
if (gp.axes[2] != 0){
gameEngine.scene.position.x += gp.axes[2] * delta;
}
}
if (gameEngine.xrController2?.gamepad){
let gp = 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 (gp1.buttons[4]?.pressed){
gameEngine.scene.position.y += gp.axes[2] * delta;
}else if (gp1.buttons[5]?.pressed){
let sc = gameEngine.scene.scale.x * (gp.axes[2] * delta * 0.5 + 1);
gameEngine.scene.scale.set(sc, sc, sc);
}else{
gameEngine.scene.rotation.y += gp.axes[2] * delta * 0.5;
}
}
if (gp.buttons[4]?.pressed){
// gameEngine.setCameraOrthographic();
// gameEngine.renderer.xr.updateCamera(gameEngine.orthographicCamera);
let session = gameEngine.renderer.xr.getFrame().session;
console.log(session);
session.pauseDepthSensing();
}
if (gp.buttons[5]?.pressed){
// gameEngine.setCameraOrthographic();
// gameEngine.renderer.xr.updateCamera(gameEngine.orthographicCamera);
let session = gameEngine.renderer.xr.getFrame().session;
console.log(session);
session.resumeDepthSensing();
}
}
}
onControllerEvent(event) {
//this.handleXrAction(event, this);
event.type !=='move' && console.log(event)
// const controller = event.target;
// if (controller.userData.active === false) return;
// this.raycaster.setFromXRController(controller);
// switch (event.type) {
// case 'selectstart':
// this.transformControls.pointerDown(null);
// break;
// case 'selectend':
// this.transformControls.pointerUp(null);
// break;
// case 'move':
// this.transformControls.pointerHover(null);
// this.transformControls.pointerMove(null);
// break;
// }
}
onSelect(event) {
const controller = event.target;
this.xrController1.userData.active = false;
this.xrController2.userData.active = false;
// 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(line);
}
// if (controller === this.xrController1) {
// this.xrController1.userData.active = true;
// this.xrController1.add(line);
// }
if (controller === this.xrController2) {
this.xrController2.userData.active = true;
this.xrController2.add(line);
}
// if (controller === this.xrController2) {
// this.xrController2.userData.active = true;
// this.xrController2.add(line);
// }
this.raycaster.setFromXRController(controller);
const intersects = this.raycaster.intersectObjects(this.activeObjects.children);
// this.raycaster.setFromXRController(controller);
// const intersects = this.raycaster.intersectObjects(this.activeObjects.children);
if (intersects.length > 0) {
this.transformControls.attach(intersects[0].object);
}
// if (intersects.length > 0) {
// this.transformControls.attach(intersects[0].object);
// }
}
$ = THREE;
src/stores/app.js
+13 -3
View File
@@ -1,8 +1,18 @@
// Utilities
import { defineStore } from 'pinia'
import { computed, reactive, watch } from 'vue'
let prefs = localStorage.getItem('prefs')
prefs = reactive(prefs ? JSON.parse(prefs) : {
xr: {
depthSense: true
}
})
watch(prefs, (newPrefs) => {
localStorage.setItem('prefs', JSON.stringify(newPrefs))
}, { deep: true })
export const useAppStore = defineStore('app', {
state: () => ({
//
}),
state: () => ({ prefs }),
})