【HTML 激光入水光路折射，一秒看角变】——筑梦教育网页新视界

💧 激光折射模拟器技术解析

一、💡 项目概述

这个激光折射模拟器通过交互式可视化展示光的折射原理：

• 核心功能：实时计算折射角并动态展示折射现象
• 关键教学点：斯涅尔定律和全反射现象
• 核心公式：$n_1\cdot \sin ({\theta }_1)=n_2\cdot \sin ({\theta }_2)$

二、🎨 视觉设计

2.1 色彩系统

colors: {
  primary: '#3B82F6',   // 主色(物理蓝)
  secondary: '#10B981',  // 成功色(折射绿)
  warning: '#F59E0B',   // 警告色(光线黄)
  danger: '#EF4444',    // 危险色(全反射红)
}

• 介质分层：空气区域(浅蓝) vs 水区域(渐变蓝)
• 光线颜色：黄色(高可见性)
• 状态标识：绿色(正常折射) vs 红色(全反射)

2.2 玻璃拟态界面

.bg-glass {
  background: rgba(255, 255, 255, 0.7);
  backdrop-filter: blur(10px);
}

这种设计创造类似光学玻璃的视觉效果，符合光学主题

2.3 水介质效果

.water-gradient {
  background: linear-gradient(to bottom, 
    rgba(59, 130, 246, 0.2), 
    rgba(59, 130, 246, 0.6));
}

渐变背景模拟水的深度感和光学特性

三、⚛️ 物理引擎实现

3.1 折射计算

function calculateRefraction(incidentAngle) {
  // 物理常量
  const n1 = 1.00; // 空气折射率
  const n2 = 1.33; // 水折射率
  
  // 计算临界角
  const criticalAngle = Math.asin(n1 / n2) * (180 / Math.PI);
  
  // 全反射判断
  if (incidentAngle >= criticalAngle) {
    return {
      refractedAngle: 0,
      isTotalReflection: true
    };
  }
  
  // 斯涅尔定律计算折射角
  const sinTheta2 = (n1 / n2) * Math.sin(incidentAngle * Math.PI / 180);
  const refractedAngle = Math.asin(sinTheta2) * (180 / Math.PI);
  
  return {
    refractedAngle: Math.round(refractedAngle * 100) / 100, // 保留2位小数
    isTotalReflection: false
  };
}

3.2 光线渲染系统

function renderRays(incidentAngle, refractedAngle, isTotalReflection) {
  // 入射光线
  incidentRay.style.transform = `rotate(${incidentAngle}deg)`;
  
  // 反射光线
  reflectedRay.style.transform = `rotate(${-incidentAngle}deg)`;
  
  // 折射光线
  refractedRay.style.transform = `rotate(${-refractedAngle}deg)`;
  refractedRay.style.opacity = isTotalReflection ? '0' : '1';
  
  // 光源位置调整
  const sourceX = Math.sin(incidentAngle * Math.PI / 180) * 15;
  lightSource.style.transform = `translate(${sourceX}px, 0)`;
}

四、📐 几何可视化

4.1 角度指示器

function updateAngleIndicator(incidentAngle, refractedAngle) {
  // 圆心坐标
  const centerX = 16, centerY = 16;
  const radius = 12;
  
  // 计算入射角弧线端点
  const incEndX = centerX + radius * Math.sin(incidentAngle * Math.PI / 180);
  const incEndY = centerY - radius * Math.cos(incidentAngle * Math.PI / 180);
  
  // 计算折射角弧线端点
  const refEndX = centerX + radius * Math.sin(refractedAngle * Math.PI / 180);
  const refEndY = centerY + radius * Math.cos(refractedAngle * Math.PI / 180);
  
  // 更新SVG路径
  incidentAngleArc.setAttribute('d', 
    `M${centerX},${centerY} L${centerX},${centerY-radius} L${incEndX},${incEndY}`);
  
  refractedAngleArc.setAttribute('d', 
    `M${centerX},${centerY} L${centerX},${centerY+radius} L${refEndX},${refEndY}`);
}

4.2 介质边界

<div class="relative w-full h-[400px] overflow-hidden">
  <!-- 水面分界线 -->
  <div class="absolute inset-x-0 top-1/2 h-0.5 bg-gray-400 z-10 shadow-md"></div>
  
  <!-- 空气区域 -->
  <div class="absolute inset-x-0 top-0 bottom-1/2 bg-blue-50"></div>
  
  <!-- 水区域 -->
  <div class="absolute inset-x-0 top-1/2 bottom-0 water-gradient"></div>
</div>

五、🎓 教学系统

5.1 公式展示区

<div class="mt-6 p-4 bg-blue-50 rounded-lg border border-blue-100">
  <p class="text-sm text-gray-700">
    <i class="fa fa-book mr-2" aria-hidden="true"></i>斯涅尔定律: n₁·sin(θ₁) = n₂·sin(θ₂)
  </p>
  <p class="text-sm text-gray-700 mt-1">
    <i class="fa fa-info-circle mr-2" aria-hidden="true"></i>
    其中 n₁=1.00 (空气), n₂=1.33 (水), 临界角 ≈ 48.6°
  </p>
</div>

5.2 知识要点

<div class="bg-blue-50 p-4 rounded-lg border border-blue-100">
  <h3 class="font-semibold text-blue-800 mb-2">关键知识点</h3>
  <ul class="list-disc pl-5 text-gray-700 space-y-2">
    <li>空气的折射率约为1.00</li>
    <li>水的折射率约为1.33</li>
    <li>水到空气的临界角约为48.6°</li>
  </ul>
</div>

六、⚡ 交互设计

6.1 滑块控制

<div class="flex items-center gap-3">
  <input type="range" id="angleSlider" min="0" max="90" value="30" 
      class="w-full h-2 bg-gray-200 rounded-lg appearance-none cursor-pointer accent-primary">
  <span id="angleValue" class="text-xl font-semibold text-primary min-w-[4rem] text-center">30°</span>
</div>

6.2 状态反馈

// 全反射提示
totalReflection.classList.toggle('hidden', !isTotalReflection);

七、🚀 技术亮点

1. 基于物理的计算：精确实现斯涅尔定律
2. 全反射模拟：超过临界角自动切换状态
3. SVG角度指示：直观展示入射角和折射角
4. 响应式设计：适配不同屏幕尺寸
5. 教育价值：结合理论和实践演示光学现象

八、💡 教学价值

这个模拟器通过：

1. 交互探索：学生可自主调整参数观察现象
2. 多感官学习：视觉反馈强化物理概念
3. 即时验证：实时验证斯涅尔定律
4. 异常现象展示：演示临界角与全反射

成功将抽象的光学原理转化为直观的可视化体验，是物理教学的理想辅助工具。

九、结果展示