/* Js for , Version=1778041390 */
 if(typeof(v) != "object") v = {};v.pageID = 61;;
;
        const container = document.getElementById('canvas-container');

        const scene = new THREE.Scene();
        scene.background = new THREE.Color(0xffffff);

        // Camera setup
        const camera = new THREE.PerspectiveCamera(45, container.clientWidth / container.clientHeight, 0.1, 1000);
        camera.position.set(0, 1, 7); 

        const renderer = new THREE.WebGLRenderer({ antialias: true, alpha: true });
        renderer.setSize(container.clientWidth, container.clientHeight);
        renderer.setPixelRatio(window.devicePixelRatio);
        container.appendChild(renderer.domElement);

        const labelRenderer = new THREE.CSS2DRenderer();
        labelRenderer.setSize(container.clientWidth, container.clientHeight);
        labelRenderer.domElement.className = 'css-label-renderer';
        container.appendChild(labelRenderer.domElement);

        // Lighting
        const ambientLight = new THREE.AmbientLight(0xffffff, 0.6);
        scene.add(ambientLight);

        const directionalLight = new THREE.DirectionalLight(0xffffff, 0.8);
        directionalLight.position.set(5, 10, 7);
        scene.add(directionalLight);
        
        const backLight = new THREE.DirectionalLight(0xffffff, 0.3);
        backLight.position.set(-5, -5, -5);
        scene.add(backLight);

        // Materials
        const siMaterial = new THREE.MeshStandardMaterial({ color: 0x2196F3, roughness: 0.9, metalness: 0.1 });
        const hMaterial = new THREE.MeshStandardMaterial({ color: 0xcccccc, roughness: 0.9, metalness: 0.1 });
        const clMaterial = new THREE.MeshStandardMaterial({ color: 0x28a745, roughness: 0.9, metalness: 0.1 });
        const bondMaterial = new THREE.MeshStandardMaterial({ color: 0xeeeeee, roughness: 0.5, metalness: 0.2 });
        
        const moleculeGroup = new THREE.Group();
        scene.add(moleculeGroup);

        // Constants
        const siRadius = 1;
        const hRadius = 0.5;
        const clRadius = 0.8; 
        const bondRadius = 0.15;
        const bondLength = 1.8; 

        // Silicon Central Atom
        const siGeometry = new THREE.SphereGeometry(siRadius, 32, 32);
        const siAtom = new THREE.Mesh(siGeometry, siMaterial);
        moleculeGroup.add(siAtom);

        const siDiv = document.createElement('div');
        siDiv.className = 'atom-label si-label';
        siDiv.textContent = 'Si';
        const siLabel = new THREE.CSS2DObject(siDiv);
        siAtom.add(siLabel); 

        // Coordinates
        const clPos1 = new THREE.Vector3(bondLength * 0.8, -bondLength * 0.5, bondLength * 0.8);
        const clPos2 = new THREE.Vector3(-bondLength * 0.8, -bondLength * 0.5, -bondLength * 0.8);
        const hPos1 = new THREE.Vector3(bondLength * 0.5, bondLength * 1.0, -bondLength * 0.5);
        const hPos2 = new THREE.Vector3(-bondLength * 0.5, bondLength * 1.0, bondLength * 0.5);

        const atomData = [
            { pos: clPos1, material: clMaterial, radius: clRadius, label: 'Cl', className: 'cl-label' },
            { symbol: 'Cl', pos: clPos2, material: clMaterial, radius: clRadius, label: 'Cl', className: 'cl-label' },
            { symbol: 'H', pos: hPos1, material: hMaterial, radius: hRadius, label: 'H', className: 'h-label' },
            { symbol: 'H', pos: hPos2, material: hMaterial, radius: hRadius, label: 'H', className: 'h-label' }
        ];

        atomData.forEach(data => {
            // Atom
            const atomGeometry = new THREE.SphereGeometry(data.radius, 32, 32);
            const atom = new THREE.Mesh(atomGeometry, data.material);
            atom.position.copy(data.pos);
            moleculeGroup.add(atom);

            // Label
            const atomDiv = document.createElement('div');
            atomDiv.className = `atom-label ${data.className}`;
            atomDiv.textContent = data.label;
            const atomLabel = new THREE.CSS2DObject(atomDiv);
            atom.add(atomLabel);
            
            // Bond
            const distance = data.pos.length();
            const cylinderGeometry = new THREE.CylinderGeometry(bondRadius, bondRadius, distance, 16);
            const bond = new THREE.Mesh(cylinderGeometry, bondMaterial);
            
            const axis = new THREE.Vector3(0, 1, 0); 
            const quaternion = new THREE.Quaternion();
            quaternion.setFromUnitVectors(axis, data.pos.clone().normalize());
            bond.setRotationFromQuaternion(quaternion);
            bond.position.copy(data.pos).multiplyScalar(0.5);
            
            moleculeGroup.add(bond);
        });

        // Controls
        const controls = new THREE.OrbitControls(camera, renderer.domElement);
        controls.enableDamping = true;
        controls.dampingFactor = 0.05;
        controls.autoRotate = true;
        controls.autoRotateSpeed = 1.5;

        function animate() {
            requestAnimationFrame(animate);
            controls.update();
            renderer.render(scene, camera);
            labelRenderer.render(scene, camera);
        }
        animate();

        window.addEventListener('resize', () => {
            const width = container.clientWidth;
            const height = container.clientHeight;
            renderer.setSize(width, height);
            labelRenderer.setSize(width, height);
            camera.aspect = width / height;
            camera.updateProjectionMatrix();
        });