JSFiddle - React, Tailwind, and code Playground
HTML
<div style="min-width:250px;height:450px;">
<sayduck-viewer product="d9d023a0-cd3f-013b-dfef-3ae422ad63d9" mode="variants"></sayduck-viewer>
<button id="albedo">
Albedo
</button>
<button id="texture">
Albedo texture
</button>
<button id="metalness">
Metalness
</button>
<button id="roughness">
Roughness
</button>
<button id="emissiveColour">
Emissive
</button>
<button id="tiling">
Tiling 2x2
</button>
</div>
<script src="https://viewer.sayduck.com" type="module" async></script>
<script>
window.addEventListener(
"sayduck.api-ready",
(event) => {
const api = event.detail.instance;
console.log(api.scene.getAllMaterialUuids());
const materialUuid = "d9db14a0-cd3f-013b-a035-3ae422ad63d9";
document.querySelector("#albedo").onclick = () => {
api.scene.updateMaterial(materialUuid, {
albedoColour: {
red: 100,
green: 150,
blue: 0
}
})
}
document.querySelector("#texture").onclick = () => {
api.scene.updateMaterial(materialUuid, {
albedoTexture: "https://staging-cdn.sayduck.io/a/shared_assets/files/000/256/885/f87c5fdbe66e2d2e066c3a9ac6671f625f0918a1b2216fc8b0a78b93af1fe4c2-optimised_128_jpg.jpg"
})
}
document.querySelector("#metalness").onclick = () => {
api.scene.updateMaterial(materialUuid, {
metalness: 1
})
}
document.querySelector("#roughness").onclick = () => {
api.scene.updateMaterial(materialUuid, {
roughness: 0.3
})
}
document.querySelector("#emissiveColour").onclick = () => {
api.scene.updateMaterial(materialUuid, {
emissiveColour: {
red: 255,
green: 0,
blue: 0,
}
})
}
document.querySelector("#tiling").onclick = () => {
api.scene.updateMaterial(materialUuid, {
transformExtension: true,
tiling: {
x: 2,
y: 2
}
})
}
...