checkbox

index.html

@@ -49,12 +49,19 @@
             shadow-intensity="1" 
             camera-controls 
             camera-orbit="0deg 180deg 90deg"
-            exposure="1"
             >
         </model-viewer>
     </div>
 
+    <div>
+        <input type="checkbox" id="option1" name="modelOption" checked>
+        <label for="option1">Option 1</label><br>
+        <input type="checkbox" id="option2" name="modelOption">
+        <label for="option2">Option 2</label><br>
+    </div>
+
     <!-- Import the model-viewer component -->
     <script type="module" src="https://unpkg.com/@google/model-viewer/dist/model-viewer.min.js"></script>
+    <script src="script.js"></script>
 </body>
 </html>

kodim08_30_ori.gltf

@@ -0,0 +1 @@
+{"accessors":[{"bufferView":0,"byteOffset":0,"componentType":5126,"count":2601,"max":[1.0,0.75,-1.2919375896453857],"min":[-0.5,-0.75,-2.28713059425354],"type":"VEC3"},{"bufferView":1,"byteOffset":0,"componentType":5126,"count":2601,"normalized":false,"type":"VEC2"},{"bufferView":2,"byteOffset":0,"componentType":5125,"count":15000,"type":"SCALAR"}],"asset":{"generator":"VTK","version":"2.0"},"bufferViews":[{"buffer":0,"byteLength":31212,"byteOffset":0},{"buffer":1,"byteLength":20808,"byteOffset":0},{"buffer":2,"byteLength":60000,"byteOffset":0},{"buffer":3,"byteLength":273,"byteOffset":0}],"buffers":[{"byteLength":31212,"uri":"buffer467986.bin"},{"byteLength":20808,"uri":"buffer896554.bin"},{"byteLength":60000,"uri":"buffer896555.bin"},{"byteLength":273,"uri":"buffer897054.bin"}],"cameras":[{"perspective":{"aspectRatio":1.6759388038942977,"yfov":0.5235987755982988,"zfar":6.776592528152567,"znear":2.7479295556458134},"type":"perspective"}],"images":[{"bufferView":3,"mimeType":"image/png"}],"materials":[{"pbrMetallicRoughness":{"baseColorFactor":[1.0,1.0,1.0,1.0],"baseColorTexture":{"index":0,"texCoord":0},"metallicFactor":0.0,"roughnessFactor":1.0}}],"meshes":[{"name":"mesh0","primitives":[{"attributes":{"POSITION":0,"TEXCOORD_0":1},"indices":2,"material":0,"mode":4}]}],"nodes":[{"mesh":0,"name":"mesh0"},{"camera":0,"matrix":[0.9930182653242161,-0.08163718488812689,0.08514748837180357,-0.0,-0.07411348376221764,0.1297831131124444,0.9887686964479963,0.0,-0.09177099899811561,-0.988175952750513,0.12282658567469673,-0.0,-0.16541443797724062,-4.47311855069713,-1.2335421379143414,1.0],"name":"Camera Node"},{"children":[0,1],"name":"Renderer Node"}],"samplers":[{"magFilter":9728,"minFilter":9728,"wrapS":33071,"wrapT":33071}],"scene":0,"scenes":[{"name":"Layer 0","nodes":[2]}],"textures":[{"sampler":0,"source":0}]}

script.js

@@ -0,0 +1,31 @@
+document.addEventListener('DOMContentLoaded', function() {
+    const modelViewer1 = document.getElementById('modelViewer1');
+    const modelViewer2 = document.getElementById('modelViewer2');
+    const option1 = document.getElementById('option1');
+    const option2 = document.getElementById('option2');
+
+    function updateModels() {
+        if (option1.checked) {
+            modelViewer1.setAttribute('src', 'path/to/option1_model1.glb');
+            modelViewer2.setAttribute('src', 'path/to/option1_model2.glb');
+        } else if (option2.checked) {
+            modelViewer1.setAttribute('src', 'kodim08_30_ori.gltf');
+            modelViewer2.setAttribute('src', 'kodim08_30_sh.gltf');
+        } else {
+            // Set to default models or hide them
+            modelViewer1.setAttribute('src', 'kodim08_50_ori.gltf');
+            modelViewer2.setAttribute('src', 'kdoim08_50_sh.gltf');
+        }
+    }
+
+    [option1, option2].forEach(option => {
+        option.addEventListener('change', function() {
+            // Uncheck other options
+            option1.checked = option2.checked = false;
+            this.checked = true;
+            updateModels();
+        });
+    });
+
+    updateModels();
+});