359 lines
15 KiB
HTML
359 lines
15 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="zh">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>Unity坐标系演示 (Z轴向里 + 数值输入)</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: 360px;
|
|
max-height: 95vh;
|
|
overflow-y: auto;
|
|
background: rgba(35, 35, 35, 0.95);
|
|
padding: 15px;
|
|
border-radius: 8px;
|
|
box-shadow: 0 4px 15px rgba(0,0,0,0.6);
|
|
border: 1px solid #444;
|
|
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: 15px 0 5px 0; color: #ffcc00; font-size: 0.9em; border-left: 3px solid #ffcc00; padding-left: 8px; }
|
|
|
|
/* 控制组样式：Flex布局对齐滑块和输入框 */
|
|
.control-group { margin-bottom: 12px; }
|
|
.control-label { display: block; font-size: 0.85em; color: #ccc; margin-bottom: 4px; }
|
|
.input-row { display: flex; align-items: center; gap: 10px; }
|
|
|
|
/* 滑块 */
|
|
input[type=range] { flex-grow: 1; cursor: pointer; }
|
|
|
|
/* 输入框 */
|
|
input[type=number] {
|
|
width: 60px;
|
|
background: #111;
|
|
border: 1px solid #555;
|
|
color: #fff;
|
|
padding: 4px;
|
|
border-radius: 4px;
|
|
text-align: right;
|
|
font-family: 'Consolas', monospace;
|
|
}
|
|
input[type=number]:focus { outline: 1px solid #4db8ff; border-color: #4db8ff; }
|
|
|
|
/* 计算过程盒子 */
|
|
.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.6em;
|
|
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; }
|
|
.res-y { color: #66ff66; font-weight: bold; }
|
|
.res-z { color: #6666ff; font-weight: bold; }
|
|
.comment { color: #6a9955; font-style: italic; }
|
|
|
|
/* 结果展示格 */
|
|
.result-grid { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 5px; text-align: center; margin-top: 5px; }
|
|
.res-box { padding: 5px; border-radius: 4px; font-size: 0.9em; font-weight: bold; font-family: 'Consolas', monospace; }
|
|
|
|
#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 style="font-size:0.8em; color:#aaa; margin-bottom:10px;">
|
|
视觉设定: X右, Y上, <span style="color:#6666ff; font-weight:bold;">Z向屏幕里(Forward)</span>
|
|
</div>
|
|
|
|
<!-- Theta -->
|
|
<div class="control-group">
|
|
<span class="control-label">Theta (水平角/Yaw) [-180 ~ 180]</span>
|
|
<div class="input-row">
|
|
<input type="range" id="slider-theta" min="-180" max="180" value="45" step="1">
|
|
<input type="number" id="input-theta" min="-180" max="180" value="45">
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Phi -->
|
|
<div class="control-group">
|
|
<span class="control-label">Phi (仰角/Pitch) [-90 ~ 90]</span>
|
|
<div class="input-row">
|
|
<input type="range" id="slider-phi" min="-90" max="90" value="30" step="1">
|
|
<input type="number" id="input-phi" min="-90" max="90" value="30">
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Radius -->
|
|
<div class="control-group">
|
|
<span class="control-label">Radius (半径 r) [1 ~ 15]</span>
|
|
<div class="input-row">
|
|
<input type="range" id="slider-r" min="1" max="15" value="8" step="0.1">
|
|
<input type="number" id="input-r" min="1" max="15" value="8" step="0.1">
|
|
</div>
|
|
</div>
|
|
|
|
<!-- 计算过程 -->
|
|
<h4>计算过程推导</h4>
|
|
<div class="calc-box" id="calc-content">
|
|
<!-- JS 生成 -->
|
|
</div>
|
|
|
|
<h4>最终坐标 (Unity)</h4>
|
|
<div class="result-grid">
|
|
<div class="res-box" style="background:#330000; border:1px solid #ff4444; color:#ffcccc;">X: <span id="final-x">0</span></div>
|
|
<div class="res-box" style="background:#003300; border:1px solid #44ff44; color:#ccffcc;">Y: <span id="final-y">0</span></div>
|
|
<div class="res-box" style="background:#000033; border:1px solid #4444ff; color:#ccccff;">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(0x1a1a1a);
|
|
|
|
const camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 0.1, 1000);
|
|
// 调整相机位置：放在正前方偏右上的位置，这样看 Z 轴就是“向里”延伸的
|
|
camera.position.set(0, 5, 20);
|
|
|
|
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. 坐标系绘制 (X右, Y上, Z入) ---
|
|
// 网格
|
|
const gridHelper = new THREE.GridHelper(30, 30, 0x444444, 0x222222);
|
|
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.5, gapSize: 0.3, scale: 1 });
|
|
} else {
|
|
mat = new THREE.LineBasicMaterial({ color: color, linewidth: 2 });
|
|
}
|
|
const line = new THREE.Line(geo, mat);
|
|
if(dashed) line.computeLineDistances();
|
|
return line;
|
|
}
|
|
|
|
const axisLen = 12;
|
|
// X轴: (0,0,0) -> (12, 0, 0) [红色, 向右]
|
|
scene.add(createLine(new THREE.Vector3(0,0,0), new THREE.Vector3(axisLen,0,0), 0xff0000));
|
|
|
|
// Y轴: (0,0,0) -> (0, 12, 0) [绿色, 向上]
|
|
scene.add(createLine(new THREE.Vector3(0,0,0), new THREE.Vector3(0,axisLen,0), 0x00ff00));
|
|
|
|
// Z轴: (0,0,0) -> (0, 0, -12) [蓝色, 向屏幕里]
|
|
// 注意：在 WebGL 中，Z- 是向里的。我们视觉上模拟 Unity Z+ 向前，所以我们画向 Z- 方向
|
|
scene.add(createLine(new THREE.Vector3(0,0,0), new THREE.Vector3(0,0,-axisLen), 0x0066ff));
|
|
|
|
// 轴标签 Sprites
|
|
function addLabel(text, pos, 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.copy(pos);
|
|
sprite.scale.set(1.5, 1.5, 1.5);
|
|
scene.add(sprite);
|
|
}
|
|
addLabel("X", new THREE.Vector3(axisLen+1, 0, 0), "#ff5555");
|
|
addLabel("Y", new THREE.Vector3(0, axisLen+1, 0), "#55ff55");
|
|
addLabel("Z", new THREE.Vector3(0, 0, -axisLen-1), "#5588ff"); // Z标签放在远处
|
|
|
|
// --- 3. 场景对象 ---
|
|
// 黄球
|
|
const sphereMesh = new THREE.Mesh(
|
|
new THREE.SphereGeometry(0.4, 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);
|
|
|
|
// --- 4. 逻辑绑定 ---
|
|
const els = {
|
|
sTheta: document.getElementById('slider-theta'),
|
|
iTheta: document.getElementById('input-theta'),
|
|
sPhi: document.getElementById('slider-phi'),
|
|
iPhi: document.getElementById('input-phi'),
|
|
sR: document.getElementById('slider-r'),
|
|
iR: document.getElementById('input-r'),
|
|
calc: document.getElementById('calc-content'),
|
|
resX: document.getElementById('final-x'),
|
|
resY: document.getElementById('final-y'),
|
|
resZ: document.getElementById('final-z'),
|
|
};
|
|
|
|
// 数据同步：滑块 <-> 输入框
|
|
function bindInput(slider, input) {
|
|
slider.addEventListener('input', () => {
|
|
input.value = slider.value;
|
|
update();
|
|
});
|
|
input.addEventListener('input', () => {
|
|
// 限制输入范围
|
|
let val = parseFloat(input.value);
|
|
if(input.min && val < parseFloat(input.min)) val = parseFloat(input.min);
|
|
if(input.max && val > parseFloat(input.max)) val = parseFloat(input.max);
|
|
slider.value = val;
|
|
update();
|
|
});
|
|
}
|
|
bindInput(els.sTheta, els.iTheta);
|
|
bindInput(els.sPhi, els.iPhi);
|
|
bindInput(els.sR, els.iR);
|
|
|
|
function update() {
|
|
// 1. 获取数值
|
|
const r = parseFloat(els.iR.value);
|
|
const theta = parseFloat(els.iTheta.value);
|
|
const phi = parseFloat(els.iPhi.value);
|
|
|
|
// 2. 数学计算 (Unity Logic)
|
|
const radTheta = theta * Math.PI / 180;
|
|
const radPhi = phi * Math.PI / 180;
|
|
|
|
const sinT = Math.sin(radTheta);
|
|
const cosT = Math.cos(radTheta);
|
|
const sinP = Math.sin(radPhi);
|
|
const cosP = Math.cos(radPhi);
|
|
|
|
// Unity公式:
|
|
// Z (Forward) = r * cos(phi) * cos(theta)
|
|
// X (Right) = r * cos(phi) * sin(theta)
|
|
// Y (Up) = r * sin(phi)
|
|
|
|
const r_xz = r * cosP; // 投影长度
|
|
const valX = r_xz * sinT;
|
|
const valY = r * sinP;
|
|
const valZ = r_xz * cosT; // 这是 Unity 中的 Z 值
|
|
|
|
// 3. 渲染映射 (关键步骤)
|
|
// Unity Z+ (Forward) 对应 WebGL Z- (Into Screen)
|
|
// 所以我们在 ThreeJS 里设置位置时，Z 坐标取反
|
|
const renderX = valX;
|
|
const renderY = valY;
|
|
const renderZ = -valZ;
|
|
|
|
sphereMesh.position.set(renderX, renderY, renderZ);
|
|
|
|
// 更新辅助线
|
|
const origin = new THREE.Vector3(0,0,0);
|
|
const target = new THREE.Vector3(renderX, renderY, renderZ);
|
|
const ground = new THREE.Vector3(renderX, 0, renderZ);
|
|
|
|
radiusLine.geometry.setFromPoints([origin, target]);
|
|
radiusLine.computeLineDistances();
|
|
|
|
projLine.geometry.setFromPoints([origin, ground]);
|
|
heightLine.geometry.setFromPoints([ground, target]);
|
|
|
|
// 4. 更新UI显示
|
|
els.resX.innerText = valX.toFixed(2);
|
|
els.resY.innerText = valY.toFixed(2);
|
|
els.resZ.innerText = valZ.toFixed(2);
|
|
|
|
// 5. 生成计算过程 HTML
|
|
const s_r = r.toString();
|
|
const s_cosP = cosP.toFixed(3);
|
|
const s_sinP = sinP.toFixed(3);
|
|
const s_cosT = cosT.toFixed(3);
|
|
const s_sinT = sinT.toFixed(3);
|
|
const s_rxz = r_xz.toFixed(3);
|
|
|
|
els.calc.innerHTML = `
|
|
<div class="calc-step">
|
|
<div class="comment">// 1. 角度转弧度 (Deg -> Rad)</div>
|
|
<div>θ=${theta}° ⇒ sin:${s_sinT}, cos:${s_cosT}</div>
|
|
<div>φ=${phi}° ⇒ sin:${s_sinP}, cos:${s_cosP}</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. 计算 Unity 坐标</div>
|
|
<span class="res-y">Y (Up)</span> = r * sin(φ)
|
|
<br> = ${s_r} * ${s_sinP} = <span class="res-y">${valY.toFixed(2)}</span>
|
|
<br>
|
|
<span class="res-x">X (Right)</span> = <span class="var">r_xz</span> * sin(θ)
|
|
<br> = ${s_rxz} * ${s_sinT} = <span class="res-x">${valX.toFixed(2)}</span>
|
|
<br>
|
|
<span class="res-z">Z (Forward)</span> = <span class="var">r_xz</span> * cos(θ)
|
|
<br> = ${s_rxz} * ${s_cosT} = <span class="res-z">${valZ.toFixed(2)}</span>
|
|
</div>
|
|
`;
|
|
}
|
|
|
|
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> |