/* Js for , Version=1785139387 */
 if(typeof(v) != "object") v = {};v.pageID = 81;;
;
        const container = document.getElementById('canvas-container');
        const scene = new THREE.Scene();
        scene.background = new THREE.Color(0xffffff);
        // 调整相机：FOV 略微调大 (40->45)，让分子在小容器内显得大小适中
        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);
        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.8);
        scene.add(ambientLight);
        const directionalLight = new THREE.DirectionalLight(0xffffff, 0.6);
        directionalLight.position.set(5, 10, 7);
        scene.add(directionalLight);
        const siMaterial = new THREE.MeshStandardMaterial({ color: 0x2196F3, roughness: 0.7 });
        const hMaterial = new THREE.MeshStandardMaterial({ color: 0xcccccc, roughness: 0.7 });
        const clMaterial = new THREE.MeshStandardMaterial({ color: 0x2ecc71, roughness: 0.7 });
        const bondMaterial = new THREE.MeshStandardMaterial({ color: 0xdddddd, roughness: 0.5 });
        const moleculeGroup = new THREE.Group();
        scene.add(moleculeGroup);
        // 整体缩放比例同步微调
        const scale = 0.85;
        const bondLength = 2.2 * scale;
        const hRadius = 0.45 * scale;
        const clRadius = 0.75 * scale; 
        const siRadius = 0.9 * scale;
        const bondRadius = 0.12 * scale;
        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); 
        const d = bondLength / Math.sqrt(3); 
        const tetrahedralPositions = [
            new THREE.Vector3(d, d, d),
            new THREE.Vector3(d, -d, -d),
            new THREE.Vector3(-d, d, -d),
            new THREE.Vector3(-d, -d, d)
        ];
        tetrahedralPositions.forEach((pos, index) => {
            let atomGeometry, atomMaterial, atomLabelText, atomLabelClass, atomRadius;
            if (index < 3) { atomGeometry = new THREE.SphereGeometry(hRadius, 32, 32); atomMaterial = hMaterial; atomLabelText = 'H'; atomLabelClass = 'h-label'; atomRadius = hRadius; } else { 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.autoRotate = true; controls.autoRotateSpeed = 1.0; 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();
        });