Jump to content

Test: Difference between revisions

No edit summary
No edit summary
 
(56 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
}}


</table>
{{#widget:ModelViewer
<html>
|src=https://survivalcraft.wiki/content/Models/SoundGenerator.glb
<head>
|alt=Donkey
  <script type="module" src="https://ajax.googleapis.com/ajax/libs/model-viewer/4.0.0/model-viewer.min.js"></script>
|width=270px
</head>
|height=200px
<body>
|interactionPrompt=false
<model-viewer id="bearModel"
|backgroundColor=transparent
  src="https://survivalcraft.wiki/content/Models/Bear.glb"
|cameraControls=true
  ar shadow-intensity="1"
|disableZoom=true
  camera-controls touch-action="pan-y">
|cameraOrbit=220deg 75deg 4m
</model-viewer>
|ar=true
 
|arModes=scene-viewer quick-look webxr
<script type="module">
|poster=https://survivalcraft.wiki/content/Models/SoundGenerator.webp
  const modelViewer = document.querySelector('#bearModel');
}}
 
  modelViewer.addEventListener('load', () => {
    const THREE = modelViewer?.threejs;
    if (!THREE) {
      console.error('threejs not exposed by <model-viewer>');
      return;
    }
 
    // Find the mesh/material to change
    modelViewer.model.scene.traverse((node) => {
      if (node.isMesh) {
        const loader = new THREE.TextureLoader();
 
        loader.load('https://survivalcraft.wiki/content/Textures/Creatures/Bear_Brown.png', (texture) => {
          // Apply to material
          node.material.map = texture;
          node.material.needsUpdate = true;
        });
      }
    });
  });
</script>
</body>
</html>
 
 
<html>
<head>
  <script type="module" src="https://ajax.googleapis.com/ajax/libs/model-viewer/4.0.0/model-viewer.min.js"></script>
</head>
<body>
<model-viewer id="bearModel"
  src="https://survivalcraft.wiki/content/Models/Bear.glb"
  ar shadow-intensity="1" camera-controls touch-action="pan-y">
</model-viewer>
 
<script type="module">
const modelViewer = document.querySelector('#bearModel');
 
modelViewer.addEventListener('load', async () => {
  // Get all materials
  const materials = modelViewer.model.materials;
 
  // For demonstration, apply to the first material
  const material = materials[0];
 
  // Create Image object
  const texture = new Image();
  texture.src = 'https://survivalcraft.wiki/content/Textures/Creatures/Bear_Brown.png';
  await texture.decode(); // wait until loaded
 
  // Assign as baseColorTexture
  material.pbrMetallicRoughness.setBaseColorTexture(texture);
});
</script>
</body>
</html>