|
|
| (45 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 |
| <script type="module" src="https://cdn.jsdelivr.net/npm/@google/model-viewer@3.4.0/dist/model-viewer.min.js"></script>
| | |width=270px |
| | | |height=200px |
| <div style="margin-bottom: 10px;">
| | |interactionPrompt=false |
| <label for="bearTexture" style="font-weight: bold; margin-right: 10px;">Bear Type:</label>
| | |backgroundColor=transparent |
| <select id="bearTexture" style="padding: 5px; border: 1px solid #ccc; border-radius: 4px;">
| | |cameraControls=true |
| <option value="brown">Brown Bear</option>
| | |disableZoom=true |
| <option value="black">Black Bear</option>
| | |cameraOrbit=220deg 75deg 4m |
| </select>
| | |ar=true |
| </div>
| | |arModes=scene-viewer quick-look webxr |
| | | |poster=https://survivalcraft.wiki/content/Models/SoundGenerator.webp |
| <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">
| |
|
| |
| <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>
| |
| | |
| <div id="loadingStatus" style="margin-top: 10px; font-size: 12px; color: #666;">
| |
| Loading model...
| |
| </div>
| |
| | |
| <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 type="module"> // Added type="module" here as well
| |
| const modelViewer = document.getElementById('bearModel');
| |
| const loadingStatus = document.getElementById('loadingStatus');
| |
| const controlsInfo = document.getElementById('controlsInfo');
| |
| const bearTextureSelector = document.getElementById('bearTexture');
| |
| | |
| // 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'
| |
| }; | |
| | |
| let currentMaterial = null; // To store a reference to the material we want to modify
| |
| | |
| // Track loading state
| |
| modelViewer.addEventListener('load', async () => {
| |
| console.log('Model loaded successfully');
| |
| loadingStatus.textContent = 'Model loaded successfully!';
| |
| controlsInfo.style.display = 'block';
| |
| | |
| // Get the first material from the model
| |
| // Assuming your bear model has one main material that controls its color/texture
| |
| // You might need to inspect your .glb file to find the correct material index or name
| |
| if (modelViewer.model && modelViewer.model.materials.length > 0) {
| |
| currentMaterial = modelViewer.model.materials[0]; // Get the first material
| |
| console.log('Found model material:', currentMaterial);
| |
| // Apply the initial texture
| |
| changeBearTexture();
| |
| } else {
| |
| console.warn('No materials found in the model.');
| |
| }
| |
| });
| |
| | |
| 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)}%`;
| |
| });
| |
| | |
| // Event listener for texture selection change
| |
| bearTextureSelector.addEventListener('change', changeBearTexture);
| |
| | |
| async function changeBearTexture() {
| |
| if (!currentMaterial) {
| |
| console.warn('Model material not yet available for texture change.');
| |
| return;
| |
| }
| |
| | |
| const selectedTexture = bearTextureSelector.value;
| |
| const textureUrl = textures[selectedTexture];
| |
| | |
| console.log('Attempting to change texture to:', selectedTexture, 'at URL:', textureUrl);
| |
| | |
| if (textureUrl) {
| |
| try {
| |
| // Create a new texture using model-viewer's createTexture method
| |
| const texture = await modelViewer.createTexture(textureUrl);
| |
|
| |
| // Apply the new texture to the baseColorTexture of the material
| |
| // This is the standard way to change the main color texture in glTF PBR materials
| |
| currentMaterial.pbrMetallicRoughness.baseColorTexture.setTexture(texture);
| |
|
| |
| console.log('Texture applied successfully:', selectedTexture);
| |
| } catch (error) {
| |
| console.error('Error creating or applying texture:', error);
| |
| // Optionally, revert to a default or show an error state
| |
| }
| |
| } else {
| |
| console.warn('No texture URL found for:', selectedTexture);
| |
| }
| |
| }
| |
| | |
| // 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>
| |
