/* Js for , Version=1785139387 */ if(typeof(v) != "object") v = {};v.pageID = 67;; ; // --- 标签切换逻辑 --- function openApplication(evt, applicationName) { // 隐藏所有内容 var i, contentItems, tabButtons; contentItems = document.getElementsByClassName("content-item"); for (i = 0; i < contentItems.length; i++) { contentItems[i].classList.remove('active'); } // 移除所有按钮的 active 类 tabButtons = document.getElementsByClassName("tab-button"); for (i = 0; i < tabButtons.length; i++) { tabButtons[i].classList.remove('active'); } // 显示当前内容，并激活按钮 document.getElementById(applicationName).classList.add('active'); evt.currentTarget.classList.add('active'); } // --- 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: 0x28a745, // 绿色 (Cl) roughness: 0.9, metalness: 0.1 }); const bondMaterial = new THREE.MeshStandardMaterial({ color: 0xeeeeee, roughness: 0.5, metalness: 0.2 }); // --- 分子模型构建 (SiHCl3 - 四面体) --- const moleculeGroup = new THREE.Group(); scene.add(moleculeGroup); const siRadius = 1; const hRadius = 0.5; const clRadius = 0.8; const bondRadius = 0.15; const bondLength = 1.8; // 键长调整 // 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. 四个配位原子 (1 x H, 3 x Cl) - 简化为近似四面体 // H atom - 沿+Y轴 const hPos = new THREE.Vector3(0, bondLength, 0); // Cl atoms - 在XY平面下方 // 角度计算：cos(theta) = -1/3 for perfect tetrahedron const clAngle = Math.acos(-1/3); // 约 109.5度 const clY = bondLength * Math.cos(clAngle); // 沿Y轴的投影 const clRadiusXY = bondLength * Math.sin(clAngle); // 在XY平面的半径 const clPos1 = new THREE.Vector3(clRadiusXY, clY, 0); // 在XZ平面投影 // 围绕Y轴旋转 120 度 const clPos2 = new THREE.Vector3( clRadiusXY * Math.cos(2 * Math.PI / 3), clY, clRadiusXY * Math.sin(2 * Math.PI / 3) ); // 围绕Y轴旋转 240 度 const clPos3 = new THREE.Vector3( clRadiusXY * Math.cos(4 * Math.PI / 3), clY, clRadiusXY * Math.sin(4 * Math.PI / 3) ); const atomData = [ { pos: hPos, material: hMaterial, radius: hRadius, label: 'H', className: 'h-label' }, { pos: clPos1, material: clMaterial, radius: clRadius, label: 'Cl', className: 'cl-label' }, { pos: clPos2, material: clMaterial, radius: clRadius, label: 'Cl', className: 'cl-label' }, { pos: clPos3, material: clMaterial, radius: clRadius, label: 'Cl', className: 'cl-label' } ]; atomData.forEach(data => { 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); // 标签 const atomDiv = document.createElement('div'); atomDiv.className = `atom-label ${data.className}`; atomDiv.textContent = data.label; const atomLabel = new THREE.CSS2DObject(atomDiv); atom.add(atomLabel); // 创建化学键 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); }); // 旋转分子使其角度更美观 moleculeGroup.rotation.x = Math.PI / 8; moleculeGroup.rotation.y = Math.PI / 6; // --- 鼠标控制和动画 --- 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(); }); // 首次加载时确保激活第一个标签 document.addEventListener("DOMContentLoaded", () => { document.querySelector('.tab-button').click(); });