|
|
| (55 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 () => {
| |
| const materials = modelViewer.model.materials;
| |
| | |
| console.log('Found materials:', materials.map(m => m.name)); // debug
| |
| | |
| const material = materials[0]; // or find by name if you know it
| |
| | |
| // Create an HTMLImageElement
| |
| const texture = new Image();
| |
| texture.src = 'https://survivalcraft.wiki/content/Textures/Bear_diffuse.png';
| |
| await texture.decode();
| |
| | |
| // Use the setTexture method:
| |
| // first argument: name of texture slot (e.g., 'baseColorTexture')
| |
| // second argument: Image or HTMLCanvasElement
| |
| await material.setTexture('baseColorTexture', texture);
| |
| }); | |
| | |
| </script>
| |
| </body>
| |
| </html>
| |
