Test
This is a notice message |
This is a content issue |
This is a style issue |
⚠️ Unable to load 3D model.
Check your browser console for details.
Loading model...
<script 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';
}
});">type="module"</script>
| Cell 1 | Cell 2 |
| Cell 3 | Cell 4 |