Template:ModelViewer

<model-viewer

   id="bearModelViewer-ModelViewer"
   src="https://survivalcraft.wiki/content/Models/Bear.glb"
   alt="3D Bear Model from Survivalcraft"
   auto-rotate
   camera-controls
   background-color="#f0f0f0"
   shadow-intensity="1"
   environment-image="neutral"
   exposure="1"
   style="width: 400px; height: 400px; border: 1px solid #ccc; border-radius: 8px;"
   loading="eager"

>

⚠️ Unable to load 3D model.
Check your browser console for details.

</model-viewer>

   Loading model...

   Controls: Click and drag to rotate • Scroll to zoom • Right-click and drag to pan

   const statusMessage = document.getElementById('statusMessage-ModelViewer');
   const controlsInfo = document.getElementById('controlsInfo-ModelViewer');

   // Define the single texture URL for the brown bear
   const textureUrl = 'https://survivalcraft.wiki/content/Textures/Creatures/Bear_Brown.png';

   let mainModelMaterial = null; // We'll store a reference to the bear's main material here

   // --- Event Listeners ---

   // When the model is fully loaded and ready
   modelViewer.addEventListener('load', async () => {
       console.log('3D model loaded successfully!');
       statusMessage.textContent = 'Model loaded successfully!';
       controlsInfo.style.display = 'block';

       // Attempt to get the first material from the loaded model.
       if (modelViewer.model && modelViewer.model.materials.length > 0) {
           mainModelMaterial = modelViewer.model.materials[0];
           console.log('Identified main model material:', mainModelMaterial);
           // Apply the default (brown) texture right after the model loads
           await applyBearTexture();
       } else {
           console.warn('Could not find any materials in the loaded model. Texture changing might not work.');
           statusMessage.textContent = 'Model loaded, but materials not found.';
           statusMessage.style.color = '#d63031';
       }
   });

   // Handle any errors during model loading
   modelViewer.addEventListener('error', (event) => {
       console.error('Error loading 3D model:', event);
       statusMessage.textContent = 'Error loading model. Check your browser console.';
       statusMessage.style.color = '#d63031';
   });

   // Update loading progress
   modelViewer.addEventListener('progress', (event) => {
       const progress = event.detail.totalProgress;
       statusMessage.textContent = `Loading model... ${Math.round(progress * 100)}%`;
   });

   // --- Functions ---

   /**
    * Applies the single predefined texture to the bear model.
    */
   async function applyBearTexture() {
       if (!mainModelMaterial) {
           console.warn('Model material not yet available. Cannot apply texture.');
           return; // Exit if material isn't ready
       }

       console.log(`Attempting to apply texture from: ${textureUrl}`);

       try {
           // 1. Create a new texture object using model-viewer's utility
           const newTexture = await modelViewer.createTexture(textureUrl);

           // 2. Apply this new texture to the material's baseColorTexture property.
           mainModelMaterial.pbrMetallicRoughness.baseColorTexture.setTexture(newTexture);

           console.log('Successfully applied texture.');
       } catch (error) {
           console.error('Failed to apply texture:', error);
           statusMessage.textContent = 'Error applying texture.';
           statusMessage.style.color = '#d63031';
       }
   }

   // --- Initial Checks (for debugging) ---
   document.addEventListener('DOMContentLoaded', () => {
       console.log('DOM fully loaded and parsed.');

       // Verify if the model-viewer custom element has been registered
       if (typeof customElements.get('model-viewer') === 'undefined') {
           console.error('The <model-viewer> component failed to load or register.');
           statusMessage.textContent = 'Error: 3D viewer component not available.';
           statusMessage.style.color = '#d63031';
       }
   });">type="module"</script>