Test: Difference between revisions
No edit summary |
No edit summary |
||
| Line 16: | Line 16: | ||
<html> | <html> | ||
<script type="module"> | <script type="module" src="https://cdn.jsdelivr.net/npm/@google/model-viewer@3.4.0/dist/model-viewer.min.js"></script> | ||
< | |||
<div style="margin-bottom: 10px; font-family: sans-serif;"> | |||
<label for="bearTexture" style="font-weight: bold; margin-right: 10px;">Bear Type:</label> | |||
<select id="bearTexture" style="padding: 5px; border: 1px solid #ccc; border-radius: 4px;"> | |||
<option value="brown">Brown Bear</option> | |||
<option value="black">Black Bear</option> | |||
</select> | |||
</div> | |||
<model-viewer | |||
id="bearModelViewer" | |||
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" | |||
> | |||
<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" style="margin-top: 10px; font-size: 12px; color: #666; font-family: sans-serif;"> | |||
Loading model... | |||
</div> | |||
<div id="controlsInfo" 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> | |||
</html> | |||
{{#tag:script|type="module"| | |||
const modelViewer = document.getElementById('bearModelViewer'); | const modelViewer = document.getElementById('bearModelViewer'); | ||
const bearTextureSelector = document.getElementById('bearTexture'); | const bearTextureSelector = document.getElementById('bearTexture'); | ||
| Line 41: | Line 76: | ||
// Attempt to get the first material from the loaded model. | // Attempt to get the first material from the loaded model. | ||
// Most simple GLB models have a single primary material. | // Most simple GLB models have a single primary material. | ||
if (modelViewer.model && modelViewer.model.materials.length > 0) { | if (modelViewer.model && modelViewer.model.materials.length > 0) { | ||
mainModelMaterial = modelViewer.model.materials[0]; | mainModelMaterial = modelViewer.model.materials[0]; | ||
console.log('Identified main model material:', mainModelMaterial); | console.log('Identified main model material:', mainModelMaterial); | ||
| Line 118: | Line 153: | ||
} | } | ||
}); | }); | ||
}} | |||