Jump to content

Test: Difference between revisions

← Older editNewer edit →
VisualWikitext
No edit summary
No edit summary
Line 24: Line 24:
<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>
     <select id="bearTexture" onchange="changeBearTexture()" style="padding: 5px; border: 1px solid #ccc; border-radius: 4px;">
     <select id="bearTexture" style="padding: 5px; border: 1px solid #ccc; border-radius: 4px;">
         <option value="brown">Brown Bear</option>
         <option value="brown">Brown Bear</option>
         <option value="black">Black Bear</option>
         <option value="black">Black Bear</option>
Line 62: Line 62:


<script>
<script>
const modelViewer = document.getElementById('bearModel');
// Ensure everything is in global scope for MediaWiki
const loadingStatus = document.getElementById('loadingStatus');
window.bearTextures = {
const controlsInfo = document.getElementById('controlsInfo');
 
// Define texture URLs
const textures = {
     brown: 'https://survivalcraft.wiki/content/Textures/Creatures/Bear_Brown.png',
     brown: 'https://survivalcraft.wiki/content/Textures/Creatures/Bear_Brown.png',
     black: 'https://survivalcraft.wiki/content/Textures/Creatures/Bear_Black.png'
     black: 'https://survivalcraft.wiki/content/Textures/Creatures/Bear_Black.png'
};
};


// Track loading state
window.changeBearTexture = function() {
modelViewer.addEventListener('load', () => {
    console.log('Model loaded successfully');
    loadingStatus.textContent = 'Model loaded successfully!';
    controlsInfo.style.display = 'block';
   
    // Apply initial texture
    setTimeout(() => {
        changeBearTexture();
    }, 100);
});
 
modelViewer.addEventListener('error', (event) => {
    console.error('Model loading error:', event);
    loadingStatus.textContent = 'Error loading model. Check browser console.';
    loadingStatus.style.color = '#d63031';
});
 
modelViewer.addEventListener('progress', (event) => {
    const progress = event.detail.totalProgress;
    loadingStatus.textContent = `Loading model... ${Math.round(progress * 100)}%`;
});
 
function changeBearTexture() {
     const selector = document.getElementById('bearTexture');
     const selector = document.getElementById('bearTexture');
     const selectedTexture = selector.value;
     const selectedTexture = selector.value;
      
      
     console.log('Attempting to change texture to:', selectedTexture);
     console.log('Attempting to change texture to:', selectedTexture);
   
    const modelViewer = document.getElementById('bearModel');
      
      
     // Wait for model to be fully loaded
     // Wait for model to be fully loaded
     if (modelViewer.loaded) {
     if (modelViewer && modelViewer.loaded) {
         try {
         try {
             // Try to access the model's materials
             // Try to access the model's materials
Line 129: Line 104:
                         };
                         };
                         img.onerror = () => {
                         img.onerror = () => {
                             console.error('Failed to load texture:', textures[selectedTexture]);
                             console.error('Failed to load texture:', window.bearTextures[selectedTexture]);
                         };
                         };
                         img.src = textures[selectedTexture];
                         img.src = window.bearTextures[selectedTexture];
                     }
                     }
                 });
                 });
Line 141: Line 116:
         console.log('Model not yet loaded, will apply texture after load');
         console.log('Model not yet loaded, will apply texture after load');
     }
     }
}
};
 
// Initialize when DOM is ready
function initBearModel() {
    const modelViewer = document.getElementById('bearModel');
    const loadingStatus = document.getElementById('loadingStatus');
    const controlsInfo = document.getElementById('controlsInfo');
    const textureSelector = document.getElementById('bearTexture');
   
    if (!modelViewer) {
        console.error('Model viewer element not found');
        return;
    }
   
    // Add event listener to texture selector
    if (textureSelector) {
        textureSelector.addEventListener('change', window.changeBearTexture);
    }
 
    // Track loading state
    modelViewer.addEventListener('load', () => {
        console.log('Model loaded successfully');
        if (loadingStatus) loadingStatus.textContent = 'Model loaded successfully!';
        if (controlsInfo) controlsInfo.style.display = 'block';
       
        // Apply initial texture
        setTimeout(() => {
            window.changeBearTexture();
        }, 100);
    });
 
    modelViewer.addEventListener('error', (event) => {
        console.error('Model loading error:', event);
        if (loadingStatus) {
            loadingStatus.textContent = 'Error loading model. Check browser console.';
            loadingStatus.style.color = '#d63031';
        }
    });
 
    modelViewer.addEventListener('progress', (event) => {
        const progress = event.detail.totalProgress;
        if (loadingStatus) {
            loadingStatus.textContent = `Loading model... ${Math.round(progress * 100)}%`;
        }
    });


// Debug: Log when everything is ready
    // Debug: Log when everything is ready
document.addEventListener('DOMContentLoaded', () => {
     console.log('Bear model initialized, model-viewer should load');
     console.log('DOM loaded, model-viewer should initialize');
      
      
     // Check if model-viewer is defined
     // Check if model-viewer is defined
     if (typeof customElements.get('model-viewer') === 'undefined') {
     if (typeof customElements.get('model-viewer') === 'undefined') {
         console.error('model-viewer component not loaded');
         console.error('model-viewer component not loaded');
         loadingStatus.textContent = 'Error: model-viewer component failed to load';
         if (loadingStatus) {
        loadingStatus.style.color = '#d63031';
            loadingStatus.textContent = 'Error: model-viewer component failed to load';
            loadingStatus.style.color = '#d63031';
        }
     }
     }
});
}
 
// Initialize when DOM is ready
if (document.readyState === 'loading') {
    document.addEventListener('DOMContentLoaded', initBearModel);
} else {
    initBearModel();
}
</script>
</script>
</html>
</html>
Retrieved from "https://survivalcraft.wiki/Test"