Test: Difference between revisions

← Older edit Newer edit →

VisualWikitext

@@ Line 20: / Line 20: @@
 <head>
    <script type="module" src="https://unpkg.com/@google/model-viewer/dist/model-viewer.min.js"></script>
+  <style>
+    model-viewer {
+      width: 100%;
+      height: 500px;
+      background-color: #eee;
+    }
+  </style>
 </head>
 <body>
 <model-viewer id="bearModel"
    src="https://survivalcraft.wiki/content/Models/Bear.glb"
-   ar shadow-intensity="1" camera-controls touch-action="pan-y">
+   ar shadow-intensity="1" camera-controls touch-action="pan-y"
+  environment-image="neutral"
+  auto-rotate>
 </model-viewer>
@@ Line 31: / Line 40: @@
 modelViewer.addEventListener('load', async () => {
-   const materials = modelViewer.model.materials;
+   try {
+    // Get the scene and materials
+    const scene = modelViewer.model.scene || modelViewer.model;
+    // Function to traverse and update materials
+    function updateMaterials(object) {
+      if (object.material) {
+        // Load the new texture
+        const textureLoader = new THREE.TextureLoader();
+        textureLoader.load(
+          'https://survivalcraft.wiki/content/Textures/Creatures/Bear_Brown.png',
+          (texture) => {
+            // Apply the texture to the material
+            if (Array.isArray(object.material)) {
+              object.material.forEach(mat => {
+                mat.map = texture;
+                mat.needsUpdate = true;
+              });
+            } else {
+              object.material.map = texture;
+              object.material.needsUpdate = true;
+            }
+            // Force a re-render
+            modelViewer.requestUpdate();
+          },
+          undefined,
+          (error) => {
+            console.error('Error loading texture:', error);
+          }
+        );
+      }
+      // Recursively check children
+      if (object.children) {
+        object.children.forEach(child => updateMaterials(child));
+      }
+    }
+    // Start the material update process
+    updateMaterials(scene);
+  } catch (error) {
+    console.error('Error updating materials:', error);
+  }
+});
-   console.log('Found materials:', materials.map(m => m.name)); // debug
+// Alternative approach using model-viewer's createTexture method (if available)
+modelViewer.addEventListener('load', async () => {
-  const material = materials[0]; // or find by name if you know it
+   try {
+    // This is an alternative approach that might work with newer versions
-  // Create an HTMLImageElement
+    const materials = modelViewer.model.materials;
-  const texture = new Image();
+    console.log('Found materials:', materials.map(m => m.name));
-  texture.src = 'https://survivalcraft.wiki/content/Textures/Creatures/Bear_Brown.png';
-  await texture.decode();
+    if (materials.length > 0) {
+      const material = materials[0];
-  // Use the setTexture method:
-   // first argument: name of texture slot (e.g., 'baseColorTexture')
+      // Try to use the Three.js material directly
-  // second argument: Image or HTMLCanvasElement
+      const threeMaterial = material.pbrMetallicRoughness || material;
-  await material.setTexture('baseColorTexture', texture);
+      if (threeMaterial && typeof threeMaterial.setValues === 'function') {
+        // Load texture using Three.js loader
+        const loader = new THREE.TextureLoader();
+        loader.load('https://survivalcraft.wiki/content/Textures/Creatures/Bear_Brown.png', (texture) => {
+          threeMaterial.setValues({
+            baseColorTexture: texture
+          });
+          modelViewer.requestUpdate();
+        });
+      }
+    }
+   } catch (error) {
+    console.log('Alternative approach failed:', error);
+  }
 });