add demo3d
This commit is contained in:
@@ -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}° ⇒ sin: <span class="num">${s_sinT}</span>, cos: <span class="num">${s_cosT}</span></div>
|
||||
<div>φ = ${phi}° ⇒ 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(φ)
|
||||
<br> = ${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(φ)
|
||||
<br> = ${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(θ)
|
||||
<br> = ${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(θ)
|
||||
<br> = ${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>
|
||||
Reference in New Issue
Block a user