Jump to content

Test: Difference between revisions

← Older editNewer edit →
VisualWikitext
No edit summary
No edit summary
Line 19: Line 19:
<html>
<html>
<!-- MediaWiki HTML snippet for 3D Bear Model -->
<!-- MediaWiki HTML snippet for 3D Bear Model -->
<script type="module" src="https://unpkg.com/@google/model-viewer/dist/model-viewer.min.js"></script>
<script type="module" src="https://cdn.jsdelivr.net/npm/@google/model-viewer@3.4.0/dist/model-viewer.min.js"></script>


<!-- Bear Texture Selection -->
<!-- Bear Texture Selection -->
Line 38: Line 38:
     background-color="#f0f0f0"
     background-color="#f0f0f0"
     shadow-intensity="1"
     shadow-intensity="1"
    environment-image="neutral"
    exposure="1"
     style="width: 400px; height: 400px; border: 1px solid #ccc; border-radius: 8px;"
     style="width: 400px; height: 400px; border: 1px solid #ccc; border-radius: 8px;"
     loading="lazy"
     loading="eager">
    reveal="interaction">
      
      
     <!-- Fallback content for browsers that don't support model-viewer -->
     <!-- Remove the poster slot to force immediate loading -->
    <div slot="poster" style="display: flex; align-items: center; justify-content: center; height: 100%; background: #f5f5f5; color: #666;">
        <p>3D Bear Model<br><small>Click to load interactive model</small></p>
    </div>
      
      
     <!-- Error fallback -->
     <!-- Error fallback -->
     <div slot="error" style="display: flex; align-items: center; justify-content: center; height: 100%; background: #ffe6e6; color: #d63031;">
     <div slot="error" style="display: flex; align-items: center; justify-content: center; height: 100%; background: #ffe6e6; color: #d63031;">
         <p>⚠️ Unable to load 3D model</p>
         <p>⚠️ Unable to load 3D model<br><small>Check console for details</small></p>
     </div>
     </div>
</model-viewer>
</model-viewer>


<!-- JavaScript for texture switching -->
<!-- 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>
<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() {
function changeBearTexture() {
     const selector = document.getElementById('bearTexture');
     const selector = document.getElementById('bearTexture');
    const modelViewer = document.getElementById('bearModel');
     const selectedTexture = selector.value;
     const selectedTexture = selector.value;
      
      
     // Define texture URLs
     console.log('Attempting to change texture to:', selectedTexture);
    const textures = {
        brown: 'https://survivalcraft.wiki/content/Textures/Creatures/Bear_Brown.png',
        black: 'https://survivalcraft.wiki/content/Textures/Creatures/Bear_Black.png'
    };
      
      
     // Wait for model to load, then apply texture
     // Wait for model to be fully loaded
     modelViewer.addEventListener('load', () => {
     if (modelViewer.loaded) {
         const material = modelViewer.model.materials[0];
         try {
        if (material && material.pbrMetallicRoughness) {
            // Try to access the model's materials
            // Create a new texture
            const scene = modelViewer.model;
            const textureLoader = new THREE.TextureLoader();
            if (scene) {
            textureLoader.load(textures[selectedTexture], (texture) => {
                // This is a simplified approach - may need adjustment based on your GLB structure
                material.pbrMetallicRoughness.baseColorTexture.source.source = texture.image;
                scene.traverse((node) => {
                material.pbrMetallicRoughness.baseColorTexture.needsUpdate = true;
                    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);
         }
         }
     }, { once: false });
     } else {
   
        console.log('Model not yet loaded, will apply texture after load');
    // Trigger model reload to apply texture
     }
     modelViewer.src = modelViewer.src;
}
}


// Initialize with brown bear texture
// Debug: Log when everything is ready
document.addEventListener('DOMContentLoaded', () => {
document.addEventListener('DOMContentLoaded', () => {
     changeBearTexture();
     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>
</script>
<!-- Controls information -->
<div style="margin-top: 10px; font-size: 12px; color: #666;">
    <strong>Controls:</strong> Click and drag to rotate • Scroll to zoom • Right-click and drag to pan
</div>
</html>
</html>
Retrieved from "https://survivalcraft.wiki/Test"