|
|
| Line 4: |
Line 4: |
|
| |
|
| <html> | | <html> |
| <script type="module" src="https://cdn.jsdelivr.net/npm/@google/model-viewer@3.4.0/dist/model-viewer.min.js"></script> | | <script type="module" src="https://ajax.googleapis.com/ajax/libs/model-viewer/4.0.0/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-{{PAGENAME}}" 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 | | <model-viewer |
| id="bearModelViewer-{{PAGENAME}}" | | id="bearModelViewer-{{PAGENAME}}" |
| src="https://survivalcraft.wiki/content/Models/Bear_Brown.glb" | | src="https://survivalcraft.wiki/content/Models/Bear_Brown.glb" |
| alt="3D Bear Model from Survivalcraft" | | alt="Brown Bear" |
| auto-rotate | | auto-rotate |
| | rotation-per-second="-20%" |
| camera-controls | | camera-controls |
| background-color="#f0f0f0" | | background-color="#f0f0f0" |
| Line 31: |
Line 23: |
| </div> | | </div> |
| </model-viewer> | | </model-viewer> |
|
| |
| <div id="statusMessage-{{PAGENAME}}" style="margin-top: 10px; font-size: 12px; color: #666; font-family: sans-serif;">
| |
| Loading model...
| |
| </div>
| |
|
| |
| <div id="controlsInfo-{{PAGENAME}}" 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>
| |
|
| |
| <script type="module">
| |
| (async () => {
| |
| const jsCodeBase64 = `
| |
| const modelViewer = document.getElementById('bearModelViewer-{{PAGENAME}}');
| |
| const bearTextureSelector = document.getElementById('bearTexture-{{PAGENAME}}');
| |
| const statusMessage = document.getElementById('statusMessage-{{PAGENAME}}');
| |
| const controlsInfo = document.getElementById('controlsInfo-{{PAGENAME}}');
| |
|
| |
| const textures = {
| |
| brown: 'https://survivalcraft.wiki/content/Textures/Creatures/Bear_Brown.png',
| |
| black: 'https://survivalcraft.wiki/content/Textures/Creatures/Bear_Black.png'
| |
| };
| |
|
| |
| let mainModelMaterial = null;
| |
|
| |
| modelViewer.addEventListener('load', async () => {
| |
| console.log('3D model loaded successfully!');
| |
| statusMessage.textContent = 'Model loaded successfully!';
| |
| controlsInfo.style.display = 'block';
| |
|
| |
| if (modelViewer.model && modelViewer.model.materials.length > 0) {
| |
| mainModelMaterial = modelViewer.model.materials[0];
| |
| console.log('Identified main model material:', mainModelMaterial);
| |
| await applyBearTexture();
| |
| } else {
| |
| console.warn('Could not find any materials in the loaded model. Texture changing might not work.');
| |
| statusMessage.textContent = 'Model loaded, but materials not found for texture swap.';
| |
| statusMessage.style.color = '#d63031';
| |
| }
| |
| });
| |
|
| |
| modelViewer.addEventListener('error', (event) => {
| |
| console.error('Error loading 3D model:', event);
| |
| statusMessage.textContent = 'Error loading model. Check your browser console.';
| |
| statusMessage.style.color = '#d63031';
| |
| });
| |
|
| |
| modelViewer.addEventListener('progress', (event) => {
| |
| const progress = event.detail.totalProgress;
| |
| statusMessage.textContent = \`Loading model... \${Math.round(progress * 100)}%\`;
| |
| });
| |
|
| |
| bearTextureSelector.addEventListener('change', applyBearTexture);
| |
|
| |
| async function applyBearTexture() {
| |
| if (!mainModelMaterial) {
| |
| console.warn('Model material not yet available. Cannot change texture.');
| |
| return;
| |
| }
| |
|
| |
| const selectedTextureKey = bearTextureSelector.value;
| |
| const textureUrl = textures[selectedTextureKey];
| |
|
| |
| if (!textureUrl) {
| |
| console.warn(\`No texture URL defined for "\${selectedTextureKey}".\`);
| |
| return;
| |
| }
| |
|
| |
| console.log(\`Attempting to apply "\${selectedTextureKey}" texture from: \${textureUrl}\`);
| |
|
| |
| try {
| |
| const newTexture = await modelViewer.createTexture(textureUrl);
| |
| mainModelMaterial.pbrMetallicRoughness.baseColorTexture.setTexture(newTexture);
| |
| console.log(\`Successfully applied \${selectedTextureKey} texture.\`);
| |
| } catch (error) {
| |
| console.error(\`Failed to apply \${selectedTextureKey} texture:\`, error);
| |
| statusMessage.textContent = \`Error applying \${selectedTextureKey} texture.\`;
| |
| statusMessage.style.color = '#d63031';
| |
| }
| |
| }
| |
|
| |
| document.addEventListener('DOMContentLoaded', () => {
| |
| console.log('DOM fully loaded and parsed.');
| |
|
| |
| if (typeof customElements.get('model-viewer') === 'undefined') {
| |
| console.error('The <model-viewer> component failed to load or register.');
| |
| statusMessage.textContent = 'Error: 3D viewer component not available.';
| |
| statusMessage.style.color = '#d63031';
| |
| }
| |
| });
| |
| `;
| |
|
| |
| // Decode and execute the JavaScript
| |
| const decodedJsCode = atob(jsCodeBase64.trim());
| |
| const scriptElement = document.createElement('script');
| |
| scriptElement.type = 'module';
| |
| scriptElement.textContent = decodedJsCode;
| |
| document.head.appendChild(scriptElement);
| |
| })();
| |
| </script>
| |
| </html> | | </html> |
