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

character selector

Browse Source
This commit is contained in:
goynov
2025-11-08 11:14:17 +02:00
parent 26ad885772
commit 49dc4e9f7c
10 changed files with 101 additions and 36 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/AssetsManagement/AssetSelector.vue
+1 -1
View File
@@ -3,7 +3,7 @@
<v-dialog transition="dialog-bottom-transition" fullscreen v-model="dialog">
<v-card title="Assets">
<v-container v-if="type?.includes('GameObject')">
<v-btn v-for="(v, i) in InteractiveObjectTypes" @click="select(v, 'InteractiveObject')">{{ v.id }}</v-btn>
<v-btn v-for="(v, i) in InteractiveObjectTypes" @click="select(v, 'InteractiveObject')">{{ v.name }}</v-btn>
</v-container>
<AssetBrowser :query="query" @select="select" :hideFilter="true"></AssetBrowser>
<v-card-actions>
src/components/InteractiveObjects/CharacterObject.js
+11
View File
@@ -0,0 +1,11 @@
class CharacterObject{
constructor(engine, data){
return new Promise(async(resolve, reject)=>{
this.source = await engine.load(data.$go.asset.name);
this.object = this.source.scene;
resolve(this);
})
}
}
export { CharacterObject }
src/components/InteractiveObjects/CharacterObject.vue
+34
View File
@@ -0,0 +1,34 @@
<template>
<div v-if="modelValue.go">
<v-img :src="`/asset/thumb/${modelValue.go}.webp`" />
<div class="text-caption text-center">{{ modelValue.title }}</div>
</div>
<asset-selector @select="assignCharacter" :type="['Character']">
<template v-slot:activator="props">
<v-btn v-bind="props" prepend-icon="mdi-video-box" color="deep-orange-darken-4" block>Select character</v-btn>
</template>
</asset-selector>
</template>
<script>
export default {
data(){
return {
active: false
}
},
mounted(){
this.active = true;
},
props:{
modelValue: Object
},
methods:{
assignCharacter(e){
this.modelValue.go = e.id;
this.modelValue.title = e.name
}
}
}
</script>
src/components/InteractiveObjects/InteractiveObject.js
+11 -6
View File
@@ -1,20 +1,23 @@
import { Group } from "three";
import { GenericObject } from "./GenenricObject";
import { TextObject } from "./TextObject";
import { ImageObject } from "./ImageObject";
import { CharacterObject } from "./CharacterObject";
import { VideoPlayer } from "./VideoPlayer";
import { PuzzleGame1 } from "./PuzzleGame1";
import { PuzzleGame2 } from "./PuzzleGame2";
// import { Game3 } from "./games/Game3";
import { PuzzleGame4 } from "./PuzzleGame4";
// import { Game5 } from "./games/Game5";
// import { Game6 } from "./games/Game6";
import { TextObject } from "./TextObject";
import { ImageObject } from "./ImageObject";
import { VideoPlayer } from "./VideoPlayer";
import { MazeQuizGame } from "./MazeQuizGame/MazeQuizGame";
import { Particles } from "./Particles";
import { assignMaterial, assignParams } from "@/lib/MeshUtils";
const InteractiveObjectsImports = { PuzzleGame1, PuzzleGame2, PuzzleGame4, MazeQuizGame, Particles };
const InteractiveObjectsImports = {
PuzzleGame1, PuzzleGame2, PuzzleGame4,
GenericObject, CharacterObject, MazeQuizGame, Particles };
class InteractiveObject {
constructor(gameEngine, obj) {
@@ -61,7 +64,8 @@ class InteractiveObject {
this.source = gltf;
break;
case 'GenericObject':
let go = await new GenericObject(gameEngine, obj) //await gameEngine.load(obj.$go.asset.name);
case 'CharacterObject':
let go = await new InteractiveObjectsImports[obj.type](gameEngine, obj) //await gameEngine.load(obj.$go.asset.name);
this.source = go.source;
this.object = go.object;
break;
@@ -82,7 +86,6 @@ class InteractiveObject {
case 'PuzzleGame2':
case 'MazeQuizGame':
case 'Particles':
console.log(obj.type);
this.source = await new InteractiveObjectsImports[obj.type](gameEngine, obj);
this.object = this.source.object;
break;
@@ -95,6 +98,8 @@ class InteractiveObject {
const InteractiveObjectTypes = [
{
id: 'CharacterObject', name: 'Character'
}, {
id: 'PuzzleGame1', name: 'Puzzle Game 1'
},{
id: 'PuzzleGame2', name: 'Puzzle Game 2'
src/components/InteractiveObjects/PuzzleGame1.vue
+6 -8
View File
@@ -1,12 +1,10 @@
<template>
<v-card v-if="modelValue.go">
<v-card-item>
<v-number-input density="compact" label="Width" v-model="modelValue.w"></v-number-input>
<v-number-input density="compact" label="Height" v-model="modelValue.h"></v-number-input>
<v-img :src="`/asset/thumb/${modelValue.go}.webp`" />
<div class="text-caption text-center">{{ modelValue.title }}</div>
</v-card-item>
</v-card>
<div v-if="modelValue.go">
<v-number-input density="compact" label="Width" v-model="modelValue.w"></v-number-input>
<v-number-input density="compact" label="Height" v-model="modelValue.h"></v-number-input>
<v-img :src="`/asset/thumb/${modelValue.go}.webp`" />
<div class="text-caption text-center">{{ modelValue.title }}</div>
</div>
<asset-selector @select="assignTexture" :type="['Texture']">
<template v-slot:activator="props">
<v-btn v-bind="props" prepend-icon="mdi-video-box" color="deep-orange-darken-4" block>Choose image object</v-btn>
src/components/InteractiveObjects/PuzzleGame2.vue
+6 -8
View File
@@ -1,12 +1,10 @@
<template>
<v-card v-if="modelValue.go">
<v-card-item>
<v-number-input density="compact" label="Width" v-model="modelValue.w"></v-number-input>
<v-number-input density="compact" label="Height" v-model="modelValue.h"></v-number-input>
<v-img :src="`/asset/thumb/${modelValue.go}.webp`" />
<div class="text-caption text-center">{{ modelValue.title }}</div>
</v-card-item>
</v-card>
<div v-if="modelValue.go">
<v-number-input density="compact" label="Width" v-model="modelValue.w"></v-number-input>
<v-number-input density="compact" label="Height" v-model="modelValue.h"></v-number-input>
<v-img :src="`/asset/thumb/${modelValue.go}.webp`" />
<div class="text-caption text-center">{{ modelValue.title }}</div>
</div>
<asset-selector @select="assignTexture" :type="['Texture']">
<template v-slot:activator="props">
<v-btn v-bind="props" prepend-icon="mdi-video-box" color="deep-orange-darken-4" block>Choose image object</v-btn>
src/components/SceneDesigner/GameObject.vue
+3 -3
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', 'Player']">
<asset-selector @select="assignGameObject" :type="['GameObject']">
<template v-slot:activator="props">
<v-btn v-bind="props" prepend-icon="mdi-panorama-outline" color="success" block>Choose game object</v-btn>
</template>
@@ -37,10 +37,11 @@ import PuzzleGame2 from '../InteractiveObjects/PuzzleGame2.vue';
import MazeQuizGame from '../InteractiveObjects/MazeQuizGame/MazeQuizGame.vue';
import Particles from '../InteractiveObjects/Particles.vue';
import GenericObject from '../InteractiveObjects/GenericObject.vue';
import CharacterObject from '../InteractiveObjects/CharacterObject.vue';
export default {
emits:['target', 'preview'],
components: { SvgIcon, GenericObject, VideoPlayer, PuzzleGame1, PuzzleGame2, MazeQuizGame, Particles, },
components: { SvgIcon, GenericObject, CharacterObject, VideoPlayer, PuzzleGame1, PuzzleGame2, MazeQuizGame, Particles, },
data(){
return {
active: false
@@ -78,7 +79,6 @@ export default {
this.modelValue.go = e.id;
if (this.modelValue.id == this.modelValue.title){
this.modelValue.title = e.name
delete this.modelValue.io;
}
if (e.type == 'InteractiveObject'){
this.modelValue.type = e.id;
src/lib/CharacterControls.js
+10 -5
View File
@@ -8,7 +8,7 @@ export class CharacterControls {
rotateAngle = new THREE.Vector3(0, 1, 0)
rotateQuarternion = new THREE.Quaternion()
cameraTarget = new THREE.Vector3()
storedFall = 0
cameraY = 3
// constants
fadeDuration = 0.2
@@ -101,11 +101,16 @@ export class CharacterControls {
}
this.actionStart += delta;
this.cameraDelta += delta * ( pointerControls.cameraLeft * -1 + pointerControls.cameraRight * 1)
this.walkDirection.x = this.walkDirection.y = this.walkDirection.z = 0
if (pointerControls.kb.KeyR && this.cameraY < 5){
this.cameraY+=delta;
}
if (pointerControls.kb.KeyF && this.cameraY > 1){
this.cameraY-=delta;
}
if (pointerControls.motion) {
this.directionVelocity = this.directionVelocity * 2.5 * Math.abs(input[0])
this.direction += input[0] * delta * 2.5 //this.directionVelocity;
@@ -145,13 +150,13 @@ export class CharacterControls {
let cameraPosition = new THREE.Vector3().copy(this.camera.position)
let cameraDesiredPosition = new THREE.Vector3(
this.model.position.x + 5* Math.sin(this.model.rotation.y + Math.PI + this.cameraDelta + this.cameraIdleDelta),
3,
this.cameraY,
this.model.position.z + 5* Math.cos(this.model.rotation.y + Math.PI + this.cameraDelta + this.cameraIdleDelta)
)
cameraPosition.lerp(cameraDesiredPosition, delta*2)
this.camera.position.copy(cameraPosition)
this.orbitControl.target.set(this.model.position.x, 2, this.model.position.z)
this.orbitControl.target.set(this.model.position.x, this.cameraY - 1, this.model.position.z)
this.camera.lookAt(this.orbitControl.target)
}
src/lib/Dashboard.js
+18 -4
View File
@@ -35,7 +35,7 @@ class DashBoard {
const dash = new Group(), hud = new Group(), hudTarget = new Group();
hud.visible = false;
let hudAnimation, hudPlane;
let hudAnimation, hudPlane, textPlane;
this.group = dash;
dash.add(hud);
hud.add(hudTarget)
@@ -62,6 +62,19 @@ class DashBoard {
hudPlane.position.z = -0.22;
hudPlane.position.y = -0.05
hud.add(hudPlane)
textPlane = new Mesh(
new PlaneGeometry(engine.aspect, 0.17),
new MeshBasicMaterial({
map: await engine.loadTexture('/static/textures/hud.png', ''),
opacity: 0.52,
transparent:true
})
);
textPlane.position.z = -0.25;
textPlane.position.y = -0.46
textPlane.visible = false;
dash.add(textPlane)
})()
const text = new Text()
@@ -69,7 +82,7 @@ class DashBoard {
text:``,
fontSize: 0.033, lineHeight: 1.1, maxWidth: engine.aspect * 0.8,
textAlign: 'center', font: '/static/fonts/Montserrat-Regular.ttf',
anchorX: 'center', anchorY: 0.05, depthOffset: 0.1, color: 0x000000,
anchorX: 'center', anchorY: 0.03, depthOffset: 0.1, color: 0x000000,
clipRect: [-engine.aspect * 0.4, -0.12, engine.aspect * 0.4, 0]
})
text.sync();
@@ -83,9 +96,10 @@ class DashBoard {
})
this.updateText = function(t, textScrolledCallback){
textPlane.visible = !!t;
engine.motionQueue.clear(text);
text.text = t;
text.anchorY = 0.05;
text.anchorY = 0.03;
text.sync(()=>{
let dh = text.clipRect[1] - text.textRenderInfo.blockBounds[1];
if (dh > 0){
@@ -98,7 +112,7 @@ class DashBoard {
}
engine.motionQueue.add({
o: text,
a: { anchorY: text.textRenderInfo.blockBounds[1] + 0.05 },
a: { anchorY: text.textRenderInfo.blockBounds[1] + 0.03 },
t: dh*177,
u: updateFn
})
src/plugins/params.js
+1 -1
View File
@@ -27,7 +27,7 @@ export default {
}, {
value: 'player3d',
icon: 'human-greeting',
type: 'Player',
type: 'Character',
render: true,
color: 'yellow-accent-4'
}, {