Jump to content

Test: Difference between revisions

← Older edit
VisualWikitext
No edit summary
No edit summary
 
(49 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://unpkg.com/@google/model-viewer/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" onchange="changeBearTexture()" 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"
    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>
 
<!-- JavaScript for texture switching -->
<script>
function changeBearTexture() {
    const selector = document.getElementById('bearTexture');
    const modelViewer = document.getElementById('bearModel');
    const selectedTexture = selector.value;
   
    // 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'
    };
   
    // Wait for model to load, then apply texture
    modelViewer.addEventListener('load', () => {
        const material = modelViewer.model.materials[0];
        if (material && material.pbrMetallicRoughness) {
            // Create a new texture
            const textureLoader = new THREE.TextureLoader();
            textureLoader.load(textures[selectedTexture], (texture) => {
                material.pbrMetallicRoughness.baseColorTexture.source.source = texture.image;
                material.pbrMetallicRoughness.baseColorTexture.needsUpdate = true;
            });
        }
    }, { once: false });
   
    // Trigger model reload to apply texture
    modelViewer.src = modelViewer.src;
}
 
// Initialize with brown bear texture
document.addEventListener('DOMContentLoaded', () => {
    changeBearTexture();
});
</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>
Retrieved from "https://survivalcraft.wiki/Test"