amaze

src/components/GamePlaying/GamePlaying.vue

@@ -158,7 +158,8 @@ export default {
             }
         },
         async loadEnvironment(scene, target){
-            await gameEngine.loadPanorama(`/asset/default/55/panorama-vaya.webp`);
+            //await gameEngine.loadPanorama(`/asset/default/55/panorama-vaya.webp`);
+            await gameEngine.loadPanorama(`/asset/default/36.jpg`);
             await this.expandScenarioData(scene);
             //gameEngine.activeObjects.scale.set(0.033, 0.033, 0.033)
             gameEngine.activeObjects.clear();
@@ -224,30 +225,30 @@ export default {
             // vp.object.rotation.y += -Math.PI/2;
 
             let maze = new MazeQuizGame(gameEngine, {}, [
-                {s: 'Кое е най-голямото езеро в България', h: 'Wrong answer', a: true},
+                {q: 'Атанасовското езеро е дълго около 10км.', a:['Вярно', 'Невярно'], h: 'Грешен отговор. Атанасовското езеро е дълго около 10км.'},
-                {s: '1 + 1 = 2', h: 'Wrong answer', a: true},
+                {q: 'Колко дълбоко е Атанасовското езеро?', a:['Около 35см', 'Около 3.5м', 'Метър и половина'], h: 'Атанасовското езеро е дълбоко средно около 35см.'},
-                {s: '1 + 1 = 2', h: 'Wrong answer', a: true},
+                {q: 'Колко вида птици се наблюдават в Атанасовското езеро?', a: ['Повече от 330 вида', 'Над 10 вида', 'Над 450 вида'], h: 'В Атанасовското езеро са наблюдавани над 330 вида птици'},
-                {s: '1 + 1 = 2', h: 'Wrong answer', a: true},
+                {q: 'Какво е Via Pontica?', a: ['Миграционният път на птиците, минаващ покрай Бургаските езера', 'Рядък вид птица', 'Местност в гр. Бургас'], h: 'Via Pontica наричаме миграционния път на птиците'},
             ])
             maze.load().then(o=>{
                 gameEngine.activeObjects.add(o);
                 //o.scale.set(5,5,5);
             })
 
-            new Grass(Grass.positions(1000,50,50), '/static/textures/grass01.png', 1, .5).then(mesh=>{
+            // new Grass(Grass.positions(1000,50,50), '/static/textures/grass01.png', 1, .5).then(mesh=>{
-                console.log('adding grass')
+            //     console.log('adding grass')
-                gameEngine.scene.add(mesh);
+            //     gameEngine.scene.add(mesh);
-            })
+            // })
 
-            new Grass(Grass.positions(250,50,50), '/static/textures/flowers01.png', 1, .75).then(mesh=>{
+            // new Grass(Grass.positions(250,50,50), '/static/textures/flowers01.png', 1, .75).then(mesh=>{
-                gameEngine.scene.add(mesh);
+            //     gameEngine.scene.add(mesh);
-                console.log('adding grass')
+            //     console.log('adding grass')
-            })
+            // })
 
-            new Grass(Grass.positions(250,50,50), '/static/textures/flowers02.png', 1, .75).then(mesh=>{
+            // new Grass(Grass.positions(250,50,50), '/static/textures/flowers02.png', 1, .75).then(mesh=>{
-                gameEngine.scene.add(mesh);
+            //     gameEngine.scene.add(mesh);
-                console.log('adding grass')
+            //     console.log('adding grass')
-            })
+            // })
         },
         async expandScenarioData(scene){
             scene.data.$environment = (await this.$api.gameObject.load(scene.data.environment)).data

src/components/InteractiveObjects/MazeQuizGame/MazeObject.js

@@ -42,17 +42,65 @@ class MazeObject {
             po.rigidBody.setRotation(quat, true)
         }
 
+        function addRoom(elements, def, offsetZ){
+            // e = [
+            //     o.floor.clone(), 
+            //     o.door.clone(), 
+            //     o[def.r ? 'door' : 'wall'].clone(),
+            //     o[def.f ? 'door' : 'wall'].clone(), 
+            //     o[def.l ? 'door' : 'wall'].clone()
+            // ];
+
+            let e = elements.map(e=>o[e].clone())
+
+            e[0].position.set(0, 0, offsetZ + context.wallSize/2);
+
+            e[1].rotateY(_tf.rotation.b);
+
+            e[2].rotateY(_tf.rotation.r);
+            e[3].rotateY(_tf.rotation.f);
+            e[4].rotateY(_tf.rotation.l);
+
+            e[1].position.set(0, 0, offsetZ + 0);
+
+            e[2].position.set(-context.wallSize/2, 0, offsetZ + context.wallSize/2);
+            e[3].position.set(0, 0, offsetZ + context.wallSize);
+            e[4].position.set(context.wallSize/2, 0, offsetZ + context.wallSize/2);
+
+            if (elements[1] == 'wall'){
+                addPhysics(def.matrix, [0, 0, offsetZ], context.wallSize, 'front')
+            }
+
+            if (elements[2] == 'wall'){
+                addPhysics(def.matrix, [-context.wallSize/2, 0, offsetZ + context.wallSize/2], context.wallSize)
+            }
+
+            if (elements[3] == 'wall'){
+                addPhysics(def.matrix, [0, 0, offsetZ + context.wallSize], context.wallSize, 'front')
+            }
+
+            if (elements[4] == 'wall'){
+                addPhysics(def.matrix, [context.wallSize/2, 0, offsetZ + context.wallSize/2], context.wallSize)
+            }
+
+            e.forEach(g => {
+                g.applyMatrix4(def.matrix);
+                root.add(g);
+            });
+        }
+
         this.mazeObject = function(def, room, step = 0) {
             if (!def.matrix){
                 def.matrix = new Matrix4();
             }
             let offsetZ = 0, e;
             def.len = def.len || 0;
-            // if (step == 0) {
+            if (step == 0) {
                 // e = o.door.clone();
                 // e.rotateY(_tf.rotation.f);
                 // mazeMeshes.push(e);
-            // }
+                addRoom(['floor', 'wall', 'wall', 'door', 'wall'], def, -context.wallSize)
+            }
             for (let i = 0; i < def.len; i++) {
                 let t = o.tunnel.clone();
                 t.position.set(0, 0, i * context.tubeSize);
@@ -72,44 +120,7 @@ class MazeObject {
             addPhysics(def.matrix, [context.tubeSize / 2, 0.6, offsetZ/2], offsetZ)
             addPhysics(def.matrix, [-context.tubeSize / 2, 0.6, offsetZ/2], offsetZ)
 
-            e = [
+            addRoom(['floor', 'door', def.r ? 'door' : 'wall', def.f ? 'door' : 'wall', def.l ? 'door' : 'wall'], def, offsetZ)
-                o.floor.clone(), 
-                o.door.clone(), 
-                o[def.r ? 'door' : 'wall'].clone(),
-                o[def.f ? 'door' : 'wall'].clone(), 
-                o[def.l ? 'door' : 'wall'].clone()
-            ];
-
-            e[0].position.set(0, 0, offsetZ + context.wallSize/2);
-
-            e[1].rotateY(_tf.rotation.b);
-
-            e[2].rotateY(_tf.rotation.r);
-            e[3].rotateY(_tf.rotation.f);
-            e[4].rotateY(_tf.rotation.l);
-
-            e[1].position.set(0, 0, offsetZ + 0);
-
-            e[2].position.set(-context.wallSize/2, 0, offsetZ + context.wallSize/2);
-            e[3].position.set(0, 0, offsetZ + context.wallSize);
-            e[4].position.set(context.wallSize/2, 0, offsetZ + context.wallSize/2);
-
-            if (!def.r){
-                addPhysics(def.matrix, [-context.wallSize/2, 0, offsetZ + context.wallSize/2], context.wallSize)
-            }
-
-            if (!def.f){
-                addPhysics(def.matrix, [0, 0, offsetZ + context.wallSize], context.wallSize, 'front')
-            }
-
-            if (!def.l){
-                addPhysics(def.matrix, [context.wallSize/2, 0, offsetZ + context.wallSize/2], context.wallSize)
-            }
-
-            e.forEach(g => {
-                g.applyMatrix4(def.matrix);
-                root.add(g);
-            });
 
             def.objects && def.objects.forEach(async obj => {
                 obj.room = room;

src/components/InteractiveObjects/MazeQuizGame/MazeQuizGame.js

@@ -1,9 +1,24 @@
 import { MazeObject } from "./MazeObject";
+import Utils from "@/lib/Utils";
+
+const defaults = {
+    arrows:{
+        r: len => ({ type: 'image', value: '/static/textures/arrow.png', position:[-.5,.44,len+.96], rotation:[0,Math.PI, 0], scale: [0.03, 0.03, 0.03] }),
+        l: len => ({ type: 'image', value: '/static/textures/arrow.png', position:[.5,.44,len+.96], rotation:[0,Math.PI, Math.PI], scale: [0.03, 0.03, 0.03] }),
+        f: len => ({ type: 'image', value: '/static/textures/arrow.png', position:[0,.73,len+.96], rotation:[0,Math.PI, Math.PI/2], scale: [0.03, 0.03, 0.03] })
+    },
+    answers:{
+        r: (len, text) => ({ type: 'text', text, position:[-.5,.3,len+.9], rotation:[0,Math.PI, 0] }),
+        l: (len, text) => ({ type: 'text', text, position:[.5,.3,len+.9], rotation:[0,Math.PI, 0] }),
+        f: (len, text) => ({ type: 'text', text, position:[0,.7,len+.9], rotation:[0,Math.PI, 0] })
+    }
+}
+
+const tl = 4;
 
 class MazeQuizGame {
     constructor(engine, context, questions) {
         let def = this.generate(questions);
-        console.log(def)
         this.mazeObject = new MazeObject(engine, def)
     }
 
@@ -16,41 +31,66 @@ class MazeQuizGame {
     generate(questions, idx = 0){
         let cq = questions[idx]
         if (!cq) return {};
-        let len = Math.round(Math.random()*4) + 2;
+        let len = Math.round(Math.random()*tl) + 2;
-        let lr = Math.round(Math.random()*4) + 2;
+
-        let lrv = Math.random() > 0.5;
+        let l = {
-        return {
+            l: Math.round(Math.random()*tl) + 2, 
+            r: Math.round(Math.random()*tl) + 2, 
+            f: Math.round(Math.random()*tl) + 2
+        }
+
+        let directions = Utils.shuffleArray( ['l', 'r', 'f'] )
+
+        let mo = {
             len,
             objects:[
                 {
-                    type: 'text', text: cq.s, position:[0,.4,len+.96], rotation:[0,Math.PI, 0]
+                    type: 'text', text: cq.q, position:[0,.4,len + .96], rotation:[0,Math.PI, 0]
-                },{
-                    type: 'image', value: '/static/textures/arrow.png', position:[-.5,.44,len+.96], rotation:[0,Math.PI, 0], scale: [0.03, 0.03, 0.03]
-                },{
-                    type: 'text', text: 'Вярно', position:[-.5,.3,len+.9], rotation:[0,Math.PI, 0]
-                },{
-                    type: 'image', value: '/static/textures/arrow.png', position:[.5,.44,len+.96], rotation:[0,Math.PI, Math.PI], scale: [0.03, 0.03, 0.03]
-                },{
-                    type: 'text', text: 'Невярно', position:[.5,.3,len+.9], rotation:[0,Math.PI, 0]
-                }
-            ],
-            [lrv?'r':'l']:{
-                len: 10 - lr,
-                [lrv?'l':'r']: {
-                    len: lr,
-                    objects:[
-                        {
-                            type: 'text', text: cq.h, position:[0,.44,lr+.96], rotation:[0,Math.PI, 0]
                 }
             ]
         }
-            },
+        
-            [lrv?'l':'r']:{
+        cq.a.forEach((a, i)=>{
-                len: lr,
+            let d = directions[i];
-                [lrv?'r':'l']: this.generate(questions, idx + 1)
+            mo.objects.push(
+                defaults.arrows[d](len),
+                defaults.answers[d](len, a)
+            )
+            let dd;
+            if (d == 'f'){
+                dd = l.l > l.r ? 'l' : 'r';
+            }else {
+                dd = d == 'l' ? 'r' : 'l'
+            }
+            if (i == 0){
+                mo[d] = {
+                    len: l[d],
+                    [dd]: this.generate(questions, idx + 1)
+                }
+            }else{
+                mo[d] = {
+                    len: l[d],
+                    [dd]: {
+                        len: 8 - l[d],
+                        objects:[
+                            {
+                                type: 'text', text: cq.h, position:[0,.44,8 - l[d]+.96], rotation:[0,Math.PI, 0]
+                            }
+                        ]
                     }
                 }
             }
+            if (d == 'f'){
+                let path = mo[d][dd];
+                mo[d][dd] = {
+                    len: 1,
+                    [dd == 'r' ? 'l' : 'r']: path
+                }
+            }
+        })
+
+        return mo;
+    }
 
 }
 export {MazeQuizGame}

src/components/InteractiveObjects/TextObject.js

@@ -16,10 +16,10 @@ class TextObject {
         txt.anchorY = 'bottom';
         txt.curveRadius = 0;
         txt.outlineColor = 0xffffff;
-        txt.outlineWidth = '1%';
+        txt.outlineWidth = '15%';
         txt.depthOffset = 0.1;
         //txt.outlineBlur = '50%';
-        txt.color = new Color(0xffffff);
+        txt.color = new Color(0x0);
         assignParams(txt, obj)
         let m = new MeshStandardMaterial({
             roughness: .73,

src/components/InteractiveObjects/VideoPlayer.vue

@@ -15,7 +15,7 @@
 
 <script>
 
-import Utils from '@/lib/utils';
+import Utils from '@/lib/Utils';
 
 export default {
   emits:['target', 'preview'],

src/components/SceneDesigner/GameObject.vue

@@ -26,7 +26,7 @@
 
 <script>
 import SvgIcon from './SvgIcon.vue';
-import Utils from '@/lib/utils';
+import Utils from '@/lib/Utils';
 
 export default {
   emits:['target', 'preview'],

src/components/SceneDesigner/Scene.vue

@@ -25,7 +25,7 @@
 
 <script>
 import SvgIcon from './SvgIcon.vue';
-import Utils from '@/lib/utils';
+import Utils from '@/lib/Utils';
 import AssetSelector from '../AssetsManagement/AssetSelector.vue';
 
 export default {

src/components/SceneDesigner/SceneDesigner.vue

@@ -68,7 +68,7 @@
 import GameObject from './GameObject.vue';
 import Scene from './Scene.vue';
 import SvgRectangle from './SvgRectangle.vue';
-import Utils from '@/lib/utils';
+import Utils from '@/lib/Utils';
 import AssetSelector from '../AssetsManagement/AssetSelector.vue';
 import Task from './Task.vue';
 

src/components/SceneDesigner/SvgRectangle.vue

@@ -13,7 +13,7 @@
 
 <script>
 import AnnotationPoint from './AnnotationPoint.vue';
-import Utils from '@/lib/utils';
+import Utils from '@/lib/Utils';
 
 export default {
   components: { AnnotationPoint },

src/components/SceneDesigner/Task.vue

@@ -27,7 +27,7 @@
 
 <script>
 import SvgIcon from './SvgIcon.vue';
-import Utils from '@/lib/utils';
+import Utils from '@/lib/Utils';
 
 export default {
   emits:['target', 'preview'],

src/lib/CharacterControls.js

@@ -105,7 +105,7 @@ export class CharacterControls {
 
             let dst = Math.sqrt(Math.pow(cameraPosition.x - this.model.position.x, 2) + Math.pow(cameraPosition.z - this.model.position.z, 2));
             //cameraPosition.y = 8 - dst;
-            if (dst > 2){
+            if (dst >0.52){
                 this.camera.position.copy(cameraPosition)
                 this.camera.lookAt(new THREE.Vector3(
                     this.model.position.x,

src/lib/GameEngine.js

@@ -24,7 +24,7 @@ class GameEngine {
         this.opts = opts;
         const gameEngine = this;
 
-        this.perspectiveCamera = new THREE.PerspectiveCamera(45, this.aspect, 0.01, 25);
+        this.perspectiveCamera = new THREE.PerspectiveCamera(45, this.aspect, 0.01, 250);
         this.raycaster = new THREE.Raycaster();
         this.perspectiveCamera.position.set(0, 0, 10);
 

src/lib/Utils.js

@@ -54,4 +54,9 @@ export default {
     rad2deg(rad){
         return rad * 180 / Math.PI;
     },
+
+    shuffleArray(arr){
+        return arr.map(value => ({ value, sort: Math.random() }))
+        .sort((a, b) => a.sort - b.sort).map(({ value }) => value)
+    }
 }