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

VR headset object management

Browse Source
This commit is contained in:
goynov
2025-06-30 23:06:22 +03:00
parent 392a94698b
commit 4ca83b7d87
11 changed files with 71 additions and 53 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/AssetsManagement/AssetPreview.vue
+1 -1
View File
@@ -75,7 +75,7 @@ export default{
this.animations = gltf.animations.map(a => ({
name: a.name, id: a.uuid
}));
//gameEngine.autoScale(gltf.scene);
gameEngine.autoScale(gltf.scene);
let bb = new gameEngine.$.Box3().setFromObject(gltf.scene);
gltf.scene.traverse(function (o) {
o.frustumCulled = false;
src/components/AssetsManagement/AssetSelector.vue
+1 -1
View File
@@ -20,7 +20,7 @@ export default {
data(){
return {
query: {
type: { $in: this.$p.objectTypes.filter(t=>t.type == this.type || !this.type).map(t=>t.value) }
type: { $in: this.$p.objectTypes.filter(t=>!this.type || this.type.includes(t.type)).map(t=>t.value) }
},
activatorProps:{},
dialog: false
src/components/GameDesigner/GameDesigner.vue
+4 -1
View File
@@ -163,7 +163,7 @@ export default {
}
for (let i of this.scene.data.items || []) {
let gltf = await gameEngine.load(`/asset/default/${i.data.$go.asset.name}`);
this.setObjectAttributes(l, i.data, gltf, 10);
this.setObjectAttributes(l, i.data, gltf, 1);
gameEngine.activeObjects.add(gltf.scene);
//console.log(JSON.stringify(l));
//window.gameEngine = gameEngine;
@@ -175,6 +175,9 @@ export default {
// gameEngine.activeObjects.add(camera);
// this.setObjectAttributes(l, { id: 'camera', 'title': 'Main camera' }, { scene: camera })
// cameraHelper.update();
//this is needed cause when mounted canvas has different size
this.resize();
},
async expandScenarioData(scene){
scene.data.$environment = (await this.$api.gameObject.load(scene.data.environment)).data
src/components/GamePlaying/GamePlaying.vue
+3 -3
View File
@@ -22,7 +22,7 @@
<div class="container my-3 position-relative game-designer-canvas">
<div ref="target" @click="targetClick" @pointerdown="targetPointerDown"></div>
</div>
<v-toolbar density="compact">
<!-- <v-toolbar density="compact">
<v-slide-group show-arrows>
<v-slide-group-item v-for="(a, i) in objectAnimations" :key="i" v-slot="{ isSelected }">
<v-btn :color="isSelected ? 'primary' : undefined" class="ma-2"
@@ -31,7 +31,7 @@
</v-btn>
</v-slide-group-item>
</v-slide-group>
</v-toolbar>
</v-toolbar> -->
<v-navigation-drawer location="right">
<v-list v-model:selected="scenesList" selectable color="primary">
<v-list-item v-for="(s, i) in scenes" :key="i" :title="s.data.title" :value="s"></v-list-item>
@@ -166,7 +166,7 @@ export default {
}
for (let i of this.scene.data.items || []) {
let gltf = await gameEngine.load(`/asset/default/${i.data.$go.asset.name}`);
this.setObjectAttributes(l, i.data, gltf, 10);
this.setObjectAttributes(l, i.data, gltf, 1);
gameEngine.activeObjects.add(gltf.scene);
if (i.data.$go.type == 'player3d'){
let hero = new Hero(gltf, i.data.$go);
src/components/SceneDesigner/GameObject.vue
+1 -1
View File
@@ -11,7 +11,7 @@
</g>
</teleport>
<v-card v-if="selected" :title="modelValue.title" class="mx-2" variant="text">
<asset-selector @select="assignGameObject" type="GameObject">
<asset-selector @select="assignGameObject" :type="['GameObject', 'Player']">
<template v-slot:activator="props">
<v-btn v-bind="props" prepend-icon="mdi-panorama-outline" color="success" block>Choose game object</v-btn>
</template>
src/components/SceneDesigner/Scene.vue
+1 -1
View File
@@ -9,7 +9,7 @@
</g>
</teleport>
<v-card :title="modelValue.title" v-if="selected" class="mx-2" variant="text">
<asset-selector @select="assignEnvironment" type="Scene">
<asset-selector @select="assignEnvironment" :type="['Scene']">
<template v-slot:activator="props">
<v-btn v-bind="props" prepend-icon="mdi-panorama-outline" block color="success" class="py-4">Choose environment</v-btn>
</template>
src/components/SceneDesigner/SceneDesigner.vue
+1 -1
View File
@@ -105,7 +105,7 @@ export default {
target: null,
assetSelector: {
active: false,
type: 'Scene'
type: ['Scene']
},
dialog: false,
expandDrawer: false,
src/components/SceneDesigner/Task.vue
+1 -1
View File
@@ -11,7 +11,7 @@
</g>
</teleport>
<v-card v-if="selected" :title="modelValue.title" class="mx-2" variant="text">
<asset-selector @select="assignTaskIntro" type="Descriptive">
<asset-selector @select="assignTaskIntro" :type="['Descriptive']">
<template v-slot:activator="props">
<v-btn v-bind="props" prepend-icon="mdi-panorama-outline" color="success" block>Choose task description</v-btn>
</template>
src/lib/Hero.js
+2 -1
View File
@@ -20,7 +20,7 @@ class Hero{
this.actionIdle = this.mixer.clipAction( this.object.animations.find(a=>a.name=='idle') );
this.actionIdle.play();
this.activeAction = this.actionIdle;
this.pointerControls = new PointerControls(gameEngine.cameraPivot, this.model, gameEngine.renderer.domElement);
this.pointerControls = new PointerControls(gameEngine.camera, this.model, gameEngine.renderer.domElement);
gameEngine.hero = this;
// Character Collider
@@ -96,6 +96,7 @@ class Hero{
}
update(){
return;
let { inputVelocity, velocity, euler, quat, v, targetQuaternion, clock } = this;
let pc = this.pointerControls;
pc.update();
src/lib/gameEngine.js
+55 -42
View File
@@ -92,7 +92,7 @@ class GameEngine {
this.activeObjects = new THREE.Group();
scene.add(this.activeObjects);
const controls = new OrbitControls(this.camera, renderer.domElement, this.activeObjects);
const controls = new OrbitControls(this.camera, renderer.domElement);
if (opts.gizmo) {
const gizmo = new ViewportGizmo(this.camera, renderer, {
container: '.renderer-gizmo',
@@ -181,8 +181,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.session = this.renderer.xr.getSession();
// this.session.addEventListener('selectstart', this.onControllerEvent.bind(this));
})
this.scene.add(c1);
@@ -213,13 +213,15 @@ class GameEngine {
line.name = 'line';
line.scale.z = 5;
this.controllerLine = line;
this.xrController1 = c1
this.xrController2 = c2
}
initCameraPivot() {
const pivot = new THREE.Object3D()
pivot.position.set(0, 1, 10)
pivot.position.set(0, 0, 0)
const yaw = new THREE.Object3D()
const pitch = new THREE.Object3D()
@@ -264,10 +266,10 @@ class GameEngine {
if (gameEngine.xrController1?.gamepad) {
let gp = gameEngine.xrController1.gamepad;
if (gp.axes[3] != 0) {
gameEngine.scene.position.z += gp.axes[3] * delta;
gameEngine.activeObjects.position.z += gp.axes[3] * delta;
}
if (gp.axes[2] != 0) {
gameEngine.scene.position.x += gp.axes[2] * delta;
gameEngine.activeObjects.position.x += gp.axes[2] * delta;
}
}
if (gameEngine.xrController2?.gamepad) {
@@ -279,12 +281,12 @@ class GameEngine {
// }
if (gp.axes[2] != 0) {
if (gp1.buttons[4]?.pressed) {
gameEngine.scene.position.y += gp.axes[2] * delta;
gameEngine.activeObjects.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);
let sc = gameEngine.activeObjects.scale.x * (gp.axes[2] * delta * 0.5 + 1);
gameEngine.activeObjects.scale.set(sc, sc, sc);
} else {
gameEngine.scene.rotation.y += gp.axes[2] * delta * 0.5;
gameEngine.activeObjects.rotation.y += gp.axes[2] * delta * 0.5;
}
}
if (gp.buttons[4]?.pressed) {
@@ -306,45 +308,55 @@ class GameEngine {
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;
// }
//event.type !== 'move' && console.log(event)
const controller = event.target;
//console.log(event)
if (!controller.userData) return
if (controller.userData.active === false) return;
this.transformControls.getRaycaster().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(this.controllerLine);
}
// 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(this.controllerLine);
}
// this.raycaster.setFromXRController(controller);
// const intersects = this.raycaster.intersectObjects(this.activeObjects.children);
this.raycaster.setFromXRController(controller);
const intersects = this.raycaster.intersectObjects(this.activeObjects.children, true);
// if (intersects.length > 0) {
// this.transformControls.attach(intersects[0].object);
// }
intersects.forEach(o => {
while (o.object && !this.activeObjects.children.includes(o.object)) {
o.object = o.object.parent;
}
})
if (intersects.length > 0) {
setTimeout(() => {
this.transformControls.attach(intersects[0].object);
}, 100);
}
}
$ = THREE;
@@ -430,6 +442,7 @@ class GameEngine {
}
})
}
//console.log('intersects', intersects);
return intersects;
}
src/plugins/params.js
+1
View File
@@ -27,6 +27,7 @@ export default {
}, {
value: 'player3d',
icon: 'human-greeting',
type: 'Player',
render: true,
color: 'yellow-accent-4'
}, {