character selector

src/components/AssetsManagement/AssetSelector.vue

@@ -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

@@ -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

@@ -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

@@ -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

@@ -1,12 +1,10 @@
 <template>
-    <v-card v-if="modelValue.go">
+    <div 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="Width" v-model="modelValue.w"></v-number-input>
+        <v-number-input density="compact" label="Height" v-model="modelValue.h"></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`" />
-            <v-img :src="`/asset/thumb/${modelValue.go}.webp`" />
+        <div class="text-caption text-center">{{ modelValue.title }}</div>
-            <div class="text-caption text-center">{{ modelValue.title }}</div>
+    </div>
-        </v-card-item>
-    </v-card>
     <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

@@ -1,12 +1,10 @@
 <template>
-    <v-card v-if="modelValue.go">
+    <div 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="Width" v-model="modelValue.w"></v-number-input>
+        <v-number-input density="compact" label="Height" v-model="modelValue.h"></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`" />
-            <v-img :src="`/asset/thumb/${modelValue.go}.webp`" />
+        <div class="text-caption text-center">{{ modelValue.title }}</div>
-            <div class="text-caption text-center">{{ modelValue.title }}</div>
+    </div>
-        </v-card-item>
-    </v-card>
     <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

@@ -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

@@ -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

@@ -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

@@ -27,7 +27,7 @@ export default {
             }, {
                 value: 'player3d',
                 icon: 'human-greeting',
-                type: 'Player',
+                type: 'Character',
                 render: true,
                 color: 'yellow-accent-4'
             }, {