game objects module

src/gameEngine/index.js

@@ -1,33 +1,74 @@
 import * as THREE from 'three';
+import { GLTFLoader } from 'three/examples/jsm/Addons.js';
+import { OrbitControls } from 'three/examples/jsm/Addons.js';
+import { MapControls } from 'three/addons/controls/MapControls.js';
+import { FirstPersonControls } from 'three/addons/controls/FirstPersonControls.js';
+import { TransformControls } from 'three/addons/controls/TransformControls.js';
 
 class GameEngine {
-    constructor() {
-        const width = window.innerWidth/2, height = window.innerHeight/2;
+    constructor(domNode) {
+        const width = 1200, height = 800;
 
-        const camera = new THREE.PerspectiveCamera(70, width / height, 0.01, 10);
-        camera.position.z = 1;
+        const camera = new THREE.PerspectiveCamera(70, width / height, 0.1, 10000);
+        //camera.position.set(-10, -10, 50);
 
         const scene = new THREE.Scene();
-
-        const geometry = new THREE.BoxGeometry(0.2, 0.2, 0.2);
-        const material = new THREE.MeshNormalMaterial();
-
-        const mesh = new THREE.Mesh(geometry, material);
-        scene.add(mesh);
+        // this.light = new THREE.AmbientLight( 0x404040, 0 ); // soft white light
+        // scene.add( this.light );
 
         function animate(time) {
-
-            mesh.rotation.x = time / 2000;
-            mesh.rotation.y = time / 1000;
-
             renderer.render(scene, camera);
+            controls.update();
         }
 
-        const renderer = new THREE.WebGLRenderer({ antialias: true, alpha: true });
+        const renderer = new THREE.WebGLRenderer({ 
+            antialias: true, 
+            alpha: true,
+            preserveDrawingBuffer: true
+        });
+        renderer.setPixelRatio( window.devicePixelRatio );
+        const controls = new OrbitControls( camera, renderer.domElement );
+        //const controls = new MapControls( camera, renderer.domElement );
+        this.transformControls = new TransformControls( camera, renderer.domElement );
+        this.transformControls.addEventListener( 'dragging-changed', function ( event ) {
+            controls.enabled = ! event.value;
+        } );
+        // controls.enableDamping = true;
+        // controls.screenSpacePanning = true;
         renderer.setSize(width, height);
         renderer.setAnimationLoop(animate);
 
         this.renderer = renderer;
+        this.scene = scene;
+        this.loader = new GLTFLoader();
+        this.camera = camera;
+        this.controls = controls;
+        domNode.appendChild(renderer.domElement);
+
+        new THREE.TextureLoader().load('/static/textures/bck-preview.jpg', texture=>{
+            texture.encoding = THREE.sRGBEncoding;
+            texture.mapping = THREE.EquirectangularReflectionMapping;
+            scene.background = new THREE.Color(0.7,0.8,1);
+            scene.environment = texture;
+        })
+    }
+
+    $ = THREE;
+
+    async load(url, progress){
+        return new Promise((resolve, reject)=>{
+            this.loader.load(url, resolve, progress, reject)
+        })
+    }
+
+    async captureScreenshot(type = 'image/webp', quality = 80){
+        return new Promise((resolve, reject)=>{
+            this.renderer.domElement.toBlob(resolve, type, quality)
+        })
+    }
+
+    stop(){
+        this.renderer.setAnimationLoop(null);
     }
 }
 

src/pages/game-objects/[[id]].vue

@@ -17,16 +17,15 @@
         </v-card-actions>
     </v-card>
 
-    <v-card :title="$l.preview" class="container my-3" v-if="object.asset">
-        <div ref="target" v-if="object?.asset?.type == 'bundle'"></div>
-        <v-img v-else :src="`/asset/default/${object.asset?.name}`"></v-img>
+    <v-card :title="$l.preview" class="container my-3" v-show="object.asset">
+        <div ref="target" v-show="object?.asset?.type == 'bundle'"></div>
+        <v-img v-show="object?.asset?.type == 'single'" :src="`/asset/default/${object.asset?.name}`"></v-img>
     </v-card>
 </template>
 
 <script>
 import { GameEngine } from '@/gameEngine';
-
-const gameEngine = new GameEngine();
+let gameEngine = null;
 
 export default {
     data() {
@@ -44,13 +43,15 @@ export default {
             loading: false
         }
     },
-    async created(){
+    async mounted() {
         if (this.id && this.id != 'add'){
             this.object = (await this.$api.gameObject.load(this.id)).data;
         }
+        gameEngine = new GameEngine(this.$refs.target);
+        await this.loadAsset();
     },
-    mounted() {
-        //this.$refs.target?.appendChild(gameEngine.renderer.domElement);
+    beforeUnmount(){
+        gameEngine?.stop();
     },
     computed: {
         fileToUpload(){
@@ -61,13 +62,14 @@ export default {
         }
     },
     methods: {
-        async saveAndPreview() {
+        async saveAndPreview(params) {
             this.loading = true;
             try {
                 let fd = new FormData();
                 let keys = ['name', 'type'];
                 if (this.fileToUpload) keys.push('file');
                 if (this.id != 'add') keys.push('id');
+                if (this.object.thumb) keys.push('thumb');
 
                 keys.forEach(e=>fd.append(e, this.object[e]))
                 let result = await this.$api.gameObject.save(fd);
@@ -75,13 +77,31 @@ export default {
                 if (this.id == 'add'){
                     this.$router.replace({ params: {id: this.object.id} });
                 }
+                if (!params?.thumbOnly) await this.loadAsset();
             } catch (err) {
                 console.error(err);
             }
             this.loading = false
         },
-        captureThumbnail() {
-
+        async loadAsset(){
+            if (this.object.asset?.type == 'bundle'){
+                let gltf = await gameEngine.load(`/asset/default/${this.object.asset.name}`);
+                gameEngine.scene.clear();
+                console.log(gltf)
+                let bb = new gameEngine.$.Box3().setFromObject(gltf.scene);
+                gltf.scene.traverse( function( object ) {
+                    object.frustumCulled = false;
+                } );
+                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();
+                gameEngine.scene.add(gltf.scene);
+                //gameEngine.scene.add(gameEngine.light);
+            }
+        },
+        async captureThumbnail() {
+            this.object.thumb = await gameEngine.captureScreenshot();
+            await this.saveAndPreview({thumbOnly: true});
         },
         async publish() {