custom character loader

Author: sjefvanleeuwen

characterLoader.js

@@ -0,0 +1,79 @@
+window.addEventListener('sceneReady', () => {
+    document.getElementById('characterUpload').addEventListener('change', async (event) => {
+        const file = event.target.files[0];
+        if (!file) return;
+
+        const statusMessage = document.getElementById('statusMessage');
+        statusMessage.textContent = 'Loading character...';
+
+        try {
+            const scene = window.scene;
+            if (!scene) throw new Error('Scene not initialized');
+
+            const arrayBuffer = await file.arrayBuffer();
+            const blob = new Blob([arrayBuffer], { type: 'model/gltf-binary' });
+            const blobUrl = URL.createObjectURL(blob);
+
+            BABYLON.SceneLoader.LoadAssetContainer("", blobUrl, scene, function (container) {
+                // Clear previous character completely
+                if (window.currentCharacter) {
+                    // Stop and dispose all animations
+                    scene.animationGroups.slice().forEach(group => {
+                        group.stop();
+                        group.dispose();
+                    });
+                    
+                    // Remove all meshes related to current character
+                    scene.meshes.slice().forEach(mesh => {
+                        if (mesh !== scene.ground) { // Keep the ground
+                            mesh.dispose();
+                        }
+                    });
+
+                    // Clear any skeletons
+                    scene.skeletons.slice().forEach(skeleton => {
+                        skeleton.dispose();
+                    });
+
+                    window.currentCharacter = null;
+                    window.currentAnimationGroup = null;
+                }
+
+                // Add new meshes and animations
+                container.addAllToScene();
+                window.currentCharacter = container.meshes[0];
+                window.animationGroups = container.animationGroups;
+                
+                // Position the new character
+                window.currentCharacter.position = new BABYLON.Vector3(0, 0, 0);
+                window.currentCharacter.rotation = new BABYLON.Vector3(0, Math.PI/2, 0);
+                window.currentCharacter.scaling = new BABYLON.Vector3(1, 1, 1);
+
+                // Update animation list
+                const animationList = document.getElementById('animationList');
+                animationList.innerHTML = '';
+                container.animationGroups.forEach((group, index) => {
+                    const option = document.createElement('option');
+                    option.value = index;
+                    option.text = group.name;
+                    animationList.appendChild(option);
+                });
+
+                // Play first animation if available
+                if (container.animationGroups.length > 0) {
+                    window.currentAnimationGroup = container.animationGroups[0];
+                    window.currentAnimationGroup.start(true);
+                }
+
+                statusMessage.textContent = 'Character loaded successfully!';
+                URL.revokeObjectURL(blobUrl);
+            }, null, function (error) {
+                statusMessage.textContent = 'Error loading character: ' + error.message;
+                URL.revokeObjectURL(blobUrl);
+            }, ".glb");
+
+        } catch (error) {
+            statusMessage.textContent = 'Error: ' + error.message;
+        }
+    });
+});

index.html

@@ -145,6 +145,33 @@
         #cameraControlPanel button:active {
             background-color: #888 !important;
         }
+        
+        .upload-section {
+            margin: 10px 0;
+            position: relative;
+        }
+        
+        #characterUpload {
+            opacity: 0;
+            width: 0.1px;
+            height: 0.1px;
+            position: absolute;
+        }
+        
+        .upload-label {
+            display: block;
+            padding: 8px 12px;
+            background-color: #4CAF50;
+            color: white;
+            border-radius: 4px;
+            cursor: pointer;
+            text-align: center;
+            margin: 5px 0;
+        }
+        
+        .upload-label:hover {
+            background-color: #45a049;
+        }
     </style>
     <!-- BabylonJS and loaders -->
     <script src="https://cdn.babylonjs.com/babylon.js"></script>
@@ -156,6 +183,10 @@
     </div>
     <div id="controlPanel">
         <h3>Animation Controls</h3>
+        <div class="upload-section">
+            <input type="file" id="characterUpload" accept=".glb">
+            <label for="characterUpload" class="upload-label">Upload Character (.glb)</label>
+        </div>
         <select id="animationList"></select>
         <button id="playBtn">Play</button>
         <button id="pauseBtn">Pause</button>
@@ -203,6 +234,7 @@ <h3>Sprite Sheet Generator</h3>
 
     <script src="js/SpriteSheetHelper.js"></script>
     <script src="js/fbxViewer.js"></script>
+    <script src="characterLoader.js"></script>
 
     <!-- Add compatibility check -->
     <script>

js/fbxViewer.js

@@ -1,4 +1,4 @@
-document.addEventListener('DOMContentLoaded', function() {
+document.addEventListener('DOMContentLoaded', async function() {
     // Get references to HTML elements
     const canvas = document.getElementById('renderCanvas');
     const animationList = document.getElementById('animationList');
@@ -87,8 +87,8 @@ document.addEventListener('DOMContentLoaded', function() {
 
     // Create the scene
     const createScene = async function() {
-        // Create a basic scene
-        scene = new BABYLON.Scene(engine);
+        const scene = new BABYLON.Scene(engine);
+        window.scene = scene; // Make scene globally accessible
 
         // Set transparent background by setting alpha to 0
         scene.clearColor = new BABYLON.Color4(0, 0, 0, 0);
@@ -180,6 +180,9 @@ document.addEventListener('DOMContentLoaded', function() {
         // Create camera adjustment UI
         createCameraControls();
 
+        // Dispatch event when scene is ready
+        window.dispatchEvent(new CustomEvent('sceneReady'));
+        
         return scene;
     };
 
@@ -979,46 +982,62 @@ document.addEventListener('DOMContentLoaded', function() {
     }
 
     // Create and set up the scene
-    createScene().then(() => {
-        // Register event listeners
-        playBtn.addEventListener('click', () => {
-            const selectedIndex = parseInt(animationList.value);
-            playAnimation(selectedIndex);
-        });
-        
-        pauseBtn.addEventListener('click', () => {
-            if (currentAnimationGroup) {
-                currentAnimationGroup.pause();
-                showStatus(`Paused animation: ${currentAnimationGroup.name}`);
-            }
-        });
-        
-        animationList.addEventListener('change', () => {
-            const selectedIndex = parseInt(animationList.value);
-            playAnimation(selectedIndex);
-        });
-        
-        // Add sprite sheet recording event listener
-        recordBtn.addEventListener('click', startRecording);
+    try {
+        scene = await createScene();
 
-        // Run the render loop with frame capture REMOVED from here
+        // Only start render loop after scene is created
         engine.runRenderLoop(() => {
-            scene.render();
-            // We'll handle frame capture separately with the recordingLoop function
+            if (scene) {
+                scene.render();
+            }
         });
-        
+
         // Handle window resize
         window.addEventListener('resize', () => {
-            // Resize the engine
             engine.resize();
-            
-            // Ensure camera maintains square ratio
-            updateOrthoCamera();
-            
-            // Update canvas size to remain square
-            const size = Math.min(window.innerHeight, window.innerWidth);
-            canvas.style.width = `${size}px`;
-            canvas.style.height = `${size}px`;
         });
+    } catch (error) {
+        console.error("Error creating scene:", error);
+    }
+
+    // Register event listeners
+    playBtn.addEventListener('click', () => {
+        const selectedIndex = parseInt(animationList.value);
+        playAnimation(selectedIndex);
+    });
+    
+    pauseBtn.addEventListener('click', () => {
+        if (currentAnimationGroup) {
+            currentAnimationGroup.pause();
+            showStatus(`Paused animation: ${currentAnimationGroup.name}`);
+        }
+    });
+    
+    animationList.addEventListener('change', () => {
+        const selectedIndex = parseInt(animationList.value);
+        playAnimation(selectedIndex);
+    });
+    
+    // Add sprite sheet recording event listener
+    recordBtn.addEventListener('click', startRecording);
+    
+    // Run the render loop with frame capture REMOVED from here
+    engine.runRenderLoop(() => {
+        scene.render();
+        // We'll handle frame capture separately with the recordingLoop function
+    });
+    
+    // Handle window resize
+    window.addEventListener('resize', () => {
+        // Resize the engine
+        engine.resize();
+        
+        // Ensure camera maintains square ratio
+        updateOrthoCamera();
+        
+        // Update canvas size to remain square
+        const size = Math.min(window.innerHeight, window.innerWidth);
+        canvas.style.width = `${size}px`;
+        canvas.style.height = `${size}px`;
     });
 });