Test

<script type="module" src="https://cdn.jsdelivr.net/npm/@google/model-viewer@3.4.0/dist/model-viewer.min.js"></script>

   <label for="bearTexture" style="font-weight: bold; margin-right: 10px;">Bear Type:</label>
   <select id="bearTexture" style="padding: 5px; border: 1px solid #ccc; border-radius: 4px;">
       <option value="brown">Brown Bear</option>
       <option value="black">Black Bear</option>
   </select>

<model-viewer

   id="bearModelViewer"
   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

<script type="module">

   const modelViewer = document.getElementById('bearModelViewer');
   const bearTextureSelector = document.getElementById('bearTexture');
   const statusMessage = document.getElementById('statusMessage');
   const controlsInfo = document.getElementById('controlsInfo');

   // Define texture URLs for different bear types
   const textures = {
       brown: 'https://survivalcraft.wiki/content/Textures/Creatures/Bear_Brown.png',
       black: 'https://survivalcraft.wiki/content/Textures/Creatures/Bear_Black.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.
       // Most simple GLB models have a single primary material.
       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 for texture swap.';
           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)}%`;
   });

   // Listen for changes in the bear type dropdown
   bearTextureSelector.addEventListener('change', applyBearTexture);

   // --- Functions ---

   /**
    * Applies the selected texture to the bear model.
    * Uses model-viewer's internal texture management.
    */
   async function applyBearTexture() {
       if (!mainModelMaterial) {
           console.warn('Model material not yet available. Cannot change texture.');
           return; // Exit if material isn't ready
       }

       const selectedTextureKey = bearTextureSelector.value;
       const textureUrl = textures[selectedTextureKey];

       if (!textureUrl) {
           console.warn(`No texture URL defined for "${selectedTextureKey}".`);
           return;
       }

       console.log(`Attempting to apply "${selectedTextureKey}" 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.
           // This is the primary texture that gives the model its color.
           mainModelMaterial.pbrMetallicRoughness.baseColorTexture.setTexture(newTexture);

           console.log(`Successfully applied ${selectedTextureKey} texture.`);
       } catch (error) {
           console.error(`Failed to apply ${selectedTextureKey} texture:`, error);
           statusMessage.textContent = `Error applying ${selectedTextureKey} 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';
       }
   });

</script>

Cell 1	Cell 2
Cell 3	Cell 4