Jump to content

Test: Difference between revisions

From Survivalcraft Wiki
← Older edit
VisualWikitext
No edit summary
No edit summary
 
(36 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://cdn.jsdelivr.net/npm/@google/model-viewer@3.4.0/dist/model-viewer.min.js"></script>
|src=https://survivalcraft.wiki/content/Models/SoundGenerator.glb
 
|alt=Donkey
<div style="margin-bottom: 10px; font-family: sans-serif;">
|width=270px
    <label for="bearTexture" style="font-weight: bold; margin-right: 10px;">Bear Type:</label>
|height=200px
    <select id="bearTexture-{{PAGENAME}}" style="padding: 5px; border: 1px solid #ccc; border-radius: 4px;">
|interactionPrompt=false
        <option value="brown">Brown Bear</option>
|backgroundColor=transparent
        <option value="black">Black Bear</option>
|cameraControls=true
    </select>
|disableZoom=true
</div>
|cameraOrbit=220deg 75deg 4m
 
|ar=true
<model-viewer
|arModes=scene-viewer quick-look webxr
    id="bearModelViewer-{{PAGENAME}}"
|poster=https://survivalcraft.wiki/content/Models/SoundGenerator.webp
    src="https://survivalcraft.wiki/content/Models/Bear_Brown.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"
>
    <div slot="error" style="display: flex; align-items: center; justify-content: center; height: 100%; background: #ffe6e6; color: #d63031; font-family: sans-serif; text-align: center;">
        <p>⚠️ Unable to load 3D model.<br><small>Check your browser console for details.</small></p>
    </div>
</model-viewer>
 
<div id="statusMessage-{{PAGENAME}}" style="margin-top: 10px; font-size: 12px; color: #666; font-family: sans-serif;">
    Loading model...
</div>
 
<div id="controlsInfo-{{PAGENAME}}" style="margin-top: 10px; font-size: 12px; color: #666; font-family: sans-serif; display: none;">
    <strong>Controls:</strong> Click and drag to rotate • Scroll to zoom • Right-click and drag to pan
</div>
 
<script type="module">
(async () => {
    const jsCodeBase64 = `
        const modelViewer = document.getElementById('bearModelViewer-{{PAGENAME}}');
        const bearTextureSelector = document.getElementById('bearTexture-{{PAGENAME}}');
        const statusMessage = document.getElementById('statusMessage-{{PAGENAME}}');
        const controlsInfo = document.getElementById('controlsInfo-{{PAGENAME}}');
 
        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;
 
        modelViewer.addEventListener('load', async () => {
            console.log('3D model loaded successfully!');
            statusMessage.textContent = 'Model loaded successfully!';
            controlsInfo.style.display = 'block';
 
            if (modelViewer.model && modelViewer.model.materials.length > 0) {
                mainModelMaterial = modelViewer.model.materials[0];
                console.log('Identified main model material:', mainModelMaterial);
                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';
            }
        });
 
        modelViewer.addEventListener('error', (event) => {
            console.error('Error loading 3D model:', event);
            statusMessage.textContent = 'Error loading model. Check your browser console.';
            statusMessage.style.color = '#d63031';
        });
 
        modelViewer.addEventListener('progress', (event) => {
            const progress = event.detail.totalProgress;
            statusMessage.textContent = \`Loading model... \${Math.round(progress * 100)}%\`;
        });
 
        bearTextureSelector.addEventListener('change', applyBearTexture);
 
        async function applyBearTexture() {
            if (!mainModelMaterial) {
                console.warn('Model material not yet available. Cannot change texture.');
                return;
            }
 
            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 {
                const newTexture = await modelViewer.createTexture(textureUrl);
                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';
            }
        }
 
        document.addEventListener('DOMContentLoaded', () => {
            console.log('DOM fully loaded and parsed.');
 
            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';
            }
        });
    `;
 
    // Decode and execute the JavaScript
    const decodedJsCode = atob(jsCodeBase64.trim());
    const scriptElement = document.createElement('script');
    scriptElement.type = 'module';
    scriptElement.textContent = decodedJsCode;
    document.head.appendChild(scriptElement);
})();
</script>
</html>

Latest revision as of 18:47, 31 July 2025


Retrieved from "https://survivalcraft.wiki/index.php?title=Test&oldid=63301"