Cannot access my modelviewer

[ChristofJugel]

Hey :)

I want to include a modelviewer in my Shopify store. Both using the Shopify and embedding it manually works and the model gets displayed.

However, attempting to change or animate anything has not been successful yet. When both trying to get to the object with "id" and "ref", it ends up showing this error:

Uncaught TypeError: Cannot read properties of undefined (reading 'model') at HTMLDivElement.

I followed the basic examples as in https://modelviewer.dev/examples/scenegraph/#changeColor.

If I inspect the code on the website, I see that the modelviewer has the necessary id-tag.

Thank you in advance :)

[elalish]

It sounds like you found a <div> element, which is not a <model-viewer> element. So, I guess check your ID again? Also, you can do it interactively on the Chrome dev tools console, which might make things clearer.

[ChristofJugel]

It appears so, however, the naming is precise.

If I inspect the model-viewer, I see the following:

<model-viewer reveal="auto" toggleable="true" id="modelvw" src="https://model3d.shopifycdn.com/models/o/XXXXXXX/3DGLB.glb" camera-controls="true" style="--poster-color: transparent;" data-shopify-feature="1.7" alt="Test" poster="//cdn.shopify.com/s/files/1/0346/5687/8637/products/3DGLB_2048x.jpg?v=1639483296" ar-status="not-presenting" data-js-focus-visible="" class="shopify-model-viewer-ui__disabled" tabindex="-1"></model-viewer>

The id is what I set in the page code.

If I run add this JS code below:

`<script>

document.querySelector('#color-controls').addEventListener('click', (event) => {
const colorString = event.target.dataset.color;

if (!colorString) {
return;
}

const modelViewerColor = document.querySelector("#modelvw");
alert(modelViewerColor);
const color = colorString.split(',')
.map(numberString => parseFloat(numberString));

console.log('Changing color to: ', color);
alert("Test");
const [material] = this.modelViewerColor.model.materials;

material.pbrMetallicRoughness.setBaseColorFactor(color);
});
</script>`

It alerts [Object htmlObject] and then at the line of const [material] = this.modelViewerColor.model.materials; the Error of my original post is thrown.

[ChristofJugel]

Problem is solved. One too many "this."