ai生成光的反射与折射3d动画图

#### 提示词：
```
我是一名物理老师，要做一个教学使用的3d动画，来演示光的反射、折射，动画要求：
1.实现可交互调节的入射角（0-89°）和折射率（1.0-1.5），实时显示参数值；
2.根据斯涅尔定律动态计算并绘制入射、反射和折射光线，用不同颜色区分；
3.添加分界面和虚线法线作为参考系，实现角度标注功能，介质颜色为浅蓝色；
4.折射光线在介质中（分界面下方），入射和反射光线在空气中（分界面上方）
5.使用数学公式准确转换屏幕坐标与物理角度，显示出角度值
6.界面美观精致，悬浮面板不要遮挡主体
7.可用鼠标拖拽旋转视角，滚轮放大缩小
要求使用three.js开发，生成单个html文件
```

#### deepseek生成的代码：
![](https://resource.maoshu.fun/storage/default/20251105/PixPin_2025-11-36f6eb1baf2b77dbbd05d053ebd4be83dc4ff4b2.png?e=1762464130&token=Ov7mXAv_8azPtTTXXyhh0S5qpDFEhafGpHARTAg2:VW6bglvzwI58u80U8ovN-A5JPv4=)

```html
<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>光的反射与折射 - 3D教学演示</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }
        body {
            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
            background: linear-gradient(135deg, #1a2a6c, #2a3a7c);
            color: #fff;
            overflow: hidden;
        }
        #container {
            position: relative;
            width: 100vw;
            height: 100vh;
        }
        #info {
            position: absolute;
            top: 20px;
            left: 20px;
            background: rgba(0, 0, 0, 0.7);
            padding: 15px;
            border-radius: 10px;
            max-width: 300px;
            backdrop-filter: blur(5px);
            box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3);
            z-index: 100;
        }
        #info h1 {
            font-size: 1.5rem;
            margin-bottom: 10px;
            color: #4fc3f7;
        }
        #info p {
            font-size: 0.9rem;
            line-height: 1.4;
            margin-bottom: 5px;
        }
        #controls {
            position: absolute;
            top: 20px;
            right: 20px;
            background: rgba(0, 0, 0, 0.7);
            padding: 15px;
            border-radius: 10px;
            width: 250px;
            backdrop-filter: blur(5px);
            box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3);
            z-index: 100;
        }
        .control-group {
            margin-bottom: 15px;
        }
        .control-group label {
            display: block;
            margin-bottom: 5px;
            font-size: 0.9rem;
            color: #bbdefb;
        }
        .slider-container {
            display: flex;
            align-items: center;
        }
        .slider-container input {
            flex: 1;
            margin-right: 10px;
        }
        .value-display {
            width: 50px;
            text-align: center;
            font-size: 0.9rem;
            background: rgba(255, 255, 255, 0.1);
            padding: 3px;
            border-radius: 4px;
        }
        #angle-display {
            position: absolute;
            bottom: 20px;
            left: 20px;
            background: rgba(0, 0, 0, 0.7);
            padding: 15px;
            border-radius: 10px;
            backdrop-filter: blur(5px);
            box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3);
            z-index: 100;
        }
        #angle-display h3 {
            font-size: 1.1rem;
            margin-bottom: 10px;
            color: #4fc3f7;
        }
        .angle-item {
            display: flex;
            justify-content: space-between;
            margin-bottom: 5px;
        }
        .angle-label {
            color: #bbdefb;
        }
        .angle-value {
            font-weight: bold;
        }
        #instructions {
            position: absolute;
            bottom: 20px;
            right: 20px;
            background: rgba(0, 0, 0, 0.7);
            padding: 10px 15px;
            border-radius: 10px;
            font-size: 0.8rem;
            backdrop-filter: blur(5px);
            box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3);
            z-index: 100;
        }
    </style>
</head>
<body>
    <div id="container">
        <div id="info">
            <h1>光的反射与折射</h1>
            <p>本演示展示了光在不同介质交界处的反射和折射现象。</p>
            <p>使用斯涅尔定律计算折射角度：n₁·sin(θ₁) = n₂·sin(θ₂)</p>
            <p>反射定律：入射角等于反射角</p>
        </div>
        
        <div id="controls">
            <div class="control-group">
                <label for="incidence-angle">入射角 (度):</label>
                <div class="slider-container">
                    <input type="range" id="incidence-angle" min="0" max="89" value="45" step="1">
                    <span id="incidence-angle-value" class="value-display">45°</span>
                </div>
            </div>
            <div class="control-group">
                <label for="refractive-index">折射率 (n₂):</label>
                <div class="slider-container">
                    <input type="range" id="refractive-index" min="1.0" max="1.5" value="1.33" step="0.01">
                    <span id="refractive-index-value" class="value-display">1.33</span>
                </div>
            </div>
        </div>
        
        <div id="angle-display">
            <h3>角度值</h3>
            <div class="angle-item">
                <span class="angle-label">入射角:</span>
                <span id="incidence-display" class="angle-value">45°</span>
            </div>
            <div class="angle-item">
                <span class="angle-label">反射角:</span>
                <span id="reflection-display" class="angle-value">45°</span>
            </div>
            <div class="angle-item">
                <span class="angle-label">折射角:</span>
                <span id="refraction-display" class="angle-value">32.1°</span>
            </div>
        </div>
        
        <div id="instructions">
            鼠标拖拽旋转视角 | 滚轮缩放
        </div>
    </div>

#### 通义千问生成的代码：
![](https://resource.maoshu.fun/storage/default/20251105/PixPin_2025-11-b922ea119fcba1c0dedd6140b3077857aebc7fcc.png?e=1762464130&token=Ov7mXAv_8azPtTTXXyhh0S5qpDFEhafGpHARTAg2:Bd0PYPCVVlmJehIeyYdbpbz-vtY=)

```html
<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>光的反射与折射3D演示</title>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r128/three.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/three@0.128.0/examples/js/controls/OrbitControls.min.js"></script>
    <style>
        body {
            margin: 0;
            overflow: hidden;
            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
            background: linear-gradient(135deg, #1a2a6c, #2c3e50);
            color: white;
        }
        #container {
            position: relative;
            width: 100vw;
            height: 100vh;
        }
        #info {
            position: absolute;
            top: 20px;
            left: 20px;
            background: rgba(0, 0, 0, 0.7);
            padding: 15px;
            border-radius: 10px;
            box-shadow: 0 0 20px rgba(0, 0, 0, 0.5);
            backdrop-filter: blur(5px);
            max-width: 300px;
        }
        #info h1 {
            margin-top: 0;
            font-size: 1.4em;
            color: #4fc3f7;
            text-align: center;
        }
        .control-group {
            margin-bottom: 15px;
        }
        .control-group label {
            display: block;
            margin-bottom: 5px;
            font-weight: bold;
            color: #81d4fa;
        }
        .slider-container {
            display: flex;
            align-items: center;
        }
        .slider-container input {
            flex: 1;
            margin-right: 10px;
        }
        .value-display {
            min-width: 50px;
            text-align: right;
            font-weight: bold;
            color: #4fc3f7;
        }
        .formula {
            background: rgba(30, 30, 50, 0.8);
            padding: 10px;
            border-radius: 5px;
            margin-top: 10px;
            font-family: monospace;
            font-size: 0.9em;
            color: #bb86fc;
        }
        .legend {
            position: absolute;
            bottom: 20px;
            right: 20px;
            background: rgba(0, 0, 0, 0.7);
            padding: 10px;
            border-radius: 10px;
            display: flex;
            flex-direction: column;
            gap: 8px;
        }
        .legend-item {
            display: flex;
            align-items: center;
            gap: 8px;
        }
        .color-box {
            width: 20px;
            height: 20px;
            border-radius: 3px;
        }
        .instructions {
            position: absolute;
            bottom: 20px;
            left: 20px;
            background: rgba(0, 0, 0, 0.7);
            padding: 10px;
            border-radius: 10px;
            font-size: 0.9em;
            max-width: 300px;
        }
    </style>
</head>
<body>
    <div id="container">
        <div id="info">
            <h1>光的反射与折射</h1>
            <div class="control-group">
                <label for="angleSlider">入射角: <span id="angleValue">45</span>°</label>
                <div class="slider-container">
                    <input type="range" id="angleSlider" min="0" max="89" value="45" step="1">
                    <span class="value-display" id="angleDisplay">45°</span>
                </div>
            </div>
            <div class="control-group">
                <label for="refractiveIndexSlider">折射率: <span id="refractiveIndexValue">1.33</span></label>
                <div class="slider-container">
                    <input type="range" id="refractiveIndexSlider" min="1.0" max="1.5" value="1.33" step="0.01">
                    <span class="value-display" id="refractiveIndexDisplay">1.33</span>
                </div>
            </div>
            <div class="formula">
                斯涅尔定律: n₁·sin(θ₁) = n₂·sin(θ₂)
            </div>
        </div>
        
        <div class="legend">
            <div class="legend-item">
                <div class="color-box" style="background-color: #ff5252;"></div>
                <span>入射光线</span>
            </div>
            <div class="legend-item">
                <div class="color-box" style="background-color: #4caf50;"></div>
                <span>反射光线</span>
            </div>
            <div class="legend-item">
                <div class="color-box" style="background-color: #2196f3;"></div>
                <span>折射光线</span>
            </div>
            <div class="legend-item">
                <div class="color-box" style="background-color: #ffeb3b;"></div>
                <span>法线</span>
            </div>
        </div>
        
        <div class="instructions">
            鼠标拖拽旋转视角 | 滚轮缩放 | 调整上方参数实时观察光线变化
        </div>
    </div>