gamedesigner

src/components/AssetsManagement/AssetPreview.vue

@@ -59,22 +59,25 @@ export default{
             if (this.forRendering) {
                 gameEngine.scene.clear();
                 if (this.obj.type == 'panorama2d') {
-                    let t = await gameEngine.loadTexture(`/asset/default/${this.obj.asset.name}`);
-                    t.mapping = gameEngine.$.EquirectangularReflectionMapping;
-                    gameEngine.scene.background = t;
-                    gameEngine.scene.environment = t;
-                    gameEngine.scene.add(gameEngine.camera);
+                    await gameEngine.loadPanorama(`/asset/default/${this.obj.asset.name}`);
+                    // let t = await gameEngine.loadTexture(`/asset/default/${this.obj.asset.name}`);
+                    // t.mapping = gameEngine.$.EquirectangularReflectionMapping;
+                    // gameEngine.scene.background = t;
+                    // gameEngine.scene.environment = t;
+                    // gameEngine.scene.add(gameEngine.camera);
                 } else {
                     let gltf = await gameEngine.load(`/asset/default/${this.obj.asset.name}`);
-                    console.debug('GLTF', gltf);
+                    //console.debug('GLTF', gltf);
                     this.loadedAsset = gltf;
                     this.animations = gltf.animations.map(a => ({
                         name: a.name, id: a.uuid
                     }));
+                    gameEngine.autoScale(gltf.scene);
                     let bb = new gameEngine.$.Box3().setFromObject(gltf.scene);
                     gltf.scene.traverse(function (o) {
                         o.frustumCulled = false;
                     });
+                    //console.log(bb)
                     gameEngine.camera.position.set(bb.max.x, bb.max.y, bb.max.z);
                     gameEngine.controls.target.set((bb.max.x + bb.min.x) / 2, (bb.max.y + bb.min.y) / 2, (bb.max.z + bb.min.z) / 2)
                     gameEngine.controls.update();

src/components/GameDesigner/GameDesigner.vue

@@ -0,0 +1,111 @@
+<template>
+    <v-btn-toggle variant="tonal" density="compact" class="mx-auto" v-model="mode" color="blue">
+        <!-- <v-btn size="small" class="text-none" value="default"
+            prepend-icon="mdi-cursor-default-click">Pointer</v-btn> -->
+        <v-btn size="small" class="text-none" value="translate" prepend-icon="mdi-cursor-move">Move</v-btn>
+        <v-btn size="small" class="text-none" value="rotate" prepend-icon="mdi-rotate-orbit">Rotate</v-btn>
+        <v-btn size="small" class="text-none" value="scale" prepend-icon="mdi-resize">Scale</v-btn>
+    </v-btn-toggle>
+    <div class="container my-3">
+        <div ref="target" @click="targetClick" @pointerdown="targetPointerDown"></div>
+    </div>
+    <v-navigation-drawer location="right">
+        <v-list v-model:selected="scenesList" selectable>
+            <v-list-item v-for="(s, i) in scenes" :key="i" :title="s.data.title" :value="s"></v-list-item>
+        </v-list>
+    </v-navigation-drawer>
+</template>
+
+<script>
+
+import { GameEngine } from '@/lib/gameEngine';
+
+let gameEngine = null;
+
+export default {
+    props:{
+        modelValue: Object,
+        scenario: Object
+    },
+    data(){
+        return {
+            scenesList: [],
+            mode: 'translate',
+            pointerDownTime: 0
+        }
+    },
+    computed:{
+        scenes(){
+            return this.scenario.scenes || [];
+        },
+        scene(){
+            return this.scenesList[0];
+        },
+        object(){
+            return this.modelValue;
+        },
+    },
+    watch:{
+        async scene(n){
+            await this.loadEnvironment();
+        },
+        mode(n){
+            gameEngine.transformControls.setMode(n)
+        }
+    },
+    async mounted(){
+        gameEngine = new GameEngine();
+        this.gameEngine = gameEngine;
+        await gameEngine.init(this.$refs.target);
+        gameEngine.scene.add(gameEngine.transformControls.getHelper())
+    },
+    methods:{
+        async loadEnvironment(){
+            await this.expandScenarioData();
+            if (!this.object.gd){
+                this.object.gd = {
+                    items: []
+                };
+            }
+            if (this.scene.data.$environment.type == 'panorama2d'){
+                await gameEngine.loadPanorama(`/asset/default/${this.scene.data.$environment.asset.name}`);
+            }else{
+                let env = await gameEngine.load(`/asset/default/${this.scene.data.$environment.asset.name}`);
+                gameEngine.autoScale(env.scene, 10);
+                gameEngine.activeObjects.add(env.scene);
+            }
+            for (let i of this.scene.data.items) {
+                let gltf = await gameEngine.load(`/asset/default/${i.data.$go.asset.name}`);
+                let o = gltf.scene;
+                gameEngine.autoScale(o);
+                gameEngine.activeObjects.add(o);
+                const {position, scale, rotation} = o;
+                i.gd = {position, scale, rotation};
+                console.log(JSON.stringify(i.gd));
+                window.gameEngine = gameEngine;
+                //console.log(new gameEngine.$.Euler({"isEuler":true,"_x":0,"_y":0,"_z":0,"_order":"XYZ"}));
+            }
+        },
+        async expandScenarioData(){
+            this.scene.data.$environment = (await this.$api.gameObject.load(this.scene.data.environment)).data
+            for (let i of this.scene.data.items) {
+                i.data.$go = (await this.$api.gameObject.load(i.data.go)).data;
+            }
+        },
+        targetPointerDown(){
+            this.pointerDownTime = performance.now();
+        },
+        targetClick(e){
+            if (performance.now() - this.pointerDownTime < 200){
+                let intersects = gameEngine.intersect(e, this.$refs.target, gameEngine.activeObjects.children, true);
+                if (intersects.length){
+                    console.log('attaching controls to', intersects[0].object)
+                    gameEngine.transformControls.attach(intersects[0].object);
+                }else{
+                    gameEngine.transformControls.detach();
+                }
+            }
+        }
+    }
+}
+</script>