diff --git a/packages/modelviewer.dev/examples/scenegraph/index.html b/packages/modelviewer.dev/examples/scenegraph/index.html
index e660e0ecf8..88a2f5488f 100644
--- a/packages/modelviewer.dev/examples/scenegraph/index.html
+++ b/packages/modelviewer.dev/examples/scenegraph/index.html
@@ -759,14 +759,16 @@ <h2 class="demo-title">Materials API</h2>
 
 modelViewer.addEventListener("load", () => {
   const changeColor = (event) => {
-    const material = modelViewer.materialFromPoint(event.clientX, event.clientY);
-    if (material != null) {
-      material.pbrMetallicRoughness.
-        setBaseColorFactor([Math.random(), Math.random(), Math.random()]);
+    if(modelViewer.modelIsVisible){
+      const material = modelViewer.materialFromPoint(event.clientX, event.clientY);
+      if (material != null) {
+        material.pbrMetallicRoughness.
+          setBaseColorFactor([Math.random(), Math.random(), Math.random()]);
+      }
     }
   };
 
-  modelViewer.addEventListener("click", changeColor);
+  document.addEventListener("click", changeColor);
 });
 </script>
 <script>