sto

index.html

@@ -33,7 +33,7 @@
             seamless-poster 
             shadow-intensity="1" 
             camera-controls 
-            camera-orbit="0deg 180deg 100deg"
+            camera-orbit="0deg 180deg 120deg"
             >
         </model-viewer>
     </div>
@@ -48,7 +48,7 @@
             seamless-poster 
             shadow-intensity="1" 
             camera-controls 
-            camera-orbit="0deg 180deg 100deg"
+            camera-orbit="0deg 180deg 120deg"
             >
         </model-viewer>
     </div>

script.js

@@ -2,11 +2,22 @@ document.addEventListener('DOMContentLoaded', function() {
     const toggleOptions = document.querySelectorAll('input[name="toggleOption"]');
     const allSubOptionsContainers = document.querySelectorAll('.sub-options');
     const allSubOptions = document.querySelectorAll('.sub-options input[type="radio"]');
+    const initialCameraOrbit1 = "0deg 180deg 120deg"; 
+    const initialCameraOrbit2 = "0deg 180deg 120deg"; 
+
 
     function updateModels(selectedSubOption) {
         const modelPaths = getModelPaths(selectedSubOption.value);
         modelViewer1.setAttribute('src', modelPaths.model1Path);
+        modelViewer1.addEventListener('load', () => {
+            modelViewer1.setAttribute('camera-orbit', initialCameraOrbit1);
+            modelViewer1.resetCamera();
+        });
         modelViewer2.setAttribute('src', modelPaths.model2Path);
+        modelViewer2.addEventListener('load', () => {
+            modelViewer2.setAttribute('camera-orbit', initialCameraOrbit1);
+            modelViewer2.resetCamera();
+        });
     }
 
     function updateSubOptionsDisplay() {