Spaces:

MySafeCode
/

threejsGLBandVoxels

Running

App Files Files Community

MySafeCode commited on 21 days ago

Commit

40de165

verified ·

1 Parent(s): 621fe2f

Update index.html

Browse files

Files changed (1) hide show

index.html +636 -18

index.html CHANGED Viewed

@@ -1,19 +1,637 @@
-<!doctype html>
-<html>
-	<head>
-		<meta charset="utf-8" />
-		<meta name="viewport" content="width=device-width" />
-		<title>My static Space</title>
-		<link rel="stylesheet" href="style.css" />
-	</head>
-	<body>
-		<div class="card">
-			<h1>Welcome to your static Space!</h1>
-			<p>You can modify this app directly by editing <i>index.html</i> in the Files and versions tab.</p>
-			<p>
-				Also don't forget to check the
-				<a href="https://huggingface.co/docs/hub/spaces" target="_blank">Spaces documentation</a>.
-			</p>
-		</div>
-	</body>
 </html>

+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Fixed VOX Color Viewer</title>
+    <style>
+        body {
+            margin: 0;
+            padding: 0;
+            overflow: hidden;
+            font-family: Arial, sans-serif;
+            background: #1a1a1a;
+        }
+        #container {
+            width: 100vw;
+            height: 100vh;
+        }
+        #controls {
+            position: absolute;
+            top: 10px;
+            left: 10px;
+            color: white;
+            background: rgba(0,0,0,0.8);
+            padding: 15px;
+            border-radius: 8px;
+            max-width: 380px;
+        }
+        #controls h3 {
+            margin-top: 0;
+            color: #4CAF50;
+        }
+        .control-group {
+            margin: 12px 0;
+        }
+        label {
+            display: inline-block;
+            width: 140px;
+            font-size: 12px;
+        }
+        input[type="file"] {
+            display: none;
+        }
+        .btn {
+            background: #4CAF50;
+            color: white;
+            border: none;
+            padding: 8px 12px;
+            border-radius: 4px;
+            cursor: pointer;
+            font-size: 11px;
+            margin: 2px;
+        }
+        .btn:hover {
+            background: #45a049;
+        }
+        .btn.active {
+            background: #2196F3;
+        }
+        .btn:disabled {
+            background: #666;
+            cursor: not-allowed;
+        }
+        #info {
+            position: absolute;
+            bottom: 10px;
+            left: 10px;
+            color: white;
+            background: rgba(0,0,0,0.7);
+            padding: 10px;
+            border-radius: 5px;
+            font-size: 12px;
+        }
+        #loading {
+            position: absolute;
+            top: 50%;
+            left: 50%;
+            transform: translate(-50%, -50%);
+            color: white;
+            font-size: 18px;
+            display: none;
+        }
+        .model-info {
+            font-size: 11px;
+            color: #ccc;
+            margin-top: 8px;
+            min-height: 30px;
+        }
+        .render-mode {
+            display: flex;
+            gap: 5px;
+            margin: 8px 0;
+        }
+        .render-mode button {
+            flex: 1;
+        }
+        .file-types {
+            font-size: 10px;
+            color: #aaa;
+            margin-top: 4px;
+        }
+        .status-indicator {
+            display: inline-block;
+            width: 8px;
+            height: 8px;
+            border-radius: 50%;
+            margin-right: 6px;
+        }
+        .status-indicator.glb { background: #FF9800; }
+        .status-indicator.vox { background: #4CAF50; }
+        .status-indicator.none { background: #666; }
+        .rotation-controls {
+            background: rgba(255,255,255,0.1);
+            padding: 8px;
+            border-radius: 4px;
+            margin: 8px 0;
+        }
+    </style>
+</head>
+<body>
+    <div id="container"></div>
+    <div id="controls">
+        <h3>VOX & GLB Viewer</h3>
+        <div class="control-group">
+            <button class="btn" onclick="document.getElementById('glbFileInput').click()">Load GLB/GLTF</button>
+            <input type="file" id="glbFileInput" accept=".glb,.gltf">
+            <div class="file-types">GLB, GLTF files</div>
+        </div>
+        <div class="control-group">
+            <button class="btn" onclick="document.getElementById('voxFileInput').click()">Load VOX File</button>
+            <input type="file" id="voxFileInput" accept=".vox">
+            <div class="file-types">MagicaVoxel files</div>
+        </div>
+        <div class="control-group" id="voxControls" style="display: none;">
+            <label>VOX Render Mode:</label>
+            <div class="render-mode">
+                <button class="btn active" id="boxMode" onclick="setRenderMode('box')">Boxes</button>
+                <button class="btn" id="ballMode" onclick="setRenderMode('ball')">Balls</button>
+            </div>
+        </div>
+        <div class="control-group" id="voxelSizeControl" style="display: none;">
+            <label>Voxel Size:</label>
+            <input type="range" id="voxelSize" min="0.3" max="1.5" step="0.1" value="0.8">
+            <span id="voxelSizeValue">0.8</span>
+        </div>
+        <div class="control-group" id="ballSegmentsControl" style="display: none;">
+            <label>Ball Segments:</label>
+            <input type="range" id="ballSegments" min="4" max="16" step="1" value="8">
+            <span id="ballSegmentsValue">8</span>
+        </div>
+        <div class="rotation-controls">
+            <div class="control-group">
+                <label>Rotation Center:</label>
+                <button class="btn" onclick="centerRotationOnModel()">Center on Model</button>
+            </div>
+            <div class="control-group">
+                <label>Default Position:</label>
+                <button class="btn" onclick="resetToDefaultPosition()">Reset Position</button>
+            </div>
+        </div>
+        <div class="control-group">
+            <label>Rotation Speed:</label>
+            <input type="range" id="rotationSpeed" min="0" max="0.02" step="0.001" value="0.005">
+        </div>
+        <div class="control-group">
+            <label>Auto Rotate:</label>
+            <input type="checkbox" id="autoRotate" checked>
+        </div>
+        <div class="control-group">
+            <button class="btn" onclick="resetView()">Reset View</button>
+            <button class="btn" onclick="loadSampleModel('chest')">Load Sample Chest</button>
+        </div>
+        <div class="model-info">
+            <span class="status-indicator" id="statusIndicator"></span>
+            <span id="modelInfo">No model loaded</span>
+        </div>
+    </div>
+    <div id="loading">Loading...</div>
+    <div id="info">Click and drag to rotate • Scroll to zoom • Switch between balls and boxes for VOX!</div>
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r128/three.min.js"></script>
+    <script src="https://cdn.jsdelivr.net/npm/three@0.128.0/examples/js/loaders/GLTFLoader.js"></script>
+    <script src="https://cdn.jsdelivr.net/npm/three@0.128.0/examples/js/controls/OrbitControls.js"></script>
+    <script>
+        // Fixed VOX parser with correct color handling
+        class VOXParser {
+            static parse(buffer) {
+                const view = new DataView(buffer);
+                let offset = 0;
+                const header = new TextDecoder().decode(buffer.slice(0, 4));
+                if (header !== 'VOX ') {
+                    throw new Error('Invalid VOX file');
+                }
+                offset = 8; // Skip version
+                const chunks = {};
+                while (offset < buffer.byteLength) {
+                    const chunkId = new TextDecoder().decode(buffer.slice(offset, offset + 4));
+                    const chunkSize = view.getUint32(offset + 4, true);
+                    const childSize = view.getUint32(offset + 8, true);
+                    offset += 12;
+                    if (chunkId === 'SIZE') {
+                        const sizeX = view.getUint32(offset, true);
+                        const sizeY = view.getUint32(offset + 4, true);
+                        const sizeZ = view.getUint32(offset + 8, true);
+                        chunks.size = { x: sizeX, y: sizeY, z: sizeZ };
+                    } else if (chunkId === 'XYZI') {
+                        const numVoxels = view.getUint32(offset, true);
+                        const voxels = [];
+                        for (let i = 0; i < numVoxels; i++) {
+                            const x = view.getUint8(offset + 4 + i * 4);
+                            const y = view.getUint8(offset + 4 + i * 4 + 1);
+                            const z = view.getUint8(offset + 4 + i * 4 + 2);
+                            const colorIndex = view.getUint8(offset + 4 + i * 4 + 3);
+                            voxels.push({ x, y, z, colorIndex });
+                        }
+                        chunks.voxels = voxels;
+                    } else if (chunkId === 'RGBA') {
+                        const colors = [];
+                        for (let i = 0; i < 256; i++) {
+                            const r = view.getUint8(offset + i * 4);
+                            const g = view.getUint8(offset + i * 4 + 1);
+                            const b = view.getUint8(offset + i * 4 + 2);
+                            const a = view.getUint8(offset + i * 4 + 3);
+                            colors.push({ r, g, b, a });
+                        }
+                        chunks.palette = colors;
+                    }
+                    offset += chunkSize;
+                }
+                return chunks;
+            }
+            static createInstancedGeometry(voxData, renderMode = 'box', voxelSize = 0.8, ballSegments = 8) {
+                if (!voxData.voxels || !voxData.size) return null;
+                const voxels = voxData.voxels;
+                const palette = voxData.palette || this.generateDefaultPalette();
+                // Create base geometry based on render mode
+                let baseGeometry;
+                if (renderMode === 'ball') {
+                    baseGeometry = new THREE.SphereGeometry(voxelSize * 0.5, ballSegments, ballSegments);
+                } else {
+                    baseGeometry = new THREE.BoxGeometry(voxelSize, voxelSize, voxelSize);
+                }
+                // Create instanced mesh for performance - use a material that supports vertex colors
+                const instancedMesh = new THREE.InstancedMesh(
+                    baseGeometry,
+                    new THREE.MeshPhongMaterial({
+                        vertexColors: true,
+                        shininess: 30
+                    }),
+                    voxels.length
+                );
+                // Set up instance data
+                const dummy = new THREE.Object3D();
+                const color = new THREE.Color();
+                // Calculate offsets to center the model
+                const offsetX = voxData.size.x / 2;
+                const offsetY = voxData.size.y / 2;
+                const offsetZ = voxData.size.z / 2;
+                for (let i = 0; i < voxels.length; i++) {
+                    const voxel = voxels[i];
+                    // Position
+                    dummy.position.set(
+                        voxel.x - offsetX,
+                        voxel.y - offsetY,
+                        voxel.z - offsetZ
+                    );
+                    dummy.updateMatrix();
+                    instancedMesh.setMatrixAt(i, dummy.matrix);
+                    // Color - fix the color index mapping
+                    const colorIndex = voxel.colorIndex - 1; // VOX color indices start at 1
+                    if (colorIndex >= 0 && colorIndex < palette.length) {
+                        const colorData = palette[colorIndex];
+                        color.setRGB(colorData.r / 255, colorData.g / 255, colorData.b / 255);
+                        instancedMesh.setColorAt(i, color);
+                    }
+                }
+                instancedMesh.castShadow = true;
+                instancedMesh.receiveShadow = true;
+                return instancedMesh;
+            }
+            static generateDefaultPalette() {
+                const palette = [];
+                for (let i = 0; i < 256; i++) {
+                    palette.push({
+                        r: Math.random() * 255,
+                        g: Math.random() * 255,
+                        b: Math.random() * 255,
+                        a: 255
+                    });
+                }
+                return palette;
+            }
+        }
+    </script>
+    <script>
+        // Scene setup
+        const scene = new THREE.Scene();
+        scene.background = new THREE.Color(0x2a2a2a);
+        const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
+        camera.position.set(8, 8, 12);
+        const renderer = new THREE.WebGLRenderer({ antialias: true });
+        renderer.setSize(window.innerWidth, window.innerHeight);
+        renderer.shadowMap.enabled = true;
+        renderer.shadowMap.type = THREE.PCFSoftShadowMap;
+        document.getElementById('container').appendChild(renderer.domElement);
+        // Controls
+        const controls = new THREE.OrbitControls(camera, renderer.domElement);
+        controls.enableDamping = true;
+        controls.dampingFactor = 0.05;
+        // Store original camera position for reset
+        const defaultCameraPosition = new THREE.Vector3(8, 8, 12);
+        const defaultCameraLookAt = new THREE.Vector3(0, 0, 0);
+        // Lighting setup - make it brighter for better color visibility
+        const ambientLight = new THREE.AmbientLight(0xffffff, 0.7);
+        scene.add(ambientLight);
+        const directionalLight = new THREE.DirectionalLight(0xffffff, 0.9);
+        directionalLight.position.set(10, 10, 5);
+        directionalLight.castShadow = true;
+        directionalLight.shadow.mapSize.width = 2048;
+        directionalLight.shadow.mapSize.height = 2048;
+        scene.add(directionalLight);
+        // Current state
+        let currentModel = null;
+        let currentVOXData = null;
+        let currentFileType = 'none'; // 'none', 'glb', 'vox'
+        let autoRotateEnabled = true;
+        let currentRenderMode = 'box';
+        let modelCenter = new THREE.Vector3(0, 0, 0); // Store model center for rotation
+        // File input handlers
+        document.getElementById('glbFileInput').addEventListener('change', handleGLBLoad);
+        document.getElementById('voxFileInput').addEventListener('change', handleVOXLoad);
+        function handleGLBLoad(event) {
+            const file = event.target.files[0];
+            if (!file) return;
+            showLoading(true);
+            const reader = new FileReader();
+            reader.onload = function(e) {
+                const loader = new THREE.GLTFLoader();
+                loader.parse(e.target.result, '', function(gltf) {
+                    const model = gltf.scene;
+                    // Calculate model center
+                    const box = new THREE.Box3().setFromObject(model);
+                    modelCenter = box.getCenter(new THREE.Vector3());
+                    loadModel(model, 'glb');
+                    showVOXControls(false);
+                    showLoading(false);
+                    updateModelInfo(`GLB/GLTF: ${file.name}`, 'glb');
+                }, function(error) {
+                    console.error('Error loading GLTF:', error);
+                    showLoading(false);
+                });
+            };
+            reader.readAsArrayBuffer(file);
+        }
+        function handleVOXLoad(event) {
+            const file = event.target.files[0];
+            if (!file) return;
+            showLoading(true);
+            const reader = new FileReader();
+            reader.onload = function(e) {
+                try {
+                    const voxData = VOXParser.parse(e.target.result);
+                    currentVOXData = voxData;
+                    // Calculate model center
+                    modelCenter.set(
+                        voxData.size.x / 2 - voxData.size.x / 2,
+                        voxData.size.y / 2 - voxData.size.y / 2,
+                        voxData.size.z / 2 - voxData.size.z / 2
+                    );
+                    const instancedMesh = VOXParser.createInstancedGeometry(
+                        voxData,
+                        currentRenderMode,
+                        parseFloat(document.getElementById('voxelSize').value),
+                        parseInt(document.getElementById('ballSegments').value)
+                    );
+                    if (instancedMesh) {
+                        loadModel(instancedMesh, 'vox');
+                        showVOXControls(true);
+                        updateModelInfo(`VOX: ${file.name} (${voxData.voxels.length} voxels)`, 'vox');
+                    }
+                } catch (error) {
+                    console.error('Error loading VOX:', error);
+                }
+                showLoading(false);
+            };
+            reader.readAsArrayBuffer(file);
+        }
+        function loadModel(model, fileType) {
+            if (currentModel) {
+                scene.remove(currentModel);
+                if (currentModel.dispose) currentModel.dispose();
+            }
+            currentModel = model;
+            currentFileType = fileType;
+            scene.add(model);
+            // Center and scale model
+            const box = new THREE.Box3().setFromObject(model);
+            const center = box.getCenter(new THREE.Vector3());
+            const size = box.getSize(new THREE.Vector3());
+            // Update model center for rotation
+            modelCenter.copy(center);
+            model.position.sub(center);
+            const maxDim = Math.max(size.x, size.y, size.z);
+            const scale = 6 / maxDim;
+            model.scale.multiplyScalar(scale);
+            // Enable shadows
+            model.traverse(function(child) {
+                if (child.isMesh) {
+                    child.castShadow = true;
+                    child.receiveShadow = true;
+                }
+            });
+        }
+        function showVOXControls(show) {
+            const voxControls = document.getElementById('voxControls');
+            const voxelSizeControl = document.getElementById('voxelSizeControl');
+            const ballSegmentsControl = document.getElementById('ballSegmentsControl');
+            voxControls.style.display = show ? 'block' : 'none';
+            voxelSizeControl.style.display = show ? 'block' : 'none';
+            ballSegmentsControl.style.display = show && currentRenderMode === 'ball' ? 'block' : 'none';
+        }
+        function setRenderMode(mode) {
+            currentRenderMode = mode;
+            // Update button states
+            document.getElementById('boxMode').classList.toggle('active', mode === 'box');
+            document.getElementById('ballMode').classList.toggle('active', mode === 'ball');
+            // Show/hide ball segments control
+            const ballSegmentsControl = document.getElementById('ballSegmentsControl');
+            ballSegmentsControl.style.display = mode === 'ball' ? 'block' : 'none';
+            // Rebuild geometry if we have VOX data
+            if (currentVOXData && currentFileType === 'vox') {
+                const instancedMesh = VOXParser.createInstancedGeometry(
+                    currentVOXData,
+                    mode,
+                    parseFloat(document.getElementById('voxelSize').value),
+                    parseInt(document.getElementById('ballSegments').value)
+                );
+                if (instancedMesh) {
+                    loadModel(instancedMesh, 'vox');
+                }
+            }
+        }
+        function updateVoxelSize() {
+            const value = parseFloat(document.getElementById('voxelSize').value);
+            document.getElementById('voxelSizeValue').textContent = value.toFixed(1);
+            if (currentVOXData && currentFileType === 'vox') {
+                setRenderMode(currentRenderMode);
+            }
+        }
+        function updateBallSegments() {
+            const value = parseInt(document.getElementById('ballSegments').value);
+            document.getElementById('ballSegmentsValue').textContent = value;
+            if (currentVOXData && currentFileType === 'vox' && currentRenderMode === 'ball') {
+                setRenderMode('ball');
+            }
+        }
+        function centerRotationOnModel() {
+            if (!currentModel) return;
+            // Move controls target to model center
+            controls.target.copy(modelCenter);
+            controls.update();
+            // Optional: Move camera to look at the center
+            camera.lookAt(modelCenter);
+        }
+        function resetToDefaultPosition() {
+            // Reset camera to default position
+            camera.position.copy(defaultCameraPosition);
+            camera.lookAt(defaultCameraLookAt);
+            // Reset controls target to origin
+            controls.target.copy(defaultCameraLookAt);
+            controls.update();
+        }
+        function loadSampleModel(type) {
+            if (type === 'chest') {
+                const chestGroup = new THREE.Group();
+                const woodMaterial = new THREE.MeshPhongMaterial({ color: 0x8B4513 });
+                const metalMaterial = new THREE.MeshPhongMaterial({ color: 0x444444 });
+                const baseGeometry = new THREE.BoxGeometry(2, 1, 1.2);
+                const base = new THREE.Mesh(baseGeometry, woodMaterial);
+                base.position.y = -0.3;
+                base.castShadow = true;
+                chestGroup.add(base);
+                const lidGeometry = new THREE.BoxGeometry(2, 0.8, 1.2);
+                const lid = new THREE.Mesh(lidGeometry, woodMaterial);
+                lid.position.y = 0.2;
+                lid.castShadow = true;
+                chestGroup.add(lid);
+                const bandGeometry = new THREE.BoxGeometry(2.05, 0.08, 1.25);
+                const band = new THREE.Mesh(bandGeometry, metalMaterial);
+                band.position.y = -0.1;
+                chestGroup.add(band);
+                // Calculate center
+                const box = new THREE.Box3().setFromObject(chestGroup);
+                modelCenter = box.getCenter(new THREE.Vector3());
+                loadModel(chestGroup, 'glb');
+                showVOXControls(false);
+                updateModelInfo('Sample Chest Model (GLB)', 'glb');
+            }
+        }
+        function showLoading(show) {
+            document.getElementById('loading').style.display = show ? 'block' : 'none';
+        }
+        function updateModelInfo(info, fileType) {
+            const statusIndicator = document.getElementById('statusIndicator');
+            const modelInfo = document.getElementById('modelInfo');
+            statusIndicator.className = `status-indicator ${fileType || 'none'}`;
+            modelInfo.textContent = info;
+        }
+        function resetView() {
+            resetToDefaultPosition();
+        }
+        // Control event listeners
+        document.getElementById('autoRotate').addEventListener('change', function(e) {
+            autoRotateEnabled = e.target.checked;
+        });
+        document.getElementById('voxelSize').addEventListener('input', updateVoxelSize);
+        document.getElementById('ballSegments').addEventListener('input', updateBallSegments);
+        // Animation loop
+        function animate() {
+            requestAnimationFrame(animate);
+            controls.update();
+            if (currentModel && autoRotateEnabled) {
+                currentModel.rotation.y += parseFloat(document.getElementById('rotationSpeed').value);
+            }
+            renderer.render(scene, camera);
+        }
+        // Handle window resize
+        window.addEventListener('resize', () => {
+            camera.aspect = window.innerWidth / window.innerHeight;
+            camera.updateProjectionMatrix;
+            renderer.setSize(window.innerWidth, window.innerHeight);
+        });
+        // Initialize
+        updateVoxelSize();
+        updateBallSegments();
+        updateModelInfo('Ready to load models', 'none');
+        animate();
+    </script>
+</body>
 </html>