/* Js for , Version=1785139387 */
 if(typeof(v) != "object") v = {};v.pageID = 60;;
;
        // --- 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 clMaterial = new THREE.MeshStandardMaterial({ 
            color: 0x2ecc71, // 磨砂绿色 (Cl)
            roughness: 0.9, 
            metalness: 0.1 
        });

        const bondMaterial = new THREE.MeshStandardMaterial({ 
            color: 0xeeeeee,
            roughness: 0.5,
            metalness: 0.2
        });
        
        // --- 分子模型构建：一氯三氢硅 (SiH₃Cl) ---
        // 结构：四面体结构，一个顶点被 Cl 占据，其他三个被 H 占据。
        const moleculeGroup = new THREE.Group();
        scene.add(moleculeGroup);

        const bondLength = 2.2;
        const hRadius = 0.5;
        const clRadius = 0.8; // Cl 比 H 大一些
        const siRadius = 1;
        const bondRadius = 0.15;

        // 1. 硅原子 (Si) - 中心
        const siGeometry = new THREE.SphereGeometry(siRadius, 32, 32);
        const siAtom = new THREE.Mesh(siGeometry, siMaterial);
        moleculeGroup.add(siAtom);

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

        // 2. 四面体顶点位置
        // 使用标准的四面体坐标，前三个为 H，第四个为 Cl
        const d = bondLength / Math.sqrt(3); 
        const tetrahedralPositions = [
            new THREE.Vector3(d, d, d),     // H1
            new THREE.Vector3(d, -d, -d),    // H2
            new THREE.Vector3(-d, d, -d),    // H3
            new THREE.Vector3(-d, -d, d)     // Cl
        ];

        // 3. 绘制 H 原子和 Cl 原子
        tetrahedralPositions.forEach((pos, index) => {
            let atomGeometry, atomMaterial, atomLabelText, atomLabelClass, atomRadius;

            if (index < 3) { // H 原子
                atomGeometry = new THREE.SphereGeometry(hRadius, 32, 32);
                atomMaterial = hMaterial;
                atomLabelText = 'H';
                atomLabelClass = 'h-label';
                atomRadius = hRadius;
            } else { // Cl 原子 (索引 3)
                atomGeometry = new THREE.SphereGeometry(clRadius, 32, 32);
                atomMaterial = clMaterial;
                atomLabelText = 'Cl';
                atomLabelClass = 'cl-label';
                atomRadius = clRadius;
            }
            
            // 创建原子
            const atom = new THREE.Mesh(atomGeometry, atomMaterial);
            atom.position.copy(pos);
            moleculeGroup.add(atom);

            // 创建标签
            const atomDiv = document.createElement('div');
            atomDiv.className = `atom-label ${atomLabelClass}`;
            atomDiv.textContent = atomLabelText;
            const atomLabel = new THREE.CSS2DObject(atomDiv);
            // 调整标签位置，使其不完全覆盖原子
            atomLabel.position.y += atomRadius + 0.3; 
            atom.add(atomLabel);
            
            // 创建化学键 (圆柱体)
            const direction = new THREE.Vector3().copy(pos).normalize();
            const distance = 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, direction);
            bond.setRotationFromQuaternion(quaternion);
            bond.position.copy(pos).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();
        });