u

camera-config.json

@@ -0,0 +1,21 @@
+{
+  "camera": {
+    "position": {
+      "x": 450,
+      "y": 154,
+      "z": -130
+    },
+    "target": {
+      "x": 50,
+      "y": 85,
+      "z": -140
+    },
+    "distance": 406,
+    "spherical": {
+      "radius": 406,
+      "theta": 1.55,
+      "phi": 1.4
+    }
+  },
+  "description": "Default camera configuration for 3D model viewer. Position values can be copied from console logs and pasted here to set new defaults."
+}

src/index.js

@@ -7,9 +7,37 @@ import './styles.css';
 // Global variables
 let scene, camera, renderer, controls;
 let cube;
+let cameraConfig = null;
+
+// Load camera configuration from config file
+async function loadCameraConfig() {
+    try {
+        const response = await fetch('./camera-config.json');
+        if (!response.ok) {
+            throw new Error(`HTTP error! status: ${response.status}`);
+        }
+        cameraConfig = await response.json();
+        console.log('✅ Camera config loaded successfully:', cameraConfig);
+        return cameraConfig;
+    } catch (error) {
+        console.warn('⚠️ Could not load camera-config.json, using original defaults.');
+        console.log('📝 To use custom camera settings, ensure camera-config.json is accessible from your web server.');
+        
+        // Return original simple defaults
+        return {
+            camera: {
+                position: { x: 20, y: 20, z: 20 },
+                target: { x: 0, y: 0, z: 0 },
+                distance: 34.64
+            }
+        };
+    }
+}
 
 // Initialize the 3D scene
-function init() {
+async function init() {
+    // Load camera configuration first
+    cameraConfig = await loadCameraConfig();
     // Create container
     const container = document.getElementById('container');
     
@@ -24,8 +52,11 @@ function init() {
         0.1, // Near clipping plane
         10000 // Extended far clipping plane for better zoom out
     );
-    camera.position.set(20, 20, 20);
-    camera.lookAt(0, 0, 0);
+    // Use camera config values or defaults
+    const camPos = cameraConfig.camera.position;
+    const camTarget = cameraConfig.camera.target;
+    camera.position.set(camPos.x, camPos.y, camPos.z);
+    camera.lookAt(camTarget.x, camTarget.y, camTarget.z);
     
     // Create renderer
     renderer = new THREE.WebGLRenderer({ 
@@ -504,11 +535,48 @@ function centerModelAndControls(object) {
     // Update controls
     controls.update();
     
+    // Add rotation logging
+    setupRotationLogging();
+    
     console.log('Model centered at:', center);
     console.log('Model size:', size);
     console.log('Camera positioned at:', camera.position);
 }
 
+function setupRotationLogging() {
+    // Log rotation and zoom changes whenever the camera moves
+    controls.addEventListener('change', function() {
+        const distance = camera.position.distanceTo(controls.target);
+        const position = camera.position.clone();
+        const target = controls.target.clone();
+        
+        // Calculate spherical coordinates for rotation
+        const spherical = new THREE.Spherical().setFromVector3(
+            position.clone().sub(target)
+        );
+        
+        console.log('=== CAMERA STATE ===');
+        console.log('Position:', {
+            x: Math.round(position.x * 100) / 100,
+            y: Math.round(position.y * 100) / 100,
+            z: Math.round(position.z * 100) / 100
+        });
+        console.log('Target:', {
+            x: Math.round(target.x * 100) / 100,
+            y: Math.round(target.y * 100) / 100,
+            z: Math.round(target.z * 100) / 100
+        });
+        console.log('Distance (Zoom):', Math.round(distance * 100) / 100);
+        console.log('Spherical Rotation:');
+        console.log('  - Radius:', Math.round(spherical.radius * 100) / 100);
+        console.log('  - Theta (horizontal):', Math.round(spherical.theta * 100) / 100, 'radians');
+        console.log('  - Phi (vertical):', Math.round(spherical.phi * 100) / 100, 'radians');
+        console.log('==================');
+    });
+    
+    console.log('Rotation logging enabled - camera state will be logged on every change');
+}
+
 function animate() {
     requestAnimationFrame(animate);
     
@@ -527,4 +595,6 @@ function onWindowResize() {
 }
 
 // Initialize when page loads
-window.addEventListener('load', init);
+window.addEventListener('load', async () => {
+    await init();
+});

webpack.config.js

@@ -57,6 +57,10 @@ module.exports = (env, argv) => {
           {
             from: 'cube/',
             to: 'cube/'
+          },
+          {
+            from: 'camera-config.json',
+            to: 'camera-config.json'
           }
         ]
       })