/* Js for , Version=1785139387 */
 if(typeof(v) != "object") v = {};v.pageID = 62;;
;
        // --- Three.js 初始化和设置 ---
        const container = document.getElementById('canvas-container');

        // 场景、相机、渲染器
        const scene = new THREE.Scene();
        scene.background = new THREE.Color(0xffffff);

        const camera = new THREE.PerspectiveCamera(45, container.clientWidth / container.clientHeight, 0.1, 1000);
        camera.position.set(0, 1, 8); // 调整初始视角

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

        // CSS 2D 渲染器 (用于标签)
        const labelRenderer = new THREE.CSS2DRenderer();
        labelRenderer.setSize(container.clientWidth, container.clientHeight);
        labelRenderer.domElement.className = 'css-label-renderer';
        container.appendChild(labelRenderer.domElement);

        // 灯光
        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);

        // --- 材质定义 (磨砂质感) ---
        const siMaterial = new THREE.MeshStandardMaterial({ 
            color: 0x2196F3, // 磨砂蓝色 (Si) - 恢复到硅烷的蓝色
            roughness: 0.9,
            metalness: 0.1
        });
        
        const hMaterial = new THREE.MeshStandardMaterial({ 
            color: 0xcccccc, // 磨砂浅灰色 (H)
            roughness: 0.9, 
            metalness: 0.1 
        });

        const bondMaterial = new THREE.MeshStandardMaterial({ 
            color: 0xeeeeee,
            roughness: 0.5,
            metalness: 0.2
        });
        
        // --- 分子模型构建 (乙硅烷 Si2H6 - 类似于乙烷的结构) ---
        const moleculeGroup = new THREE.Group();
        scene.add(moleculeGroup);

        const Si_Si_BondLength = 2.4; // Si-Si 键长
        const Si_Radius = 1;
        const H_Radius = 0.5;
        const Bond_Radius = 0.15;

        // 1. 两个硅原子 (Si)
        const siGeometry = new THREE.SphereGeometry(Si_Radius, 32, 32);

        const siAtom1 = new THREE.Mesh(siGeometry, siMaterial);
        siAtom1.position.x = -Si_Si_BondLength / 2;
        moleculeGroup.add(siAtom1);

        const siAtom2 = new THREE.Mesh(siGeometry, siMaterial);
        siAtom2.position.x = Si_Si_BondLength / 2;
        moleculeGroup.add(siAtom2);

        // 标签：Si
        const siDiv1 = document.createElement('div');
        siDiv1.className = 'atom-label si-label';
        siDiv1.textContent = 'Si';
        const siLabel1 = new THREE.CSS2DObject(siDiv1);
        siAtom1.add(siLabel1); 
        
        const siDiv2 = document.createElement('div');
        siDiv2.className = 'atom-label si-label';
        siDiv2.textContent = 'Si';
        const siLabel2 = new THREE.CSS2DObject(siDiv2);
        siAtom2.add(siLabel2); 

        // Si-Si 化学键
        const siSiBondGeometry = new THREE.CylinderGeometry(Bond_Radius, Bond_Radius, Si_Si_BondLength, 16);
        const siSiBond = new THREE.Mesh(siSiBondGeometry, bondMaterial);
        siSiBond.rotation.z = Math.PI / 2; // 沿 X 轴方向
        moleculeGroup.add(siSiBond);

        // 2. 六个氢原子 (H) - 使用交错式构象近似
        
        const r_SiH = 1.48 * 0.8; // 键长
        const d_SiSi = Si_Si_BondLength;
        const theta_SiSiH = 109.5 * Math.PI / 180; // 四面体角

        const H_vectors = [
            // Si1: 
            new THREE.Vector3(-d_SiSi/2 + r_SiH * Math.cos(theta_SiSiH), r_SiH * Math.sin(theta_SiSiH), 0),
            new THREE.Vector3(-d_SiSi/2 + r_SiH * Math.cos(theta_SiSiH), r_SiH * Math.sin(theta_SiSiH) * Math.cos(2*Math.PI/3), r_SiH * Math.sin(theta_SiSiH) * Math.sin(2*Math.PI/3)),
            new THREE.Vector3(-d_SiSi/2 + r_SiH * Math.cos(theta_SiSiH), r_SiH * Math.sin(theta_SiSiH) * Math.cos(4*Math.PI/3), r_SiH * Math.sin(theta_SiSiH) * Math.sin(4*Math.PI/3)),
            
            // Si2: 交错式构象 (旋转 60度)
            new THREE.Vector3(d_SiSi/2 - r_SiH * Math.cos(theta_SiSiH), -r_SiH * Math.sin(theta_SiSiH) * Math.cos(Math.PI/6), r_SiH * Math.sin(theta_SiSiH) * Math.sin(Math.PI/6)),
            new THREE.Vector3(d_SiSi/2 - r_SiH * Math.cos(theta_SiSiH), -r_SiH * Math.sin(theta_SiSiH) * Math.cos(5*Math.PI/6), r_SiH * Math.sin(theta_SiSiH) * Math.sin(5*Math.PI/6)),
            new THREE.Vector3(d_SiSi/2 - r_SiH * Math.cos(theta_SiSiH), -r_SiH * Math.sin(theta_SiSiH) * Math.cos(9*Math.PI/6), r_SiH * Math.sin(theta_SiSiH) * Math.sin(9*Math.PI/6)),
        ];


        H_vectors.forEach((pos, index) => {
            // 创建H原子
            const hGeometry = new THREE.SphereGeometry(H_Radius, 32, 32);
            const hAtom = new THREE.Mesh(hGeometry, hMaterial);
            hAtom.position.copy(pos);
            moleculeGroup.add(hAtom);

            // 标签：H
            const hDiv = document.createElement('div');
            hDiv.className = 'atom-label h-label';
            hDiv.textContent = 'H';
            const hLabel = new THREE.CSS2DObject(hDiv);
            hAtom.add(hLabel);
            
            // 创建 Si-H 化学键
            let si_center;
            if (index < 3) {
                 si_center = siAtom1.position; // 关联到 Si1
            } else {
                 si_center = siAtom2.position; // 关联到 Si2
            }
            
            const direction = new THREE.Vector3().subVectors(pos, si_center).normalize();
            const distance = pos.distanceTo(si_center);
            
            const cylinderGeometry = new THREE.CylinderGeometry(Bond_Radius, Bond_Radius, 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, direction);
            bond.setRotationFromQuaternion(quaternion);
            bond.position.addVectors(pos, si_center).multiplyScalar(0.5); // 位于中心
            
            moleculeGroup.add(bond);
        });
        
        // --- 鼠标控制和动画 ---
        const controls = new THREE.OrbitControls(camera, renderer.domElement);
        controls.enableDamping = true;
        controls.dampingFactor = 0.05;
        controls.enableZoom = true; // 允许缩放
        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();
        });