|
|
| (35 intermediate revisions by 2 users not shown) |
| Line 3: |
Line 3: |
| {{ambox|type=style|text=This is a style issue}} | | {{ambox|type=style|text=This is a style issue}} |
|
| |
|
| <html>
| |
| <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;">
| | {{#widget:ModelViewer |
| <label for="bearTexture" style="font-weight: bold; margin-right: 10px;">Bear Type:</label>
| | |src=https://survivalcraft.wiki/content/Models/Moose.glb |
| <select id="bearTexture-{{PAGENAME}}" style="padding: 5px; border: 1px solid #ccc; border-radius: 4px;">
| | |alt=Brown Bear |
| <option value="brown">Brown Bear</option>
| | |width=270px |
| <option value="black">Black Bear</option>
| | |height=200px |
| </select>
| | |interactionPrompt=false |
| </div>
| | |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}} |
|
| |
|
| <model-viewer
| | {{#widget:ModelViewer |
| id="bearModelViewer-{{PAGENAME}}"
| | |src=https://survivalcraft.wiki/content/Models/Boat.glb |
| src="https://survivalcraft.wiki/content/Models/Bear_Brown.glb"
| | |alt=Donkey |
| alt="3D Bear Model from Survivalcraft"
| | |width=270px |
| auto-rotate
| | |height=200px |
| camera-controls
| | |interactionPrompt=false |
| background-color="#f0f0f0"
| | |backgroundColor=transparent |
| shadow-intensity="1"
| | |cameraControls=true |
| environment-image="neutral"
| | |disableZoom=true |
| exposure="1"
| | |cameraOrbit=220deg 75deg 4m |
| style="width: 400px; height: 400px; border: 1px solid #ccc; border-radius: 8px;"
| | |ar=true |
| loading="eager"
| | |arModes=scene-viewer quick-look webxr |
| >
| | |poster=https://survivalcraft.wiki/content/Models/Bear_Brown.webp |
| <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-{{PAGENAME}}" style="margin-top: 10px; font-size: 12px; color: #666; font-family: sans-serif;">
| | {{#widget:ModelViewer |
| Loading model...
| | |src=https://survivalcraft.wiki/content/Models/SoundGenerator.glb |
| </div>
| | |alt=Donkey |
| | | |width=270px |
| <div id="controlsInfo-{{PAGENAME}}" style="margin-top: 10px; font-size: 12px; color: #666; font-family: sans-serif; display: none;">
| | |height=200px |
| <strong>Controls:</strong> Click and drag to rotate • Scroll to zoom • Right-click and drag to pan
| | |interactionPrompt=false |
| </div>
| | |backgroundColor=transparent |
| | | |cameraControls=true |
| <script type="module">
| | |disableZoom=true |
| (async () => {
| | |cameraOrbit=220deg 75deg 4m |
| const jsCodeBase64 = `
| | |ar=true |
| const modelViewer = document.getElementById('bearModelViewer-{{PAGENAME}}');
| | |arModes=scene-viewer quick-look webxr |
| const bearTextureSelector = document.getElementById('bearTexture-{{PAGENAME}}');
| | |poster=https://survivalcraft.wiki/content/Models/SoundGenerator.webp |
| 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>
| |
