239 lines
8.3 KiB
HTML
239 lines
8.3 KiB
HTML
<!DOCTYPE html>
|
||
<html>
|
||
<head>
|
||
<title>GeoGebra 3D 计算器</title>
|
||
<meta charset="utf-8">
|
||
<script src="js/deployggb.js"></script>
|
||
<style>
|
||
/* 原样式全部沿用，添加新的按钮样式 */
|
||
.app-container{display:flex;gap:10px;padding:10px}
|
||
#controlPanel{display:flex;flex-direction:column;gap:10px;min-width:620px}
|
||
.control-btn{padding:8px 12px;background:#4CAF50;color:white;border:none;border-radius:4px;cursor:pointer;font-size:14px}
|
||
.control-btn:hover{background:#45a049}
|
||
/* 新增：案例按钮容器 */
|
||
.example-btns{display:flex;gap:10px;margin-bottom:10px;flex-wrap:wrap}
|
||
/* 新增：矩形旋转按钮样式 - 蓝色 */
|
||
.btn-rect{background:#2196F3}
|
||
.btn-rect:hover{background:#0b7dda}
|
||
/* 新增：三角形旋转按钮样式 - 橙色 */
|
||
.btn-tri{background:#FF9800}
|
||
.btn-tri:hover{background:#e68a00}
|
||
/* 新增：梯形旋转按钮样式 - 紫色 */
|
||
.btn-trapezoid{background:#9C27B0}
|
||
.btn-trapezoid:hover{background:#7B1FA2}
|
||
/* 新增：棱柱展开图按钮样式 - 深绿色 */
|
||
.btn-prism{background:#388E3C}
|
||
.btn-prism:hover{background:#2E7D32}
|
||
/* 新增：棱锥展开图按钮样式 - 红色 */
|
||
.btn-pyramid{background:#F44336}
|
||
.btn-pyramid:hover{background:#D32F2F}
|
||
.command-input{width:100%;min-height:150px;margin:10px 0;padding:8px;border:1px solid #ccc;border-radius:4px;font-family:monospace;font-size:14px;white-space:pre-wrap;word-wrap:break-word;line-height:1.5;box-sizing:border-box}
|
||
</style>
|
||
</head>
|
||
<body>
|
||
<h1>几何题图形交互功能演示（3D 版）</h1>
|
||
|
||
<div class="app-container">
|
||
<div id="ggbApplet"></div>
|
||
<div id="controlPanel">
|
||
<textarea id="commandInput" class="command-input" placeholder="请输入Geogebra 3D指令运行。"
|
||
></textarea>
|
||
<!-- 调整：将案例按钮移到最上方并放在同一行 -->
|
||
<div class="example-btns">
|
||
<button id="rotateRectangle" class="control-btn btn-rect">矩形旋转一周</button>
|
||
<button id="rotateRightTriangle" class="control-btn btn-tri">直角三角形旋转一周</button>
|
||
<button id="rotateTiXing" class="control-btn btn-trapezoid">梯形旋转一周</button>
|
||
<button id="prismNet" class="control-btn btn-prism">棱柱展开图</button>
|
||
<button id="pyramidNet" class="control-btn btn-pyramid">棱锥展开图</button>
|
||
</div>
|
||
<button id="aiJieXi" class="control-btn">AI 解析指令</button>
|
||
<button id="executeCommands" class="control-btn">执行指令</button>
|
||
<button id="clearCanvas" class="control-btn">清空画布</button>
|
||
</div>
|
||
</div>
|
||
|
||
<script>
|
||
/* ========== 1. 初始化 3D 计算器 ========== */
|
||
const params = {
|
||
appName: "3d", // 关键：指定 3D
|
||
// 核心：强制加载中文本地化
|
||
language: "zh_CN", // ← 关键
|
||
locale: "zh_CN", // 确保区域设置为中文
|
||
country: "CN", // 新增：指定国家代码
|
||
useBrowserLocale: false, // 新增：不使用浏览器区域设置
|
||
useBrowserForJS: true, // 允许中文输入法正常触发
|
||
width: 1024,
|
||
height: 600,
|
||
showToolBar: true,
|
||
showAlgebraInput: true,
|
||
showMenuBar: true,
|
||
appletOnLoad(api) {
|
||
console.log("GeoGebra 3D applet loaded");
|
||
window.ggbApi = api;
|
||
}
|
||
};
|
||
|
||
const ggbApplet = new GGBApplet(params, true);
|
||
window.addEventListener("load", () => ggbApplet.inject("ggbApplet"));
|
||
</script>
|
||
|
||
<script>
|
||
/* ========== 2. 其余交互逻辑完全沿用 ========== */
|
||
/* 函数 stripGGBComments、按钮事件绑定等均无需改动 */
|
||
document.getElementById("clearCanvas").addEventListener("click", function () {
|
||
if (confirm("确定要刷新页面吗？这将重置所有操作。")) {
|
||
// 重新加载当前页面，相当于按F5
|
||
location.reload();
|
||
}
|
||
});
|
||
|
||
document.getElementById("aiJieXi").addEventListener("click", function () {
|
||
document.getElementById("commandInput").value =
|
||
`# 3D 示例：四面体
|
||
A=(0,0,0)
|
||
B=(4,0,0)
|
||
C=(2,3,0)
|
||
D=(2,1,4)
|
||
Segment(A,B)
|
||
Segment(B,C)
|
||
Segment(C,A)
|
||
Segment(A,D)
|
||
Segment(B,D)
|
||
Segment(C,D)`;
|
||
});
|
||
|
||
document.getElementById("executeCommands").addEventListener("click", execLines);
|
||
|
||
document.getElementById("rotateRectangle").addEventListener("click", function () {
|
||
document.getElementById("commandInput").value =
|
||
`# 构造三维坐标的矩形
|
||
q1 = Polygon((0, 0, 0), (1, 0, 0), (1, 0, 3), (0, 0, 3))
|
||
|
||
|
||
# 创建滑动条：
|
||
α = Slider(0°, 360°)
|
||
|
||
|
||
# 至于将矩形旋转一周，可当做是逐渐产生一系列绕着z轴的矩形
|
||
l1 = Sequence(Rotate(q1, k, zAxis), k, 0°, α, 0.5°)
|
||
|
||
|
||
#拉动滑动条α，即有将矩形旋转一周，生成圆柱的效果。`;
|
||
});
|
||
|
||
document.getElementById("rotateRightTriangle").addEventListener("click", function () {
|
||
document.getElementById("commandInput").value =
|
||
`# 创建直角三角形顶点（直角在原点B）
|
||
B = (0, 0, 0) # 直角顶点（原点）
|
||
A = (4, 0, 0) # X轴上的顶点（AB为直角边）
|
||
C = (0, 0, 7) # Z轴上的顶点（BC为直角边）
|
||
|
||
|
||
# 构建直角三角形（确保直角在B点）
|
||
tri = Polygon(A, B, C)
|
||
|
||
|
||
# 创建旋转控制滑动条 (0-360度)
|
||
θ = Slider(0°, 360°)
|
||
|
||
|
||
# 创建绕Z轴旋转序列（步长0.6°）
|
||
rotatedTris = Sequence(Rotate(tri, k, zAxis), k, 0°, θ, 0.6°)`;
|
||
});
|
||
|
||
document.getElementById("rotateTiXing").addEventListener("click", function () {
|
||
document.getElementById("commandInput").value =
|
||
`# 定义直角梯形顶点（在XZ平面，Y=0）
|
||
A = (0, 0, 0) # 原点（直角顶点）
|
||
B = (6, 0, 0) # X轴上的点（下底长度=6）
|
||
C = (4, 0, 4) # 斜边顶点（X=4，Z=4）
|
||
D = (0, 0, 4) # Z轴上的点（上底长度=4，高度=4）
|
||
|
||
# 创建直角梯形（顶点顺序：A→B→C→D）
|
||
trapezoid = Polygon(A, B, C, D)
|
||
|
||
# 创建旋转控制滑动条 (0-360度)
|
||
θ = Slider(0°, 360°)
|
||
|
||
# 创建绕Z轴旋转序列（步长0.6°）
|
||
rotatedTrapezoids = Sequence(Rotate(trapezoid, k, zAxis), k, 0°, θ, 0.6°)
|
||
`;
|
||
});
|
||
|
||
// 新增：棱柱展开图按钮事件
|
||
document.getElementById("prismNet").addEventListener("click", function () {
|
||
document.getElementById("commandInput").value =
|
||
`# 棱柱展开图演示
|
||
# 创建边数滑动条（3-8边）
|
||
n = Slider(3, 8, 1)
|
||
|
||
# 创建高度滑动条
|
||
h = Slider(3, 8)
|
||
|
||
# 创建展开控制滑动条
|
||
k = Slider(0, 1)
|
||
|
||
# 构造棱柱（基于正多边形）
|
||
a = Prism(Polygon((-1, 0, 0), (1, 0, 0), n), h)
|
||
|
||
# 生成展开图
|
||
Net(a, k)
|
||
`;
|
||
});
|
||
|
||
// 新增：棱锥展开图按钮事件
|
||
document.getElementById("pyramidNet").addEventListener("click", function () {
|
||
document.getElementById("commandInput").value =
|
||
`# 棱锥展开图演示
|
||
# 创建边数滑动条（3-8边）
|
||
n = Slider(3, 8, 1)
|
||
|
||
# 创建高度滑动条
|
||
h = Slider(3, 8)
|
||
|
||
# 创建展开控制滑动条
|
||
k = Slider(0, 1)
|
||
|
||
# 构造棱锥（基于正多边形）
|
||
a = Pyramid(Polygon((-1, 0, 0), (1, 0, 0), n), h)
|
||
|
||
# 生成展开图
|
||
Net(a, k)
|
||
|
||
# 提示：调整k滑动条查看不同展开状态`;
|
||
});
|
||
|
||
function stripGGBComments(raw) {
|
||
return raw.split('\n')
|
||
.map(l => l.replace(/#.*$/, '').trim())
|
||
.filter(l => l.length > 0)
|
||
.join('\n');
|
||
}
|
||
|
||
function execLines() {
|
||
if (!window.ggbApi) { alert("GeoGebra 未加载完成"); return; }
|
||
const lines = document.getElementById("commandInput").value
|
||
.split('\n')
|
||
.map(l => stripGGBComments(l))
|
||
.filter(l => l);
|
||
if (!lines.length) { alert("请输入至少一条指令"); return; }
|
||
|
||
let ok = 0, err = 0, fails = [];
|
||
lines.forEach((cmd, idx) => {
|
||
try {
|
||
// 尝试直接执行中文指令
|
||
window.ggbApi.evalCommand(cmd);
|
||
ok++;
|
||
} catch (e) {
|
||
// 如果失败，尝试记录详细错误信息
|
||
console.error(`执行指令失败: ${cmd}`, e);
|
||
err++;
|
||
fails.push(`${idx + 1}: ${cmd} (${e.message})`);
|
||
}
|
||
});
|
||
|
||
if (err) alert(`成功 ${ok} 条，失败 ${err} 条\n${fails.join('\n')}`);
|
||
}
|
||
</script>
|
||
</body>
|
||
</html> |