Spaces:

MySafeCode
/

threejsGLBandVoxels

Running

App Files Files Community

MySafeCode commited on 18 days ago

Commit

9ba4a16

verified ·

1 Parent(s): 40de165

Update index.html

Browse files

Files changed (1) hide show

index.html +100 -47

index.html CHANGED Viewed

@@ -3,7 +3,7 @@
 <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;
@@ -24,7 +24,7 @@
             background: rgba(0,0,0,0.8);
             padding: 15px;
             border-radius: 8px;
-            max-width: 380px;
         }
         #controls h3 {
             margin-top: 0;
@@ -35,7 +35,7 @@
         }
         label {
             display: inline-block;
-            width: 140px;
             font-size: 12px;
         }
         input[type="file"] {
@@ -121,7 +121,7 @@
     <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>
@@ -155,6 +155,12 @@
             <span id="ballSegmentsValue">8</span>
         </div>
         <div class="rotation-controls">
             <div class="control-group">
                 <label>Rotation Center:</label>
@@ -188,14 +194,14 @@
     </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);
@@ -250,7 +256,7 @@
                 return chunks;
             }
-            static createInstancedGeometry(voxData, renderMode = 'box', voxelSize = 0.8, ballSegments = 8) {
                 if (!voxData.voxels || !voxData.size) return null;
                 const voxels = voxData.voxels;
@@ -264,50 +270,80 @@
                     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() {
@@ -349,10 +385,10 @@
         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;
@@ -365,6 +401,7 @@
         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
@@ -419,15 +456,16 @@
                         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');
                     }
@@ -477,10 +515,12 @@
             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) {
@@ -496,15 +536,16 @@
             // 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');
                 }
             }
         }
@@ -527,6 +568,16 @@
             }
         }
         function centerRotationOnModel() {
             if (!currentModel) return;
@@ -605,6 +656,7 @@
         document.getElementById('voxelSize').addEventListener('input', updateVoxelSize);
         document.getElementById('ballSegments').addEventListener('input', updateBallSegments);
         // Animation loop
         function animate() {
@@ -622,16 +674,17 @@
         // 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>

 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>VOX Color Fix - Amplified Viewer</title>
     <style>
         body {
             margin: 0;
             background: rgba(0,0,0,0.8);
             padding: 15px;
             border-radius: 8px;
+            max-width: 400px;
         }
         #controls h3 {
             margin-top: 0;
         }
         label {
             display: inline-block;
+            width: 160px;
             font-size: 12px;
         }
         input[type="file"] {
     <div id="container"></div>
     <div id="controls">
+        <h3>VOX Color Amplifier</h3>
         <div class="control-group">
             <button class="btn" onclick="document.getElementById('glbFileInput').click()">Load GLB/GLTF</button>
             <span id="ballSegmentsValue">8</span>
         </div>
+        <div class="control-group" id="colorAmplifyControl" style="display: none;">
+            <label>Color Amplify:</label>
+            <input type="range" id="colorAmplify" min="0.1" max="50" step="0.1" value="1.0">
+            <span id="colorAmplifyValue">1.0</span>x
+        </div>
         <div class="rotation-controls">
             <div class="control-group">
                 <label>Rotation Center:</label>
     </div>
     <div id="loading">Loading...</div>
+    <div id="info">Click and drag to rotate • Scroll to zoom • Use color amplifier for VOX files!</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 proper color handling and amplification
         class VOXParser {
             static parse(buffer) {
                 const view = new DataView(buffer);
                 return chunks;
             }
+            static createInstancedGeometry(voxData, renderMode = 'box', voxelSize = 0.8, ballSegments = 8, colorAmplify = 1.0) {
                 if (!voxData.voxels || !voxData.size) return null;
                 const voxels = voxData.voxels;
                     baseGeometry = new THREE.BoxGeometry(voxelSize, voxelSize, voxelSize);
                 }
+                // Create materials for different colors instead of using vertex colors
+                const materials = [];
+                const colorMap = new Map();
+                // Create materials for each unique color in the palette
+                for (let i = 0; i < palette.length; i++) {
+                    const color = palette[i];
+                    const material = new THREE.MeshPhongMaterial({
+                        color: new THREE.Color(
+                            Math.min(1.0, (color.r / 255) * colorAmplify),
+                            Math.min(1.0, (color.g / 255) * colorAmplify),
+                            Math.min(1.0, (color.b / 255) * colorAmplify)
+                        ),
                         shininess: 30
+                    });
+                    materials.push(material);
+                    colorMap.set(i, materials.length - 1);
+                }
+                // Create groups of meshes by material for better performance
+                const meshGroups = new Map();
                 // Calculate offsets to center the model
                 const offsetX = voxData.size.x / 2;
                 const offsetY = voxData.size.y / 2;
                 const offsetZ = voxData.size.z / 2;
+                // Group voxels by color
                 for (let i = 0; i < voxels.length; i++) {
                     const voxel = voxels[i];
+                    const colorIndex = voxel.colorIndex - 1; // VOX colors start at 1
                     if (colorIndex >= 0 && colorIndex < palette.length) {
+                        const materialIndex = colorIndex;
+                        if (!meshGroups.has(materialIndex)) {
+                            meshGroups.set(materialIndex, []);
+                        }
+                        meshGroups.get(materialIndex).push({
+                            x: voxel.x - offsetX,
+                            y: voxel.y - offsetY,
+                            z: voxel.z - offsetZ
+                        });
                     }
                 }
+                // Create a group to hold all the voxel meshes
+                const voxelGroup = new THREE.Group();
+                // Create instanced meshes for each color group
+                for (const [materialIndex, positions] of meshGroups) {
+                    if (positions.length === 0) continue;
+                    const instancedMesh = new THREE.InstancedMesh(
+                        baseGeometry,
+                        materials[materialIndex],
+                        positions.length
+                    );
+                    const dummy = new THREE.Object3D();
+                    for (let i = 0; i < positions.length; i++) {
+                        const pos = positions[i];
+                        dummy.position.set(pos.x, pos.y, pos.z);
+                        dummy.updateMatrix();
+                        instancedMesh.setMatrixAt(i, dummy.matrix);
+                    }
+                    instancedMesh.castShadow = true;
+                    instancedMesh.receiveShadow = true;
+                    voxelGroup.add(instancedMesh);
+                }
+                return voxelGroup;
             }
             static generateDefaultPalette() {
         const defaultCameraLookAt = new THREE.Vector3(0, 0, 0);
         // Lighting setup - make it brighter for better color visibility
+        const ambientLight = new THREE.AmbientLight(0xffffff, 0.8);
         scene.add(ambientLight);
+        const directionalLight = new THREE.DirectionalLight(0xffffff, 1.0);
         directionalLight.position.set(10, 10, 5);
         directionalLight.castShadow = true;
         directionalLight.shadow.mapSize.width = 2048;
         let currentFileType = 'none'; // 'none', 'glb', 'vox'
         let autoRotateEnabled = true;
         let currentRenderMode = 'box';
+        let currentColorAmplify = 1.0;
         let modelCenter = new THREE.Vector3(0, 0, 0); // Store model center for rotation
         // File input handlers
                         voxData.size.z / 2 - voxData.size.z / 2
                     );
+                    const voxelGroup = VOXParser.createInstancedGeometry(
                         voxData,
                         currentRenderMode,
                         parseFloat(document.getElementById('voxelSize').value),
+                        parseInt(document.getElementById('ballSegments').value),
+                        currentColorAmplify
                     );
+                    if (voxelGroup) {
+                        loadModel(voxelGroup, 'vox');
                         showVOXControls(true);
                         updateModelInfo(`VOX: ${file.name} (${voxData.voxels.length} voxels)`, 'vox');
                     }
             const voxControls = document.getElementById('voxControls');
             const voxelSizeControl = document.getElementById('voxelSizeControl');
             const ballSegmentsControl = document.getElementById('ballSegmentsControl');
+            const colorAmplifyControl = document.getElementById('colorAmplifyControl');
             voxControls.style.display = show ? 'block' : 'none';
             voxelSizeControl.style.display = show ? 'block' : 'none';
             ballSegmentsControl.style.display = show && currentRenderMode === 'ball' ? 'block' : 'none';
+            colorAmplifyControl.style.display = show ? 'block' : 'none';
         }
         function setRenderMode(mode) {
             // Rebuild geometry if we have VOX data
             if (currentVOXData && currentFileType === 'vox') {
+                const voxelGroup = VOXParser.createInstancedGeometry(
                     currentVOXData,
                     mode,
                     parseFloat(document.getElementById('voxelSize').value),
+                    parseInt(document.getElementById('ballSegments').value),
+                    currentColorAmplify
                 );
+                if (voxelGroup) {
+                    loadModel(voxelGroup, 'vox');
                 }
             }
         }
             }
         }
+        function updateColorAmplify() {
+            const value = parseFloat(document.getElementById('colorAmplify').value);
+            document.getElementById('colorAmplifyValue').textContent = value.toFixed(1);
+            currentColorAmplify = value;
+            if (currentVOXData && currentFileType === 'vox') {
+                setRenderMode(currentRenderMode);
+            }
+        }
         function centerRotationOnModel() {
             if (!currentModel) return;
         document.getElementById('voxelSize').addEventListener('input', updateVoxelSize);
         document.getElementById('ballSegments').addEventListener('input', updateBallSegments);
+        document.getElementById('colorAmplify').addEventListener('input', updateColorAmplify);
         // Animation loop
         function animate() {
         // Handle window resize
         window.addEventListener('resize', () => {
             camera.aspect = window.innerWidth / window.innerHeight;
+            camera.updateProjectionMatrix();
             renderer.setSize(window.innerWidth, window.innerHeight);
         });
         // Initialize
         updateVoxelSize();
         updateBallSegments();
+        updateColorAmplify();
         updateModelInfo('Ready to load models', 'none');
         animate();
     </script>
 </body>
+</html>