Jump to content

Test: Difference between revisions

← Older edit
VisualWikitext
No edit summary
No edit summary
 
(39 intermediate revisions by 2 users not shown)
Line 4: Line 4:




<table>
{{#widget:ModelViewer
<tr>
|src=https://survivalcraft.wiki/content/Models/Moose.glb
<td>Cell 1</td>
|alt=Brown Bear
<td> Cell 2</td>
|width=270px
</tr>
|height=200px
|interactionPrompt=false
|backgroundColor=transparent
|cameraControls=true
|disableZoom=true
|cameraOrbit=220deg 75deg 4m
|ar=true
|arModes=scene-viewer quick-look webxr
|poster=https://survivalcraft.wiki/content/Models/Bear_Brown.webp}}


<tr>
{{#widget:ModelViewer
<td>Cell 3</td>
|src=https://survivalcraft.wiki/content/Models/Boat.glb
<td> Cell 4</td>
|alt=Donkey
</tr>
|width=270px
|height=200px
|interactionPrompt=false
|backgroundColor=transparent
|cameraControls=true
|disableZoom=true
|cameraOrbit=220deg 75deg 4m
|ar=true
|arModes=scene-viewer quick-look webxr
|poster=https://survivalcraft.wiki/content/Models/Bear_Brown.webp
}}


<html>
{{#widget:ModelViewer
<script type="module">
|src=https://survivalcraft.wiki/content/Models/SoundGenerator.glb
<nowiki>
|alt=Donkey
    const modelViewer = document.getElementById('bearModelViewer');
|width=270px
    const bearTextureSelector = document.getElementById('bearTexture');
|height=200px
    const statusMessage = document.getElementById('statusMessage');
|interactionPrompt=false
    const controlsInfo = document.getElementById('controlsInfo');
|backgroundColor=transparent
 
|cameraControls=true
    // Define texture URLs for different bear types
|disableZoom=true
    const textures = {
|cameraOrbit=220deg 75deg 4m
        brown: 'https://survivalcraft.wiki/content/Textures/Creatures/Bear_Brown.png',
|ar=true
        black: 'https://survivalcraft.wiki/content/Textures/Creatures/Bear_Black.png'
|arModes=scene-viewer quick-look webxr
    };
|poster=https://survivalcraft.wiki/content/Models/SoundGenerator.webp
 
}}
    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) { // THIS LINE IS NOW PROTECTED
            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';
        }
    });
</nowiki>
</script>
</html>
Retrieved from "https://survivalcraft.wiki/Test"