|
|
| (48 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://cdn.jsdelivr.net/npm/@google/model-viewer@3.4.0/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"
| |
| environment-image="neutral"
| |
| exposure="1"
| |
| style="width: 400px; height: 400px; border: 1px solid #ccc; border-radius: 8px;"
| |
| loading="eager">
| |
|
| |
| <!-- Remove the poster slot to force immediate loading -->
| |
|
| |
| <!-- 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<br><small>Check console for details</small></p>
| |
| </div>
| |
| </model-viewer>
| |
| | |
| <!-- Loading status -->
| |
| <div id="loadingStatus" style="margin-top: 10px; font-size: 12px; color: #666;">
| |
| Loading model...
| |
| </div>
| |
| | |
| <!-- Controls information -->
| |
| <div id="controlsInfo" style="margin-top: 10px; font-size: 12px; color: #666; display: none;">
| |
| <strong>Controls:</strong> Click and drag to rotate • Scroll to zoom • Right-click and drag to pan
| |
| </div>
| |
| | |
| <script>
| |
| const modelViewer = document.getElementById('bearModel');
| |
| const loadingStatus = document.getElementById('loadingStatus');
| |
| const controlsInfo = document.getElementById('controlsInfo');
| |
| | |
| // 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'
| |
| }; | |
| | |
| // Track loading state
| |
| modelViewer.addEventListener('load', () => {
| |
| console.log('Model loaded successfully');
| |
| loadingStatus.textContent = 'Model loaded successfully!';
| |
| controlsInfo.style.display = 'block';
| |
|
| |
| // Apply initial texture
| |
| setTimeout(() => {
| |
| changeBearTexture();
| |
| }, 100);
| |
| });
| |
| | |
| modelViewer.addEventListener('error', (event) => {
| |
| console.error('Model loading error:', event);
| |
| loadingStatus.textContent = 'Error loading model. Check browser console.';
| |
| loadingStatus.style.color = '#d63031';
| |
| });
| |
| | |
| modelViewer.addEventListener('progress', (event) => {
| |
| const progress = event.detail.totalProgress;
| |
| loadingStatus.textContent = `Loading model... ${Math.round(progress * 100)}%`;
| |
| });
| |
| | |
| function changeBearTexture() {
| |
| const selector = document.getElementById('bearTexture');
| |
| const selectedTexture = selector.value;
| |
|
| |
| console.log('Attempting to change texture to:', selectedTexture);
| |
|
| |
| // Wait for model to be fully loaded
| |
| if (modelViewer.loaded) {
| |
| try {
| |
| // Try to access the model's materials
| |
| const scene = modelViewer.model;
| |
| if (scene) {
| |
| // This is a simplified approach - may need adjustment based on your GLB structure
| |
| scene.traverse((node) => {
| |
| if (node.isMesh && node.material) {
| |
| // Create image element to load texture
| |
| const img = new Image();
| |
| img.crossOrigin = 'anonymous';
| |
| img.onload = () => {
| |
| // Create canvas to handle the texture
| |
| const canvas = document.createElement('canvas');
| |
| const ctx = canvas.getContext('2d');
| |
| canvas.width = img.width;
| |
| canvas.height = img.height;
| |
| ctx.drawImage(img, 0, 0);
| |
|
| |
| // Apply to material
| |
| if (node.material.map) {
| |
| node.material.map.image = canvas;
| |
| node.material.map.needsUpdate = true;
| |
| }
| |
| console.log('Texture applied successfully');
| |
| };
| |
| img.onerror = () => {
| |
| console.error('Failed to load texture:', textures[selectedTexture]);
| |
| };
| |
| img.src = textures[selectedTexture];
| |
| }
| |
| });
| |
| }
| |
| } catch (error) {
| |
| console.error('Error applying texture:', error);
| |
| }
| |
| } else {
| |
| console.log('Model not yet loaded, will apply texture after load');
| |
| }
| |
| }
| |
| | |
| // Debug: Log when everything is ready
| |
| document.addEventListener('DOMContentLoaded', () => {
| |
| console.log('DOM loaded, model-viewer should initialize');
| |
|
| |
| // Check if model-viewer is defined
| |
| if (typeof customElements.get('model-viewer') === 'undefined') {
| |
| console.error('model-viewer component not loaded');
| |
| loadingStatus.textContent = 'Error: model-viewer component failed to load';
| |
| loadingStatus.style.color = '#d63031';
| |
| }
| |
| });
| |
| </script>
| |
| </html>
| |
