I'm trying to change the texture of each of the materials in a gltf model when clicking on them, so far you can only change the materials but with random colors, but what I would like is that instead of colors they were jpg images or png
I also add a list of options, in which I can access different image textures, and what I would like is that when selecting one I can paint the material that I select in the 3d model
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<div class="topnav" id="myTopnav">
<a href="http:/pes/arkit/index.html" class="active">Home</a>
<a href="http:/pes/arkit/group1.html">Group 1</a>
<a href="http:/pes/arkit/group2.html">Group 2</a>
<a href="http:/pes/arkit/group3.html">Group 3</a>
<a href="http:/pes/arkit/Mcgaha.html">Mcgaha</a>
<a href="http:/pes/arkit/Parquet.html">Parquet</a>
<a href="http:/pes/arkit/Pebbles.html">Pebbles</a>
<a href="http:/pes/arkit/Specielity.html">Specielity</a>
<a href="#Colors">Colors</a>
<a href="#About">About</a>
<a href="javascript:void(0);" class="icon" onclick="myFunction()">
<i class="fa fa-bars"></i>
</a>
</div>
<img src="icons/CAP.PNG">
<script type="module" src="https://unpkg.com/@google/model-viewer/dist/model-viewer.min.js"></script>
<model-viewer id="helmet" src="" shadow-intensity="1" ar camera-controls touch-action="pan-y" disable-tap alt="A 3D model carousel">
<div class="slider">
<div class="slides">
<button class="slide" onclick="switchSrc(this, 'model1g1')" style="background-image: url('icons/Group1/3.jpg');" >
</button><button class="slide" onclick="switchSrc(this, 'model2g1')" style="background-image: url('icons/Group1/2.png');"></button>
</button><button class="slide" onclick="switchSrc(this, 'model3g1')" style="background-image: url('icons/Group1/1.jpg');">
</button>
<button class="slide" onclick="switchSrc(this, 'm')" style="background-image: url('icons/Group1/4.jpg');">
</button><button class="slide" onclick="switchSrc(this, 'm')" style="background-image: url('icons/Group1/5.jpg');">
</button><button class="slide" onclick="switchSrc(this, 'm')" style="background-image: url('icons/Group1/6.jpg');"></button>
</button><button class="slide" onclick="switchSrc(this, 'm')" style="background-image: url('icons/Group1/7.jpg');">
</button>
<button class="slide" onclick="switchSrc(this, 'm')" style="background-image: url('icons/Group1/8.jpg');">
</button><button class="slide" onclick="switchSrc(this, 'm')" style="background-image: url('icons/Group1/9.png');">
</button><button class="slide" onclick="switchSrc(this, 'mm')" style="background-image: url('icons/Group1/10.png');"></button>
</button><button class="slide" onclick="switchSrc(this, 'mm')" style="background-image: url('icons/Group1/11.png');">
</button>
<button class="slide" onclick="switchSrc(this, 'mm')" style="background-image: url('icons/Group1/12.png');">
</button><button class="slide" onclick="switchSrc(this, 'mm')" style="background-image: url('icons/Group1/25.jpg');">
</button><button class="slide" onclick="switchSrc(this, 'mm')" style="background-image: url('icons/Group1/26.jpg');"></button>
</button><button class="slide" onclick="switchSrc(this, 'mm')" style="background-image: url('icons/Group1/50.png');">
</button>
</div>
</div>
<p style= "color: #462ae2; font-size: 18pt; padding: 0% 0%;">Mosaic Design</p>
<div>
<p style="color: #0a0a0a; font-size: 18pt">Color 1</p>
<select id="click">
<option value="">Chose a color</option>
<option value="colores/Argento.jpg" >Argento</option>
<option value="colores/Bianco.jpg">Bianco</option>
<option value="colores/Breccia Azul.jpg">Breccia Azul</option>
<option value="colores/Breccia Nero.jpg">Breccia Nero</option>
<option value="colores/Carrara.jpg">Carrara</option>
<option value="colores/Grigio.jpg">Grigio</option>
<option value="colores/Montclair.jpg">Montclair</option>
<option value="colores/Orange.png">Orange</option>
<option value="colores/Pearl.jpg">Pearl</option>
<option value="colores/Pecan.jpg">Pecan</option>
<option value="colores/Royal.jpg">Royal</option>
<option value="colores/Sable.png">Sable</option>
<option value="colores/Sedona.jpg">Sedona</option>
</select>
</div>
<div>
<p style="color: #0a0a0a; font-size: 18pt">Color 2</p>
<select id="diffuses">
<option value="" >Chose a color</option>
<option value="colores/Argento.jpg">Argento</option>
<option value="colores/Bianco.jpg">Bianco</option>
<option value="colores/Breccia Azul.jpg">Breccia Azul</option>
<option value="colores/Breccia Nero.jpg">Breccia Nero</option>
<option value="colores/Carrara.jpg">Carrara</option>
<option value="colores/Grigio.jpg">Grigio</option>
<option value="colores/Montclair.jpg">Montclair</option>
<option value="colores/Orange.png">Orange</option>
<option value="colores/Pearl.jpg">Pearl</option>
<option value="colores/Pecan.jpg">Pecan</option>
<option value="colores/Royal.jpg">Royal</option>
<option value="colores/Sable.png">Sable</option>
<option value="colores/Sedona.jpg">Sedona</option>
</select>
</div>
<div>
<p style="color: #0a0a0a; font-size: 18pt">Color 3</p>
<select id="diffusess">
<option value="">Chose a color</option>
<option value="colores/Argento.jpg">Argento</option>
<option value="colores/Bianco.jpg">Bianco</option>
<option value="colores/Breccia Azul.jpg">Breccia Azul</option>
<option value="colores/Breccia Nero.jpg">Breccia Nero</option>
<option value="colores/Carrara.jpg">Carrara</option>
<option value="colores/Grigio.jpg">Grigio</option>
<option value="colores/Montclair.jpg">Montclair</option>
<option value="colores/Orange.png">Orange</option>
<option value="colores/Pearl.jpg">Pearl</option>
<option value="colores/Pecan.jpg">Pecan</option>
<option value="colores/Royal.jpg">Royal</option>
<option value="colores/Sable.png">Sable</option>
<option value="colores/Sedona.jpg">Sedona</option>
</select>
</div>
</div>
</model-viewer>
<script type="module">
let sequence1 = []
let sequence2 = []
let sequence3 = []
let sequenceo1 = []
let sequenceo2 = []
let sequenceo3 = []
//////////////load model////////////////////////////////////
const modelViewer = document.querySelector("model-viewer");
window.switchSrc = (element, name) => {
const base = "models/group1/" + name;
modelViewer.src = base + '.gltf';
modelViewer.poster = base + '.webp';
const slides = document.querySelectorAll(".slide");
slides.forEach((element) => {element.classList.remove("selected");});
element.classList.add("selected");
////////////////////change materials colors////////////////////////
const modelViewerTexture1 = document.querySelector("model-viewer#helmet");
modelViewer.addEventListener("load", () => {
const changeColor = (event) => {
const material = modelViewer.materialFromPoint(event.clientX, event.clientY);
material.pbrMetallicRoughness.
setBaseColorFactor([Math.random(), Math.random(), Math.random()]);
};
modelViewer.addEventListener("click", changeColor);
});
document.querySelector('#diffuse').addEventListener('input', (event) => {
createAndApplyTexture('baseColorTexture', event);
});
document.querySelector('#diffuses').addEventListener('input', (event) => {
createAndApplyTexture2('baseColorTexture', event);
});
document.querySelector('#diffusess').addEventListener('input', (event) => {
createAndApplyTexture3('baseColorTexture', event);
});
document.querySelector(".slider").addEventListener('beforexrselect', (ev) => {
// Keep slider interactions from affecting the XR scene.
ev.preventDefault();
}); };
</script>
<style>
/* Add a black background color to the top navigation */
.topnav {
background-color: #333;
overflow: hidden;
}
/* Style the links inside the navigation bar */
.topnav a {
float: left;
display: block;
color: #f2f2f2;
text-align: center;
padding: 14px 20px;
text-decoration: none;
font-size: 17px;
}
/* Change the color of links on hover */
.topnav a:hover {
background-color: #ddd;
color: black;
}
/* Add an active class to highlight the current page */
.topnav a.active {
background-color: #04AA6D;
color: white;
width: 9%;
height: 3%;
}
img{
width: 15%;
width: 15%;
background-color: #333;
padding: 0% 42.489%;
}
/* Hide the link that should open and close the topnav on small screens */
.topnav .icon {
display: none;
}
/* This keeps child nodes hidden while the element loads */
:not(:defined) > * {
display: none;
}
model-viewer {
width: 100%;
height: 100%;
background-color: #eee;
overflow-x: hidden;
}
.p
{
width: 100%;
height: 100%;
background-color: #eee;
overflow-x: hidden;
}
#ar-button:active {
background-color: #E8EAED;
}
#ar-button:focus {
outline: none;
}
#ar-button:focus-visible {
outline: 1px solid #4285f4;
}
@keyframes circle {
from { transform: translateX(-50%) rotate(0deg) translateX(50px) rotate(0deg); }
to { transform: translateX(-50%) rotate(360deg) translateX(50px) rotate(-360deg); }
}
@keyframes elongate {
from { transform: translateX(100px); }
to { transform: translateX(-100px); }
}
model-viewer > #ar-prompt {
position: absolute;
left: 50%;
bottom: 175px;
animation: elongate 2s infinite ease-in-out alternate;
display: none;
}
model-viewer[ar-status="session-started"] > #ar-prompt {
display: block;
}
model-viewer > #ar-prompt > img {
animation: circle 4s linear infinite;
}
model-viewer > #ar-failure {
position: absolute;
left: 50%;
transform: translateX(-50%);
bottom: 175px;
display: none;
}
model-viewer[ar-tracking="not-tracking"] > #ar-failure {
display: block;
}
.slider {
width: 100%;
height: 17%;
text-align: center;
overflow: hidden;
position: absolute;
bottom: 10px;
}
.slides {
display: flex;
overflow-x: auto;
scroll-snap-type: x mandatory;
scroll-behavior: smooth;
-webkit-overflow-scrolling: touch;
}
.slide {
scroll-snap-align: start;
flex-shrink: 0;
width: 100px;
height: 100px;
background-size: contain;
background-repeat: no-repeat;
background-position: center;
background-color: #fff;
margin-right: 10px;
border-radius: 10px;
border: none;
display: flex;
}
.slide.selected {
border: 2px solid #4285f4;
width: 100px;
height: 100px;
}
.slide:focus {
outline: none;
}
.slide:focus-visible {
outline: 1px solid #4285f4;
}
</style>
hope you can help me
