Jump to content

Test: Difference between revisions

← Older editNewer edit →
VisualWikitext
No edit summary
No edit summary
Line 18: Line 18:


<html>
<html>
<head>
<!-- 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://unpkg.com/@google/model-viewer/dist/model-viewer.min.js"></script>
  <style>
 
     model-viewer {
<!-- Bear Texture Selection -->
      width: 100%;
<div style="margin-bottom: 10px;">
      height: 500px;
     <label for="bearTexture" style="font-weight: bold; margin-right: 10px;">Bear Type:</label>
      background-color: #eee;
    <select id="bearTexture" onchange="changeBearTexture()" style="padding: 5px; border: 1px solid #ccc; border-radius: 4px;">
    }
        <option value="brown">Brown Bear</option>
  </style>
        <option value="black">Black Bear</option>
</head>
    </select>
<body>
</div>
<model-viewer id="bearModel"
 
  src="https://survivalcraft.wiki/content/Models/Bear.glb"
<model-viewer  
  ar shadow-intensity="1" camera-controls touch-action="pan-y"
    id="bearModel"
  environment-image="neutral"
    src="https://survivalcraft.wiki/content/Models/Bear.glb"
  auto-rotate>
    alt="3D Bear Model from Survivalcraft"
    auto-rotate
    camera-controls
    background-color="#f0f0f0"
    shadow-intensity="1"
    style="width: 400px; height: 400px; border: 1px solid #ccc; border-radius: 8px;"
    loading="lazy"
    reveal="interaction">
   
    <!-- Fallback content for browsers that don't support model-viewer -->
    <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 -->
    <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>
    </div>
</model-viewer>
</model-viewer>


<script type="module">
<!-- JavaScript for texture switching -->
const modelViewer = document.querySelector('#bearModel');
<script>
 
function changeBearTexture() {
modelViewer.addEventListener('load', async () => {
    const selector = document.getElementById('bearTexture');
  try {
    const modelViewer = document.getElementById('bearModel');
     console.log('Model loaded, attempting to change texture...');
     const selectedTexture = selector.value;
      
      
     // Method 1: Try to access Three.js scene directly
     // Define texture URLs
     const scene = modelViewer.model.scene || modelViewer.model;
     const textures = {
        brown: 'https://survivalcraft.wiki/content/Textures/Creatures/Bear_Brown.png',
        black: 'https://survivalcraft.wiki/content/Textures/Creatures/Bear_Black.png'
    };
      
      
     if (scene) {
     // Wait for model to load, then apply texture
      scene.traverse((child) => {
    modelViewer.addEventListener('load', () => {
         if (child.isMesh && child.material) {
         const material = modelViewer.model.materials[0];
          console.log('Found mesh with material:', child.name);
        if (material && material.pbrMetallicRoughness) {
         
             // Create a new texture
          // Create a new texture loader
             const textureLoader = new THREE.TextureLoader();
          const loader = new Image();
             textureLoader.load(textures[selectedTexture], (texture) => {
          loader.crossOrigin = 'anonymous';
                 material.pbrMetallicRoughness.baseColorTexture.source.source = texture.image;
          loader.onload = () => {
                 material.pbrMetallicRoughness.baseColorTexture.needsUpdate = true;
             // Create canvas to convert image to texture
             });
             const canvas = document.createElement('canvas');
            const ctx = canvas.getContext('2d');
             canvas.width = loader.width;
            canvas.height = loader.height;
            ctx.drawImage(loader, 0, 0);
           
            // Apply to material
            if (Array.isArray(child.material)) {
              child.material.forEach(mat => {
                 if (mat.map) {
                  mat.map.image = canvas;
                  mat.map.needsUpdate = true;
                }
                mat.needsUpdate = true;
              });
            } else {
              if (child.material.map) {
                child.material.map.image = canvas;
                 child.material.map.needsUpdate = true;
              }
              child.material.needsUpdate = true;
             }
           
            modelViewer.requestUpdate();
            console.log('Texture updated successfully');
          };
          loader.src = 'https://survivalcraft.wiki/content/Textures/Creatures/Bear_Brown.png';
         }
         }
      });
    }, { once: false });
    }
      
      
     // Method 2: Try model-viewer's material system
     // Trigger model reload to apply texture
     const materials = modelViewer.model.materials;
     modelViewer.src = modelViewer.src;
    console.log('Found materials:', materials ? materials.map(m => m.name) : 'none');
}
   
 
  } catch (error) {
// Initialize with brown bear texture
     console.error('Error updating texture:', error);
document.addEventListener('DOMContentLoaded', () => {
  }
     changeBearTexture();
});
});
</script>


</script>
<!-- Controls information -->
</body>
<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"