From 881d17d1f1ead0b7dc8f86977a7644d1d7a35dda Mon Sep 17 00:00:00 2001
From: Xiang Silian <youmiss@163.com>
Date: Tue, 25 Nov 2025 11:28:46 +0800
Subject: [PATCH] add demo3d

---
 html/ai_studio_code.html | 321 +++++++++++++++++++++++++++++++++++++++
 1 file changed, 321 insertions(+)
 create mode 100644 html/ai_studio_code.html
diff --git a/html/ai_studio_code.html b/html/ai_studio_code.html
new file mode 100644
index 0000000..96dfae9
--- /dev/null
+++ b/html/ai_studio_code.html
@@ -0,0 +1,321 @@
+<!DOCTYPE html>
+<html lang="zh">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Unity坐标转换：计算过程演示</title>
+    <style>
+        body { margin: 0; overflow: hidden; font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; background-color: #1e1e1e; color: white; }
+        
+        /* 左侧 UI 容器 */
+        #ui-container {
+            position: absolute;
+            top: 10px; left: 10px;
+            width: 340px;
+            max-height: 95vh;
+            overflow-y: auto; /* 如果屏幕小，允许滚动 */
+            background: rgba(40, 40, 40, 0.95);
+            padding: 15px;
+            border-radius: 8px;
+            box-shadow: 0 4px 15px rgba(0,0,0,0.5);
+            pointer-events: auto;
+            z-index: 10;
+        }
+
+        /* 滚动条样式 */
+        #ui-container::-webkit-scrollbar { width: 6px; }
+        #ui-container::-webkit-scrollbar-thumb { background: #666; border-radius: 3px; }
+
+        h3 { margin-top: 0; color: #4db8ff; border-bottom: 1px solid #555; padding-bottom: 8px; font-size: 1.1em; }
+        h4 { margin: 10px 0 5px 0; color: #ffcc00; font-size: 0.9em; border-left: 3px solid #ffcc00; padding-left: 8px; }
+        
+        .control-group { margin-bottom: 10px; }
+        .control-group label { display: flex; justify-content: space-between; font-size: 0.85em; margin-bottom: 2px; }
+        .control-group input[type=range] { width: 100%; cursor: pointer; }
+        
+        /* 计算过程面板样式 */
+        .calc-box {
+            background: rgba(0, 0, 0, 0.4);
+            padding: 10px;
+            border-radius: 4px;
+            font-family: 'Consolas', 'Monaco', monospace;
+            font-size: 0.8em; /* 字体稍微改小以便显示更多公式 */
+            line-height: 1.5em;
+            color: #dcdcdc;
+            border: 1px solid #555;
+        }
+
+        .calc-step { margin-bottom: 8px; border-bottom: 1px dashed #444; padding-bottom: 8px; }
+        .calc-step:last-child { border-bottom: none; margin-bottom: 0; }
+        
+        .var { color: #9cdcfe; font-weight: bold; } /* 变量颜色 */
+        .num { color: #b5cea8; } /* 数字颜色 */
+        .res-x { color: #ff6666; font-weight: bold; } /* 结果X颜色 */
+        .res-y { color: #66ff66; font-weight: bold; } /* 结果Y颜色 */
+        .res-z { color: #6666ff; font-weight: bold; } /* 结果Z颜色 */
+        .comment { color: #6a9955; font-style: italic; } /* 注释颜色 */
+
+        #scene-tooltip {
+            position: absolute;
+            bottom: 20px; width: 100%;
+            text-align: center; color: #888;
+            pointer-events: none; z-index: 5;
+            user-select: none;
+            text-shadow: 1px 1px 2px black;
+        }
+    </style>
+    
+    <!-- 引用 -->
+    <script src="https://unpkg.com/three@0.128.0/build/three.min.js"></script>
+    <script src="https://unpkg.com/three@0.128.0/examples/js/controls/OrbitControls.js"></script>
+
+</head>
+<body>
+
+    <div id="ui-container">
+        <h3>Unity 球坐标演示</h3>
+        
+        <!-- 滑块控制区 -->
+        <div class="control-group">
+            <label><span>Theta (水平角/Yaw)</span> <span id="val-theta">45°</span></label>
+            <input type="range" id="slider-theta" min="-180" max="180" value="45" step="1">
+        </div>
+        <div class="control-group">
+            <label><span>Phi (仰角/Pitch)</span> <span id="val-phi">30°</span></label>
+            <input type="range" id="slider-phi" min="-90" max="90" value="30" step="1">
+        </div>
+        <div class="control-group">
+            <label><span>Radius (半径 r)</span> <span id="val-r">5</span></label>
+            <input type="range" id="slider-r" min="2" max="10" value="5" step="0.1">
+        </div>
+
+        <!-- 核心显示区 -->
+        <h4>实时计算推导过程</h4>
+        <div class="calc-box" id="calc-content">
+            <!-- 这里的内容会由 JS 动态生成 -->
+        </div>
+
+        <h4>结果验证</h4>
+        <div style="font-size: 0.85em; display:grid; grid-template-columns: 1fr 1fr 1fr; gap:5px; text-align:center;">
+            <div style="background:#330000; border:1px solid #ff0000; border-radius:4px;">X: <span id="final-x">0</span></div>
+            <div style="background:#003300; border:1px solid #00ff00; border-radius:4px;">Y: <span id="final-y">0</span></div>
+            <div style="background:#000033; border:1px solid #0000ff; border-radius:4px;">Z: <span id="final-z">0</span></div>
+        </div>
+    </div>
+
+    <div id="scene-tooltip">左键旋转 · 右键平移 · 滚轮缩放</div>
+
+    <script>
+        // --- 1. 初始化场景 ---
+        const scene = new THREE.Scene();
+        scene.background = new THREE.Color(0x222222);
+
+        const camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 0.1, 100);
+        camera.position.set(-9, 7, -9); 
+
+        const renderer = new THREE.WebGLRenderer({ antialias: true });
+        renderer.setSize(window.innerWidth, window.innerHeight);
+        renderer.setPixelRatio(window.devicePixelRatio);
+        document.body.appendChild(renderer.domElement);
+
+        const controls = new THREE.OrbitControls(camera, renderer.domElement);
+        controls.enableDamping = true;
+
+        // --- 2. 辅助与坐标轴 ---
+        const gridHelper = new THREE.GridHelper(20, 20, 0x444444, 0x333333);
+        scene.add(gridHelper);
+
+        // 绘制线段的辅助函数
+        function createLine(start, end, color, dashed=false) {
+            const points = [start, end];
+            const geo = new THREE.BufferGeometry().setFromPoints(points);
+            let mat;
+            if(dashed) {
+                mat = new THREE.LineDashedMaterial({ color: color, dashSize: 0.4, gapSize: 0.2, scale: 1 });
+            } else {
+                mat = new THREE.LineBasicMaterial({ color: color, linewidth: 2 });
+            }
+            const line = new THREE.Line(geo, mat);
+            if(dashed) line.computeLineDistances();
+            return line;
+        }
+
+        // 绘制坐标轴 (模拟 Unity 左手系颜色)
+        const axisLen = 8;
+        scene.add(createLine(new THREE.Vector3(0,0,0), new THREE.Vector3(axisLen,0,0), 0xff0000)); // X Red
+        scene.add(createLine(new THREE.Vector3(0,0,0), new THREE.Vector3(0,axisLen,0), 0x00ff00)); // Y Green
+        scene.add(createLine(new THREE.Vector3(0,0,0), new THREE.Vector3(0,0,axisLen), 0x0000ff)); // Z Blue
+
+        // 添加文字标签
+        function addLabel(text, x, y, z, color) {
+            const canvas = document.createElement('canvas');
+            const ctx = canvas.getContext('2d');
+            canvas.width = 64; canvas.height = 64;
+            ctx.fillStyle = color;
+            ctx.font = "bold 48px Arial";
+            ctx.textAlign = "center";
+            ctx.textBaseline = "middle";
+            ctx.fillText(text, 32, 32);
+            const sprite = new THREE.Sprite(new THREE.SpriteMaterial({ map: new THREE.CanvasTexture(canvas) }));
+            sprite.position.set(x, y, z);
+            sprite.scale.set(1, 1, 1);
+            scene.add(sprite);
+        }
+        addLabel("X", axisLen+0.5, 0, 0, "#ff5555");
+        addLabel("Y", 0, axisLen+0.5, 0, "#55ff55");
+        addLabel("Z", 0, 0, axisLen+0.5, "#5555ff");
+
+        // --- 3. 演示对象 ---
+        const sphereMesh = new THREE.Mesh(
+            new THREE.SphereGeometry(0.3, 32, 32),
+            new THREE.MeshBasicMaterial({ color: 0xffff00 })
+        );
+        scene.add(sphereMesh);
+
+        // 动态线段
+        const radiusLine = createLine(new THREE.Vector3(0,0,0), new THREE.Vector3(0,0,0), 0xffff00, true);
+        scene.add(radiusLine);
+        const projLine = createLine(new THREE.Vector3(0,0,0), new THREE.Vector3(0,0,0), 0x00aa00); // 绿色投影线
+        scene.add(projLine);
+        const heightLine = createLine(new THREE.Vector3(0,0,0), new THREE.Vector3(0,0,0), 0x00aaff); // 蓝色高度线
+        scene.add(heightLine);
+
+        // 弧线 (Theta)
+        const thetaCurveGeo = new THREE.BufferGeometry();
+        const thetaCurve = new THREE.Line(thetaCurveGeo, new THREE.LineBasicMaterial({ color: 0xffaaaa }));
+        scene.add(thetaCurve);
+
+        // --- 4. 计算与更新逻辑 ---
+        const ui = {
+            theta: document.getElementById('slider-theta'),
+            phi: document.getElementById('slider-phi'),
+            r: document.getElementById('slider-r'),
+            valTheta: document.getElementById('val-theta'),
+            valPhi: document.getElementById('val-phi'),
+            valR: document.getElementById('val-r'),
+            calcContent: document.getElementById('calc-content'),
+            finalX: document.getElementById('final-x'),
+            finalY: document.getElementById('final-y'),
+            finalZ: document.getElementById('final-z'),
+        };
+
+        function update() {
+            // 获取输入
+            const r = parseFloat(ui.r.value);
+            const theta = parseFloat(ui.theta.value);
+            const phi = parseFloat(ui.phi.value);
+
+            // 更新标签
+            ui.valTheta.innerText = theta + "°";
+            ui.valPhi.innerText = phi + "°";
+            ui.valR.innerText = r;
+
+            // --- 步骤 1: 角度转弧度 ---
+            const radTheta = theta * Math.PI / 180;
+            const radPhi = phi * Math.PI / 180;
+
+            // 为了显示友好，预先计算三角函数值
+            const sinTheta = Math.sin(radTheta);
+            const cosTheta = Math.cos(radTheta);
+            const sinPhi = Math.sin(radPhi);
+            const cosPhi = Math.cos(radPhi); // 水平分量系数
+
+            // --- 步骤 2: 计算坐标 (Unity 坐标系) ---
+            // 投影到XZ平面的长度: r_xz = r * cos(phi)
+            const r_xz = r * cosPhi;
+            
+            // x = r_xz * sin(theta) (因为0度指向Z轴，X轴是Right，所以是sin)
+            const x = r_xz * sinTheta;
+            
+            // y = r * sin(phi) (高度)
+            const y = r * sinPhi;
+            
+            // z = r_xz * cos(theta)
+            const z = r_xz * cosTheta;
+
+            // --- 3D场景更新 ---
+            sphereMesh.position.set(x, y, z);
+            sphereMesh.lookAt(0, 0, 0);
+
+            // 更新线段
+            const origin = new THREE.Vector3(0,0,0);
+            const target = new THREE.Vector3(x,y,z);
+            const ground = new THREE.Vector3(x,0,z);
+            
+            radiusLine.geometry.setFromPoints([origin, target]);
+            radiusLine.computeLineDistances();
+            projLine.geometry.setFromPoints([origin, ground]);
+            heightLine.geometry.setFromPoints([ground, target]);
+
+            // 更新弧线
+            const curvePts = [];
+            const segments = 20;
+            const arcR = r * 0.3;
+            for(let i=0; i<=segments; i++) {
+                const t = (i/segments) * radTheta;
+                curvePts.push(new THREE.Vector3(arcR * Math.sin(t), 0, arcR * Math.cos(t)));
+            }
+            thetaCurveGeo.setFromPoints(curvePts);
+
+            // --- 生成计算过程 HTML ---
+            // 使用 toFixed 保持小数位整洁
+            const s_r = r.toString();
+            const s_cosP = cosPhi.toFixed(3);
+            const s_sinP = sinPhi.toFixed(3);
+            const s_cosT = cosTheta.toFixed(3);
+            const s_sinT = sinTheta.toFixed(3);
+            const s_rxz = r_xz.toFixed(3);
+            
+            const html = `
+                <div class="calc-step">
+                    <div class="comment">// 1. 角度转弧度 & 三角函数</div>
+                    <div>&theta; = ${theta}&deg; &rArr; sin: <span class="num">${s_sinT}</span>, cos: <span class="num">${s_cosT}</span></div>
+                    <div>&phi; = ${phi}&deg; &rArr; sin: <span class="num">${s_sinP}</span>, cos: <span class="num">${s_cosP}</span></div>
+                </div>
+
+                <div class="calc-step">
+                    <div class="comment">// 2. 计算地面投影半径 (XZ平面)</div>
+                    <div class="var">r_xz</div> = r * cos(&phi;)
+                    <br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;= ${s_r} * ${s_cosP} = <span class="num">${s_rxz}</span>
+                </div>
+
+                <div class="calc-step">
+                    <div class="comment">// 3. 计算最终坐标</div>
+                    <span class="res-y">Y (高度)</span> = r * sin(&phi;)
+                    <br>&nbsp;&nbsp;= ${s_r} * ${s_sinP} = <span class="res-y">${y.toFixed(2)}</span>
+                    <br>
+                    <span class="res-x">X (右侧)</span> = <span class="var">r_xz</span> * sin(&theta;)
+                    <br>&nbsp;&nbsp;= ${s_rxz} * ${s_sinT} = <span class="res-x">${x.toFixed(2)}</span>
+                    <br>
+                    <span class="res-z">Z (前方)</span> = <span class="var">r_xz</span> * cos(&theta;)
+                    <br>&nbsp;&nbsp;= ${s_rxz} * ${s_cosT} = <span class="res-z">${z.toFixed(2)}</span>
+                </div>
+            `;
+            
+            ui.calcContent.innerHTML = html;
+            ui.finalX.innerText = x.toFixed(2);
+            ui.finalY.innerText = y.toFixed(2);
+            ui.finalZ.innerText = z.toFixed(2);
+        }
+
+        // 监听
+        ui.theta.addEventListener('input', update);
+        ui.phi.addEventListener('input', update);
+        ui.r.addEventListener('input', update);
+        window.addEventListener('resize', () => {
+            camera.aspect = window.innerWidth / window.innerHeight;
+            camera.updateProjectionMatrix();
+            renderer.setSize(window.innerWidth, window.innerHeight);
+        });
+
+        update();
+        function animate() {
+            requestAnimationFrame(animate);
+            controls.update();
+            renderer.render(scene, camera);
+        }
+        animate();
+
+    </script>
+</body>
+</html>
\ No newline at end of file
