Jump to content

Test: Difference between revisions

← Older editNewer edit →
VisualWikitext
No edit summary
No edit summary
Line 18: Line 18:


<html>
<html>
<!-- MediaWiki HTML snippet for 3D Bear Model -->
<script type="module" src="https://cdn.jsdelivr.net/npm/@google/model-viewer@3.4.0/dist/model-viewer.min.js"></script>
<script type="module" src="https://cdn.jsdelivr.net/npm/@google/model-viewer@3.4.0/dist/model-viewer.min.js"></script>


<!-- Bear Texture Selection -->
<div style="margin-bottom: 10px;">
<div style="margin-bottom: 10px;">
     <label for="bearTexture" style="font-weight: bold; margin-right: 10px;">Bear Type:</label>
     <label for="bearTexture" style="font-weight: bold; margin-right: 10px;">Bear Type:</label>
Line 43: Line 41:
     loading="eager">
     loading="eager">
      
      
    <!-- Remove the poster slot to force immediate loading -->
   
    <!-- Error fallback -->
     <div slot="error" style="display: flex; align-items: center; justify-content: center; height: 100%; background: #ffe6e6; color: #d63031;">
     <div slot="error" style="display: flex; align-items: center; justify-content: center; height: 100%; background: #ffe6e6; color: #d63031;">
         <p>⚠️ Unable to load 3D model<br><small>Check console for details</small></p>
         <p>⚠️ Unable to load 3D model<br><small>Check console for details</small></p>
Line 51: Line 46:
</model-viewer>
</model-viewer>


<!-- Loading status -->
<div id="loadingStatus" style="margin-top: 10px; font-size: 12px; color: #666;">
<div id="loadingStatus" style="margin-top: 10px; font-size: 12px; color: #666;">
     Loading model...
     Loading model...
</div>
</div>


<!-- Controls information -->
<div id="controlsInfo" style="margin-top: 10px; font-size: 12px; color: #666; display: none;">
<div id="controlsInfo" style="margin-top: 10px; font-size: 12px; color: #666; display: none;">
     <strong>Controls:</strong> Click and drag to rotate • Scroll to zoom • Right-click and drag to pan
     <strong>Controls:</strong> Click and drag to rotate • Scroll to zoom • Right-click and drag to pan
</div>
</div>


<script>
<script type="module"> // Added type="module" here as well
const modelViewer = document.getElementById('bearModel');
const modelViewer = document.getElementById('bearModel');
const loadingStatus = document.getElementById('loadingStatus');
const loadingStatus = document.getElementById('loadingStatus');
const controlsInfo = document.getElementById('controlsInfo');
const controlsInfo = document.getElementById('controlsInfo');
const bearTextureSelector = document.getElementById('bearTexture');


// Define texture URLs
// Define texture URLs
Line 71: Line 65:
     black: 'https://survivalcraft.wiki/content/Textures/Creatures/Bear_Black.png'
     black: 'https://survivalcraft.wiki/content/Textures/Creatures/Bear_Black.png'
};
};
let currentMaterial = null; // To store a reference to the material we want to modify


// Track loading state
// Track loading state
modelViewer.addEventListener('load', () => {
modelViewer.addEventListener('load', async () => {
     console.log('Model loaded successfully');
     console.log('Model loaded successfully');
     loadingStatus.textContent = 'Model loaded successfully!';
     loadingStatus.textContent = 'Model loaded successfully!';
     controlsInfo.style.display = 'block';
     controlsInfo.style.display = 'block';
      
 
     // Apply initial texture
     // Get the first material from the model
     setTimeout(() => {
     // Assuming your bear model has one main material that controls its color/texture
         changeBearTexture();
     // You might need to inspect your .glb file to find the correct material index or name
     }, 100);
    if (modelViewer.model && modelViewer.model.materials.length > 0) {
        currentMaterial = modelViewer.model.materials[0]; // Get the first material
        console.log('Found model material:', currentMaterial);
        // Apply the initial texture
         changeBearTexture();  
     } else {
        console.warn('No materials found in the model.');
    }
});
});


Line 95: Line 98:
});
});


function changeBearTexture() {
// Event listener for texture selection change
     const selector = document.getElementById('bearTexture');
bearTextureSelector.addEventListener('change', changeBearTexture);
     const selectedTexture = selector.value;
 
      
async function changeBearTexture() {
     console.log('Attempting to change texture to:', selectedTexture);
     if (!currentMaterial) {
   
        console.warn('Model material not yet available for texture change.');
    // Wait for model to be fully loaded
        return;
     if (modelViewer.loaded) {
    }
 
     const selectedTexture = bearTextureSelector.value;
     const textureUrl = textures[selectedTexture];
 
     console.log('Attempting to change texture to:', selectedTexture, 'at URL:', textureUrl);
 
     if (textureUrl) {
         try {
         try {
             // Try to access the model's materials
             // Create a new texture using model-viewer's createTexture method
             const scene = modelViewer.model;
             const texture = await modelViewer.createTexture(textureUrl);
             if (scene) {
              
                // This is a simplified approach - may need adjustment based on your GLB structure
            // Apply the new texture to the baseColorTexture of the material
                scene.traverse((node) => {
            // This is the standard way to change the main color texture in glTF PBR materials
                    if (node.isMesh && node.material) {
            currentMaterial.pbrMetallicRoughness.baseColorTexture.setTexture(texture);
                        // Create image element to load texture
           
                        const img = new Image();
            console.log('Texture applied successfully:', selectedTexture);
                        img.crossOrigin = 'anonymous';
                        img.onload = () => {
                            // Create canvas to handle the texture
                            const canvas = document.createElement('canvas');
                            const ctx = canvas.getContext('2d');
                            canvas.width = img.width;
                            canvas.height = img.height;
                            ctx.drawImage(img, 0, 0);
                           
                            // Apply to material
                            if (node.material.map) {
                                node.material.map.image = canvas;
                                node.material.map.needsUpdate = true;
                            }
                            console.log('Texture applied successfully');
                        };
                        img.onerror = () => {
                            console.error('Failed to load texture:', textures[selectedTexture]);
                        };
                        img.src = textures[selectedTexture];
                    }
                });
            }
         } catch (error) {
         } catch (error) {
             console.error('Error applying texture:', error);
             console.error('Error creating or applying texture:', error);
            // Optionally, revert to a default or show an error state
         }
         }
     } else {
     } else {
         console.log('Model not yet loaded, will apply texture after load');
         console.warn('No texture URL found for:', selectedTexture);
     }
     }
}
}
Retrieved from "https://survivalcraft.wiki/Test"