Jump to content

Test: Difference between revisions

← Older edit
VisualWikitext
No edit summary
No edit summary
 
(46 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
}}


 
{{#widget:ModelViewer
 
|src=https://survivalcraft.wiki/content/Models/SoundGenerator.glb
<html>
|alt=Donkey
<!-- MediaWiki HTML snippet for 3D Bear Model -->
|width=270px
<script type="module" src="https://cdn.jsdelivr.net/npm/@google/model-viewer@3.4.0/dist/model-viewer.min.js"></script>
|height=200px
 
|interactionPrompt=false
<!-- Bear Texture Selection -->
|backgroundColor=transparent
<div style="margin-bottom: 10px;">
|cameraControls=true
    <label for="bearTexture" style="font-weight: bold; margin-right: 10px;">Bear Type:</label>
|disableZoom=true
    <select id="bearTexture" style="padding: 5px; border: 1px solid #ccc; border-radius: 4px;">
|cameraOrbit=220deg 75deg 4m
        <option value="brown">Brown Bear</option>
|ar=true
        <option value="black">Black Bear</option>
|arModes=scene-viewer quick-look webxr
    </select>
|poster=https://survivalcraft.wiki/content/Models/SoundGenerator.webp
</div>
}}
 
<model-viewer
    id="bearModel"
    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">
   
    <!-- Remove the poster slot to force immediate loading -->
   
    <!-- Error fallback -->
    <div slot="error" style="display: flex; align-items: center; justify-content: center; height: 100%; background: #ffe6e6; color: #d63031;">
        <p>⚠️ Unable to load 3D model<br><small>Check console for details</small></p>
    </div>
</model-viewer>
 
<!-- Loading status -->
<div id="loadingStatus" style="margin-top: 10px; font-size: 12px; color: #666;">
    Loading model...
</div>
 
<!-- Controls information -->
<div id="controlsInfo" style="margin-top: 10px; font-size: 12px; color: #666; display: none;">
    <strong>Controls:</strong> Click and drag to rotate • Scroll to zoom • Right-click and drag to pan
</div>
 
<script>
const modelViewer = document.getElementById('bearModel');
const loadingStatus = document.getElementById('loadingStatus');
const controlsInfo = document.getElementById('controlsInfo');
 
// Define texture URLs
const textures = {
    brown: 'https://survivalcraft.wiki/content/Textures/Creatures/Bear_Brown.png',
    black: 'https://survivalcraft.wiki/content/Textures/Creatures/Bear_Black.png'
};
 
// Track loading state
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 selectedTexture = selector.value;
   
    console.log('Attempting to change texture to:', selectedTexture);
   
    // Wait for model to be fully loaded
    if (modelViewer.loaded) {
        try {
            // Try to access the model's materials
            const scene = modelViewer.model;
            if (scene) {
                // This is a simplified approach - may need adjustment based on your GLB structure
                scene.traverse((node) => {
                    if (node.isMesh && node.material) {
                        // Create image element to load texture
                        const img = new Image();
                        img.crossOrigin = 'anonymous';
                        img.onload = () => {
                            // Create canvas to handle the texture
                            const canvas = document.createElement('canvas');
                            const ctx = canvas.getContext('2d');
                            canvas.width = img.width;
                            canvas.height = img.height;
                            ctx.drawImage(img, 0, 0);
                           
                            // Apply to material
                            if (node.material.map) {
                                node.material.map.image = canvas;
                                node.material.map.needsUpdate = true;
                            }
                            console.log('Texture applied successfully');
                        };
                        img.onerror = () => {
                            console.error('Failed to load texture:', textures[selectedTexture]);
                        };
                        img.src = textures[selectedTexture];
                    }
                });
            }
        } catch (error) {
            console.error('Error applying texture:', error);
        }
    } else {
        console.log('Model not yet loaded, will apply texture after load');
    }
}
 
// Debug: Log when everything is ready
document.addEventListener('DOMContentLoaded', () => {
    console.log('DOM loaded, model-viewer should initialize');
   
    // Check if model-viewer is defined
    if (typeof customElements.get('model-viewer') === 'undefined') {
        console.error('model-viewer component not loaded');
        loadingStatus.textContent = 'Error: model-viewer component failed to load';
        loadingStatus.style.color = '#d63031';
    }
});
</script>
</html>
Retrieved from "https://survivalcraft.wiki/Test"