正在開發新遊戲：星•球

ejsoon · 帖子由 **ejsoon** » 2026年 5月 8日 12:28

星•球是我多年以前創作的遊戲，現在要重新開發。

ejsoon · 帖子由 **ejsoon** » 2026年 5月 8日 12:28

代码：全选

阿基米德多面體（Archimedean Solids）是一類**半正多面體**。它們由兩種或兩種以上的正多邊形組成，且每個頂點的情況（頂點組合）完全相同。

阿基米德多面體共有 **13 種**（如果不算上對稱異構體，如手性扭棱立方體）。

以下是這 13 種多面體及其組合方式（頂點配置）：

---

### 1. 截角系列 (Truncated Solids)

透過切去正多面體的頂點而得。

| 名稱 | 組成面 | 頂點配置 (Vertex Config) |
| --- | --- | --- |
| **截角正四面體** | 4 個正三角形、4 個正六邊形 | $3 \cdot 6 \cdot 6$ |
| **截角正六面體 (截角立方體)** | 8 個正三角形、6 個正八邊形 | $3 \cdot 8 \cdot 8$ |
| **截角正八面體** | 6 個正方形、8 個正六邊形 | $4 \cdot 6 \cdot 6$ |
| **截角正十二面體** | 20 個正三角形、12 個正十邊形 | $3 \cdot 10 \cdot 10$ |
| **截角正二十面體** | 12 個正五邊形、20 個正六邊形 | $5 \cdot 6 \cdot 6$ |

> **註：** 截角正二十面體就是我們熟悉的**足球**形狀。

---

### 2. 準正多面體 (Quasiregular Solids)

具有高度對稱性，邊界特徵介於兩種正多面體之間。

| 名稱 | 組成面 | 頂點配置 |
| --- | --- | --- |
| **截半立方體** | 8 個正三角形、6 個正方形 | $3 \cdot 4 \cdot 3 \cdot 4$ |
| **截半二十面體** | 20 個正三角形、12 個正五邊形 | $3 \cdot 5 \cdot 3 \cdot 5$ |

---

### 3. 斜方截半系列 (Rhombicosidodecahedron series)

這類多面體看起來像是將正多面體的面「拉開」並用正方形填充縫隙。

| 名稱 | 組成面 | 頂點配置 |
| --- | --- | --- |
| **小斜方截半立方體** | 8 個正三角形、18 個正方形 | $3 \cdot 4 \cdot 4 \cdot 4$ |
| **大斜方截半立方體 (截角截半立方體)** | 12 個正方形、8 個正六邊形、6 個正八邊形 | $4 \cdot 6 \cdot 8$ |
| **小斜方截半二十面體** | 20 個正三角形、30 個正方形、12 個正五邊形 | $3 \cdot 4 \cdot 5 \cdot 4$ |
| **大斜方截半二十面體 (截角截半二十面體)** | 30 個正方形、20 個正六邊形、12 個正十邊形 | $4 \cdot 6 \cdot 10$ |

---

### 4. 扭棱系列 (Snub Solids)

這類多面體具有手性（有左旋和右旋之分），由大量的正三角形組成。

| 名稱 | 組成面 | 頂點配置 |
| --- | --- | --- |
| **扭棱立方體** | 32 個正三角形、6 個正方形 | $3 \cdot 3 \cdot 3 \cdot 3 \cdot 4$ |
| **扭棱二十面體** | 80 個正三角形、12 個正五邊形 | $3 \cdot 3 \cdot 3 \cdot 3 \cdot 5$ |

---

### 如何閱讀「頂點配置」？

頂點配置（如 $3 \cdot 6 \cdot 6$）代表在該多面體的每一個頂點上，圍繞它的多邊形種類。例如：

* **$3 \cdot 6 \cdot 6$**：表示每個頂點都連接了一個正三角形和兩個正六邊形。
* **$4 \cdot 6 \cdot 10$**：表示每個頂點連接了一個正方形、一個正六邊形和一個正十邊形。

ejsoon · 帖子由 **ejsoon** » 2026年 5月 8日 12:34

寫一個html+css+js程式，對3,4,5進行組合，只考慮所有組合情況，數字只由小到大排列，可以只取一個或兩個數字。數字用全形顯示。

把所有情況羅列出來，並分類：只有單個數、只有3,4、只有3,5、只有4,5、有三個數。

更改：要填滿五個位置

代码：全选

<!DOCTYPE html>
<html lang="zh-Hant">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>數字組合儲存器 V4</title>
    <style>
        :root {
            --primary-color: #2c3e50;
            --accent-color: #3498db;
            --bg-color: #f4f7f6;
            --border-color: #d1d8dd;
        }
        body {
            font-family: "Microsoft JhengHei", sans-serif;
            background-color: var(--bg-color);
            margin: 0; padding: 15px;
            color: #333;
        }
        .container { max-width: 1000px; margin: auto; }
        
        .header-bar {
            display: flex; align-items: center; justify-content: space-between;
            margin-bottom: 20px; border-bottom: 2px solid var(--primary-color);
            padding-bottom: 10px;
        }
        .btn-group { display: flex; gap: 8px; }
        
        .btn-tool {
            padding: 6px 14px; cursor: pointer; border: 1px solid #aaa;
            background: white; border-radius: 4px; font-size: 0.85rem;
        }

        h2 { 
            font-size: 1.1rem; color: var(--primary-color); 
            margin: 25px 0 12px; border-left: 4px solid var(--accent-color);
            padding-left: 10px;
        }

        .wrap-container {
            display: flex; flex-wrap: wrap; gap: 12px; padding-bottom: 10px;
        }
        
        .combo-box {
            flex: 1 1 calc(33.333% - 12px);
            min-width: 150px;
            background: white; border-radius: 6px; 
            border: 1px solid var(--border-color);
            display: flex; flex-direction: column;
        }
        
        @media (max-width: 600px) {
            .combo-box { flex: 1 1 calc(50% - 12px); }
        }

        .number-header {
            background: #f8f9fa; color: #2c3e50; text-align: center;
            padding: 6px; font-size: 1.3rem; font-weight: bold;
            border-bottom: 1px solid var(--border-color);
            letter-spacing: 2px;
        }
        
        textarea {
            width: 100%; border: none; padding: 10px; box-sizing: border-box;
            resize: none; font-size: 1rem; line-height: 1.5; outline: none;
            overflow: hidden;
            font-family: inherit;
            /* 設定最小高度，確保空的時候也能顯示一行 */
            min-height: 2.5em; 
        }

        .footer-bar {
            margin-top: 50px; padding: 25px 0; border-top: 1px solid #ccc;
            display: flex; justify-content: center; gap: 15px; flex-wrap: wrap;
        }
        .btn-main {
            padding: 12px 24px; background: var(--primary-color);
            color: white; border: none; border-radius: 6px; cursor: pointer;
            font-size: 1rem; font-weight: bold;
        }
    </style>
</head>
<body>

<div class="container">
    <div class="header-bar">
        <h1 style="font-size: 1.4rem; margin: 0;">組合儲存器</h1>
        <div class="btn-group">
            <button class="btn-tool" onclick="undo()">Undo</button>
            <button class="btn-tool" onclick="redo()">Redo</button>
        </div>
    </div>

    <div id="display-area"></div>

    <div class="footer-bar">
        <button class="btn-main" onclick="downloadData()" style="background: #27ae60;">Download (JSON)</button>
        <button class="btn-main" onclick="document.getElementById('uploadInput').click()">Upload (JSON)</button>
        <input type="file" id="uploadInput" style="display:none" accept=".txt,.json" onchange="uploadData(this)">
    </div>
</div>

<script>
    const nums = [3, 4, 5];
    const toFullWidth = str => str.toString().replace(/[0-9]/g, s => String.fromCharCode(s.charCodeAt(0) + 0xFEE0));
    
    let history = [];
    let historyStep = -1;

    // 1. 自動調整高度的核心函數
    function autoResize(el) {
        if (!el) return;
        el.style.height = 'auto'; 
        // 只有當有文字時才設定 scrollHeight，否則依賴 CSS 的 min-height
        if (el.value !== "") {
            el.style.height = el.scrollHeight + 'px';
        }
    }

    // 2. 監聽視窗大小變動 (處理切換電腦版/手機版模式)
    window.addEventListener('resize', () => {
        document.querySelectorAll('textarea').forEach(autoResize);
    });

    function getRepetitiveCombos(arr, n) {
        const res = [];
        const gen = (curr, start) => {
            if (curr.length === n) { res.push(curr.join('')); return; }
            for (let i = start; i < arr.length; i++) gen([...curr, arr[i]], i);
        };
        gen([], 0); return res;
    }

    const allKeys = getRepetitiveCombos(nums, 5);
    const categories = [
        { title: "只有單個數", filter: k => new Set(k).size === 1 },
        { title: "只有３, ４", filter: k => new Set(k).size === 2 && ![...k].some(v => v == '5') },
        { title: "只有３, ５", filter: k => new Set(k).size === 2 && ![...k].some(v => v == '4') },
        { title: "只有４, ５", filter: k => new Set(k).size === 2 && ![...k].some(v => v == '3') },
        { title: "有三個數", filter: k => new Set(k).size === 3 }
    ];

    const displayArea = document.getElementById('display-area');

    categories.forEach(cat => {
        const matched = allKeys.filter(cat.filter);
        if (matched.length > 0) {
            const h2 = document.createElement('h2'); h2.innerText = cat.title;
            const wrap = document.createElement('div'); wrap.className = 'wrap-container';
            matched.forEach(key => {
                const box = document.createElement('div');
                box.className = 'combo-box';
                box.innerHTML = `
                    <div class="number-header">${toFullWidth(key)}</div>
                    <textarea id="txt-${key}" placeholder="..." oninput="handleInput('${key}', this)"></textarea>
                `;
                wrap.appendChild(box);
            });
            displayArea.appendChild(h2); displayArea.appendChild(wrap);
        }
    });

    function saveState() {
        const currentState = {};
        allKeys.forEach(k => { currentState[k] = document.getElementById('txt-'+k).value; });
        if (historyStep === -1 || JSON.stringify(currentState) !== JSON.stringify(history[historyStep])) {
            history = history.slice(0, historyStep + 1);
            history.push(currentState);
            historyStep++;
            localStorage.setItem('starball_v4_latest', JSON.stringify(currentState));
        }
    }

    function handleInput(key, el) {
        autoResize(el);
        saveState();
    }

    function loadState(state) {
        if (!state) return;
        Object.keys(state).forEach(k => {
            const el = document.getElementById('txt-'+k);
            if (el) { 
                el.value = state[k]; 
                // 延遲執行確保 DOM 已渲染完成
                setTimeout(() => autoResize(el), 0);
            }
        });
    }

    function undo() {
        if (historyStep > 0) {
            historyStep--;
            loadState(history[historyStep]);
        }
    }

    function redo() {
        if (historyStep < history.length - 1) {
            historyStep++;
            loadState(history[historyStep]);
        }
    }

    function downloadData() {
        const data = history[historyStep] || {};
        const blob = new Blob([JSON.stringify(data, null, 2)], {type: 'text/plain'});
        const now = new Date();
        const ts = now.getFullYear() + 
                   String(now.getMonth()+1).padStart(2,'0') + 
                   String(now.getDate()).padStart(2,'0') + "_" +
                   String(now.getHours()).padStart(2,'0') + 
                   String(now.getMinutes()).padStart(2,'0') + 
                   String(now.getSeconds()).padStart(2,'0');
        const a = document.createElement('a');
        a.href = URL.createObjectURL(blob);
        a.download = `starballgame_${ts}.txt`;
        a.click();
    }

    function uploadData(input) {
        const file = input.files[0];
        if (!file) return;
        const reader = new FileReader();
        reader.onload = (e) => {
            try {
                const data = JSON.parse(e.target.result);
                loadState(data);
                saveState();
                alert('數據已匯入！');
            } catch (err) { alert('檔案格式錯誤'); }
        };
        reader.readAsText(file);
    }

    window.onload = () => {
        const saved = localStorage.getItem('starball_v4_latest');
        if (saved) {
            const data = JSON.parse(saved);
            loadState(data);
            history = [data];
            historyStep = 0;
        } else {
            saveState();
        }
    };
</script>

</body>
</html>

ejsoon · 帖子由 **ejsoon** » 2026年 5月 8日 12:50

把阿基米德多面體，按「名稱、svg圖片、組成面」做成html表格。提供完整的html代碼。

代码：全选

這是一個包含 13 種阿基米德多面體的 HTML 表格代碼。為了確保圖片能正常顯示，我使用了來自 **Wikimedia Commons** 的標準 SVG 資源。

你可以將以下代碼保存為 `.html` 文件並在瀏覽器中打開。

```html
<!DOCTYPE html>
<html lang="zh-Hant">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>阿基米德多面體列表</title>
    <style>
        body { font-family: sans-serif; line-height: 1.6; padding: 20px; background-color: #f4f4f9; }
        table { width: 100%; border-collapse: collapse; background: white; box-shadow: 0 2px 5px rgba(0,0,0,0.1); }
        th, td { border: 1px solid #ddd; padding: 12px; text-align: center; }
        th { background-color: #2c3e50; color: white; }
        tr:nth-child(even) { background-color: #f9f9f9; }
        img { width: 80px; height: 80px; transition: transform 0.3s; }
        img:hover { transform: scale(1.5); }
        .config { font-family: "Courier New", monospace; color: #e74c3c; font-weight: bold; }
    </style>
</head>
<body>

    <h2 style="text-align: center;">阿基米德多面體 (Archimedean Solids)</h2>

    <table>
        <thead>
            <tr>
                <th>名稱</th>
                <th>圖示 (SVG)</th>
                <th>組成面 (正多邊形)</th>
                <th>頂點組合</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>截角正四面體</td>
                <td><img src="https://upload.wikimedia.org/wikipedia/commons/5/5e/Truncated_tetrahedron.svg" alt="Truncated tetrahedron"></td>
                <td>4個三角形、4個六邊形</td>
                <td class="config">3.6.6</td>
            </tr>
            <tr>
                <td>截半立方體</td>
                <td><img src="https://upload.wikimedia.org/wikipedia/commons/d/d4/Cuboctahedron.svg" alt="Cuboctahedron"></td>
                <td>8個三角形、6個正方形</td>
                <td class="config">3.4.3.4</td>
            </tr>
            <tr>
                <td>截角正六面體</td>
                <td><img src="https://upload.wikimedia.org/wikipedia/commons/0/07/Truncated_cube.svg" alt="Truncated cube"></td>
                <td>8個三角形、6個八邊形</td>
                <td class="config">3.8.8</td>
            </tr>
            <tr>
                <td>截角正八面體</td>
                <td><img src="https://upload.wikimedia.org/wikipedia/commons/b/b4/Truncated_octahedron.svg" alt="Truncated octahedron"></td>
                <td>6個正方形、8個六邊形</td>
                <td class="config">4.6.6</td>
            </tr>
            <tr>
                <td>小斜方截半立方體</td>
                <td><img src="https://upload.wikimedia.org/wikipedia/commons/1/1d/Rhombicuboctahedron.svg" alt="Rhombicuboctahedron"></td>
                <td>8個三角形、18個正方形</td>
                <td class="config">3.4.4.4</td>
            </tr>
            <tr>
                <td>大斜方截半立方體</td>
                <td><img src="https://upload.wikimedia.org/wikipedia/commons/a/ad/Great_rhombicuboctahedron.svg" alt="Great rhombicuboctahedron"></td>
                <td>12個正方形、8個六邊形、6個八邊形</td>
                <td class="config">4.6.8</td>
            </tr>
            <tr>
                <td>扭棱立方體</td>
                <td><img src="https://upload.wikimedia.org/wikipedia/commons/3/30/Snub_cube.svg" alt="Snub cube"></td>
                <td>32個三角形、6個正方形</td>
                <td class="config">3.3.3.3.4</td>
            </tr>
            <tr>
                <td>截半二十面體</td>
                <td><img src="https://upload.wikimedia.org/wikipedia/commons/d/df/Icosidodecahedron.svg" alt="Icosidodecahedron"></td>
                <td>20個三角形、12個五邊形</td>
                <td class="config">3.5.3.5</td>
            </tr>
            <tr>
                <td>截角正十二面體</td>
                <td><img src="https://upload.wikimedia.org/wikipedia/commons/1/1a/Truncated_dodecahedron.svg" alt="Truncated dodecahedron"></td>
                <td>20個三角形、12個十邊形</td>
                <td class="config">3.10.10</td>
            </tr>
            <tr>
                <td>截角正二十面體</td>
                <td><img src="https://upload.wikimedia.org/wikipedia/commons/7/7b/Truncated_icosahedron.svg" alt="Truncated icosahedron"></td>
                <td>12個五邊形、20個六邊形</td>
                <td class="config">5.6.6</td>
            </tr>
            <tr>
                <td>小斜方截半二十面體</td>
                <td><img src="https://upload.wikimedia.org/wikipedia/commons/9/90/Rhombicosidodecahedron.svg" alt="Rhombicosidodecahedron"></td>
                <td>20個三角形、30個正方形、12個五邊形</td>
                <td class="config">3.4.5.4</td>
            </tr>
            <tr>
                <td>大斜方截半二十面體</td>
                <td><img src="https://upload.wikimedia.org/wikipedia/commons/2/22/Great_rhombicosidodecahedron.svg" alt="Great rhombicosidodecahedron"></td>
                <td>30個正方形、20個六邊形、12個十邊形</td>
                <td class="config">4.6.10</td>
            </tr>
            <tr>
                <td>扭棱二十面體</td>
                <td><img src="https://upload.wikimedia.org/wikipedia/commons/b/bb/Snub_dodecahedron.svg" alt="Snub dodecahedron"></td>
                <td>80個三角形、12個五邊形</td>
                <td class="config">3.3.3.3.5</td>
            </tr>
        </tbody>
    </table>

</body>
</html>

```

### 重點說明：

1. **SVG 圖片來源**：使用了 Wikimedia Commons 的圖標，這些圖標質量高且加載速度快，且支持透明背景，適合各種主題。
2. **頂點組合 (Vertex Configuration)**：雖然你沒要求，但我額外加上了這一欄，因為這是區分阿基米德多面體的關鍵數學指標。
3. **交互效果**：在 CSS 中加入了 `hover` 效果，當鼠標懸停在圖片上時會略微放大，方便看清細節。
4. **響應式設計**：表格會根據窗口大小調整寬度。

ejsoon · 帖子由 **ejsoon** » 2026年 5月 8日 20:01

starball_html.7z: (248.55 KiB) 已下载 194 次

ejsoon · 帖子由 **ejsoon** » 2026年 5月 8日 21:58

ajiandstar.7z: (2.97 KiB) 已下载 196 次

ejsoon · 帖子由 **ejsoon** » 2026年 5月 8日 22:11

代码：全选

<!DOCTYPE html>
<html lang="zh-Hant">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>阿基米德多面體詳解 - 進階版</title>
    <style>
        body { font-family: "Segoe UI", "Microsoft JhengHei", sans-serif; line-height: 1.6; padding: 30px; background-color: #f0f2f5; color: #333; }
        h1 { text-align: center; color: #1a3a5a; }
        h2 { background-color: #34495e; color: white; padding: 10px 15px; border-radius: 5px; margin-top: 30px; font-size: 1.2em; }
        table { width: 100%; border-collapse: collapse; background: white; margin-bottom: 20px; box-shadow: 0 4px 6px rgba(0,0,0,0.1); border-radius: 8px; overflow: hidden; table-layout: fixed; }
        th, td { border: 1px solid #e0e0e0; padding: 12px; text-align: left; word-break: break-all; }
        th { background-color: #ecf0f1; color: #2c3e50; font-weight: bold; }
        .img-col { width: 100px; text-align: center; cursor: pointer; }
        img { width: 80px; height: 80px; object-fit: contain; display: block; margin: auto; background: #eee; }
        .num-combo { cursor: pointer; transition: background 0.3s; color: #2980b9; font-weight: bold; }
        .num-combo:hover { background-color: #d1ecf1; }
        .num-combo.selected { background-color: #f1c40f !important; }
        .reason-cell { cursor: pointer; min-height: 40px; }
        textarea { width: 100%; box-sizing: border-box; font-family: inherit; }
        .btn-container { text-align: center; margin-top: 40px; }
        .download-btn { padding: 12px 25px; background: #27ae60; color: white; border: none; border-radius: 5px; cursor: pointer; font-size: 1rem; }
        .download-btn:hover { background: #219150; }
    </style>
</head>
<body>

    <h1>阿基米德多面體詳解 (互動存儲版)</h1>

    <div id="table-container">
        </div>

    <div class="btn-container">
        <button class="download-btn" onclick="downloadHTML()">下載當前資料 (HTML)</button>
    </div>

    <input type="file" id="imageInput" accept="image/*" style="display:none">

    <script>
        // 初始化數據
        const data = [
            { cat: "一、截角系列", name: "截角正四面體", faces: "4 個正三角形、4 個正六邊形", num: "44445", reason: "" },
            { cat: "一、截角系列", name: "截角正六面體 (截角立方體)", faces: "8 個正三角形、6 個正八邊形", num: "33345", reason: "" },
            { cat: "一、截角系列", name: "截角正八面體", faces: "6 個正方形、8 個正六邊形", num: "44555", reason: "" },
            { cat: "一、截角系列", name: "截角正十二面體", faces: "20 個正三角形、12 個正十邊形", num: "33455", reason: "" },
            { cat: "一、截角系列", name: "截角正二十面體", faces: "12 個正五邊形、20 個正六邊形", num: "45555", reason: "" },
            { cat: "二、準正多面體", name: "截半立方體", faces: "8 個正三角形、6 個正方形", num: "33344", reason: "" },
            { cat: "二、準正多面體", name: "截半二十面體", faces: "20 個正三角形、12 個正五邊形", num: "33355", reason: "" },
            { cat: "三、斜方截半系列", name: "小斜方截半立方體", faces: "8 個正三角形、18 個正方形", num: "33444", reason: "" },
            { cat: "三、斜方截半系列", name: "大斜方截半立方體", faces: "12 個正方形、8 個正六邊形、6 個正八邊形", num: "34455", reason: "" },
            { cat: "三、斜方截半系列", name: "小斜方截半二十面體", faces: "20 個正三角形、30 個正方形、12 個正五邊形", num: "33445", reason: "" },
            { cat: "三、斜方截半系列", name: "大斜方截半二十面體", faces: "30 個正方形、20 個正六邊形、12 個正十邊形", num: "34445", reason: "" },
            { cat: "四、扭棱系列", name: "扭棱立方體", faces: "32 個正三角形、6 個正方形", num: "33334", reason: "" },
            { cat: "四、扭棱系列", name: "扭棱二十面體", faces: "80 個正三角形、12 個正五邊形", num: "33335", reason: "" },
            { cat: "五、其他星狀/基礎形體", name: "正四面體", faces: "4個正三角形", num: "33333", reason: "" },
            { cat: "五、其他星狀/基礎形體", name: "立方體", faces: "6個正方形", num: "44444", reason: "" },
            { cat: "五、其他星狀/基礎形體", name: "正十二面體", faces: "12個正五邊形", num: "55555", reason: "" },
            { cat: "五、其他星狀/基礎形體", name: "正八面體", faces: "8個正三角形", num: "34444", reason: "" },
            { cat: "五、其他星狀/基礎形體", name: "正二十面體", faces: "20個正三角形", num: "35555", reason: "" },
            { cat: "五、其他星狀/基礎形體", name: "圓椎/圓柱/球", faces: "非多面體", num: "33555", reason: "圓椎" }
        ];

        function renderTable() {
            const container = document.getElementById('table-container');
            const categories = [...new Set(data.map(item => item.cat))];
            
            container.innerHTML = '';
            categories.forEach(cat => {
                const h2 = document.createElement('h2');
                h2.innerText = cat;
                container.appendChild(h2);

                const table = document.createElement('table');
                table.innerHTML = `<thead><tr><th>名稱</th><th class="img-col">圖片</th><th>組成面</th><th>數字組合</th><th>理由</th></tr></thead><tbody></tbody>`;
                const tbody = table.querySelector('tbody');

                data.filter(item => item.cat === cat).forEach(item => {
                    const tr = document.createElement('tr');
                    tr.innerHTML = `
                        <td>${item.name}</td>
                        <td class="img-col" onclick="triggerUpload(this)"><img src="about:blank" alt="點擊上傳"></td>
                        <td>${item.faces}</td>
                        <td class="num-combo" onclick="handleSwap(this)">${item.num}</td>
                        <td class="reason-cell" onclick="editReason(this)">${item.reason}</td>
                    `;
                    tbody.appendChild(tr);
                });
                container.appendChild(table);
            });
        }

        // --- 圖片上傳功能 ---
        let currentImgTarget = null;
        function triggerUpload(td) {
            currentImgTarget = td.querySelector('img');
            document.getElementById('imageInput').click();
        }

        document.getElementById('imageInput').addEventListener('change', function(e) {
            const file = e.target.files[0];
            if (file && currentImgTarget) {
                const reader = new FileReader();
                reader.onload = (e) => { currentImgTarget.src = e.target.result; };
                reader.readAsDataURL(file);
            }
        });

        // --- 數字交換功能 ---
        let selectedCombo = null;
        function handleSwap(td) {
            if (!selectedCombo) {
                selectedCombo = td;
                td.classList.add('selected');
            } else if (selectedCombo === td) {
                td.classList.remove('selected');
                selectedCombo = null;
            } else {
                const temp = td.innerText;
                td.innerText = selectedCombo.innerText;
                selectedCombo.innerText = temp;
                selectedCombo.classList.remove('selected');
                selectedCombo = null;
            }
        }

        // --- 理由編輯功能 ---
        function editReason(td) {
            if (td.querySelector('textarea')) return;
            const oldText = td.innerText;
            const textarea = document.createElement('textarea');
            textarea.value = oldText;
            td.innerHTML = '';
            td.appendChild(textarea);
            textarea.focus();

            textarea.onkeydown = function(e) {
                if (e.key === 'Escape') {
                    td.innerText = this.value;
                }
            };
            textarea.onblur = function() {
                td.innerText = this.value;
            };
        }

        // --- 下載功能 ---
        function downloadHTML() {
            // 下載前清除選中狀態
            if(selectedCombo) selectedCombo.classList.remove('selected');
            
            const timestamp = new Date().toISOString().replace(/[-T:]/g, '').split('.')[0];
            const filename = `starball_${timestamp.substring(0,8)}_${timestamp.substring(8,14)}.html`;
            
            // 複製當前文件內容
            const htmlContent = document.documentElement.outerHTML;
            const blob = new Blob([htmlContent], { type: 'text/html' });
            const link = document.createElement('a');
            link.href = URL.createObjectURL(blob);
            link.download = filename;
            link.click();
        }

        // 執行初始渲染
        renderTable();
    </script>
</body>
</html>

ejsoon · 帖子由 **ejsoon** » 2026年 5月 8日 22:25

改進下載功能：
一，文件名中的日期，要用new Date()取得當前時間。

二，要保存圖片base64，數字，理由這些數據。

三，增加一個「上載保存資料(HTML)」，當上傳後，資料將填入。

代码：全选

改進下載功能：
一，文件名中的日期，要用new Date()取得當前時間。

二，要保存圖片base64，數字，理由這些數據。

三，增加一個「上載保存資料(HTML)」，當上傳後，資料將填入。

ejsoon · 帖子由 **ejsoon** » 2026年 5月 8日 22:29

chatgpt：

代码：全选

```html
<!DOCTYPE html>
<html lang="zh-Hant">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>阿基米德多面體詳解 - 進階版</title>

<style>

body{
    font-family:"Segoe UI","Microsoft JhengHei",sans-serif;
    line-height:1.6;
    padding:30px;
    background-color:#f0f2f5;
    color:#333;
}

h1{
    text-align:center;
    color:#1a3a5a;
}

h2{
    background-color:#34495e;
    color:white;
    padding:10px 15px;
    border-radius:5px;
    margin-top:30px;
    font-size:1.2em;
}

table{
    width:100%;
    border-collapse:collapse;
    background:white;
    margin-bottom:20px;
    box-shadow:0 4px 6px rgba(0,0,0,0.1);
    border-radius:8px;
    overflow:hidden;
    table-layout:fixed;
}

th,td{
    border:1px solid #e0e0e0;
    padding:12px;
    text-align:left;
    word-break:break-all;
}

th{
    background-color:#ecf0f1;
    color:#2c3e50;
    font-weight:bold;
}

.img-col{
    width:100px;
    text-align:center;
    cursor:pointer;
}

img{
    width:80px;
    height:80px;
    object-fit:contain;
    display:block;
    margin:auto;
    background:#eee;
}

.num-combo{
    cursor:pointer;
    transition:background 0.3s;
    color:#2980b9;
    font-weight:bold;
}

.num-combo:hover{
    background-color:#d1ecf1;
}

.num-combo.selected{
    background-color:#f1c40f !important;
}

.reason-cell{
    cursor:pointer;
    min-height:40px;
}

textarea{
    width:100%;
    box-sizing:border-box;
    font-family:inherit;
}

.btn-container{
    text-align:center;
    margin-top:40px;
}

.download-btn{
    padding:12px 25px;
    background:#27ae60;
    color:white;
    border:none;
    border-radius:5px;
    cursor:pointer;
    font-size:1rem;
    margin:5px;
}

.download-btn:hover{
    background:#219150;
}

</style>
</head>

<body>

<h1>阿基米德多面體詳解 (互動存儲版)</h1>

<div id="table-container"></div>

<div class="btn-container">

    <button class="download-btn" onclick="downloadHTML()">
        下載當前資料 (HTML)
    </button>

    <button class="download-btn" onclick="uploadHTML()">
        上載保存資料 (HTML)
    </button>

</div>

<input type="file" id="imageInput" accept="image/*" style="display:none">

<input type="file" id="htmlInput" accept=".html" style="display:none">

<script>

const data = [

{
cat:"一、截角系列",
name:"截角正四面體",
faces:"4 個正三角形、4 個正六邊形",
num:"44445",
reason:"",
img:""
},

{
cat:"一、截角系列",
name:"截角正六面體 (截角立方體)",
faces:"8 個正三角形、6 個正八邊形",
num:"33345",
reason:"",
img:""
},

{
cat:"一、截角系列",
name:"截角正八面體",
faces:"6 個正方形、8 個正六邊形",
num:"44555",
reason:"",
img:""
},

{
cat:"一、截角系列",
name:"截角正十二面體",
faces:"20 個正三角形、12 個正十邊形",
num:"33455",
reason:"",
img:""
},

{
cat:"一、截角系列",
name:"截角正二十面體",
faces:"12 個正五邊形、20 個正六邊形",
num:"45555",
reason:"",
img:""
},

{
cat:"二、準正多面體",
name:"截半立方體",
faces:"8 個正三角形、6 個正方形",
num:"33344",
reason:"",
img:""
},

{
cat:"二、準正多面體",
name:"截半二十面體",
faces:"20 個正三角形、12 個正五邊形",
num:"33355",
reason:"",
img:""
},

{
cat:"三、斜方截半系列",
name:"小斜方截半立方體",
faces:"8 個正三角形、18 個正方形",
num:"33444",
reason:"",
img:""
},

{
cat:"三、斜方截半系列",
name:"大斜方截半立方體",
faces:"12 個正方形、8 個正六邊形、6 個正八邊形",
num:"34455",
reason:"",
img:""
},

{
cat:"三、斜方截半系列",
name:"小斜方截半二十面體",
faces:"20 個正三角形、30 個正方形、12 個正五邊形",
num:"33445",
reason:"",
img:""
},

{
cat:"三、斜方截半系列",
name:"大斜方截半二十面體",
faces:"30 個正方形、20 個正六邊形、12 個正十邊形",
num:"34445",
reason:"",
img:""
},

{
cat:"四、扭棱系列",
name:"扭棱立方體",
faces:"32 個正三角形、6 個正方形",
num:"33334",
reason:"",
img:""
},

{
cat:"四、扭棱系列",
name:"扭棱二十面體",
faces:"80 個正三角形、12 個正五邊形",
num:"33335",
reason:"",
img:""
},

{
cat:"五、其他星狀/基礎形體",
name:"正四面體",
faces:"4個正三角形",
num:"33333",
reason:"",
img:""
},

{
cat:"五、其他星狀/基礎形體",
name:"立方體",
faces:"6個正方形",
num:"44444",
reason:"",
img:""
},

{
cat:"五、其他星狀/基礎形體",
name:"正十二面體",
faces:"12個正五邊形",
num:"55555",
reason:"",
img:""
},

{
cat:"五、其他星狀/基礎形體",
name:"正八面體",
faces:"8個正三角形",
num:"34444",
reason:"",
img:""
},

{
cat:"五、其他星狀/基礎形體",
name:"正二十面體",
faces:"20個正三角形",
num:"35555",
reason:"",
img:""
},

{
cat:"五、其他星狀/基礎形體",
name:"圓椎/圓柱/球",
faces:"非多面體",
num:"33555",
reason:"圓椎",
img:""
}

];

function renderTable(){

    const container = document.getElementById('table-container');

    const categories = [...new Set(data.map(item => item.cat))];

    container.innerHTML = '';

    categories.forEach(cat => {

        const h2 = document.createElement('h2');

        h2.innerText = cat;

        container.appendChild(h2);

        const table = document.createElement('table');

        table.innerHTML =
        `
        <thead>
        <tr>
            <th>名稱</th>
            <th class="img-col">圖片</th>
            <th>組成面</th>
            <th>數字組合</th>
            <th>理由</th>
        </tr>
        </thead>
        <tbody></tbody>
        `;

        const tbody = table.querySelector('tbody');

        data
        .filter(item => item.cat === cat)
        .forEach(item => {

            const tr = document.createElement('tr');

            tr.innerHTML =
            `
            <td>${item.name}</td>

            <td class="img-col" onclick="triggerUpload(this)">
                <img src="${item.img || 'about:blank'}">
            </td>

            <td>${item.faces}</td>

            <td class="num-combo" onclick="handleSwap(this)">
                ${item.num}
            </td>

            <td class="reason-cell" onclick="editReason(this)">
                ${item.reason}
            </td>
            `;

            tbody.appendChild(tr);

        });

        container.appendChild(table);

    });

}

let currentImgTarget = null;
let currentDataItem = null;

function triggerUpload(td){

    currentImgTarget = td.querySelector('img');

    const tr = td.parentNode;

    const name = tr.children[0].innerText;

    currentDataItem = data.find(v => v.name === name);

    document.getElementById('imageInput').click();

}

document
.getElementById('imageInput')
.addEventListener('change', function(e){

    const file = e.target.files[0];

    if(file && currentImgTarget){

        const reader = new FileReader();

        reader.onload = function(e){

            const base64 = e.target.result;

            currentImgTarget.src = base64;

            if(currentDataItem){
                currentDataItem.img = base64;
            }

        };

        reader.readAsDataURL(file);

    }

});

let selectedCombo = null;
let selectedItem = null;

function handleSwap(td){

    const tr = td.parentNode;

    const name = tr.children[0].innerText;

    const item = data.find(v => v.name === name);

    if(!selectedCombo){

        selectedCombo = td;

        selectedItem = item;

        td.classList.add('selected');

    }else if(selectedCombo === td){

        td.classList.remove('selected');

        selectedCombo = null;
        selectedItem = null;

    }else{

        const temp = item.num;

        item.num = selectedItem.num;

        selectedItem.num = temp;

        td.innerText = item.num;

        selectedCombo.innerText = selectedItem.num;

        selectedCombo.classList.remove('selected');

        selectedCombo = null;
        selectedItem = null;

    }

}

function editReason(td){

    if(td.querySelector('textarea')) return;

    const tr = td.parentNode;

    const name = tr.children[0].innerText;

    const item = data.find(v => v.name === name);

    const textarea = document.createElement('textarea');

    textarea.value = item.reason;

    td.innerHTML = '';

    td.appendChild(textarea);

    textarea.focus();

    function save(){

        item.reason = textarea.value;

        td.innerText = item.reason;

    }

    textarea.onkeydown = function(e){

        if(e.key === 'Escape'){
            save();
        }

    };

    textarea.onblur = save;

}

function downloadHTML(){

    if(selectedCombo){
        selectedCombo.classList.remove('selected');
    }

    const clonedDoc =
        document.documentElement.cloneNode(true);

    const scripts =
        clonedDoc.querySelectorAll("script");

    scripts.forEach(script => {

        if(script.innerHTML.includes("const data =")){

            script.innerHTML =
                script.innerHTML.replace(
                    /const data = \[[\s\S]*?\];/,
                    `const data = ${JSON.stringify(data, null, 4)};`
                );

        }

    });

    const now = new Date();

    const pad = n => String(n).padStart(2,'0');

    const filename =
        `starball_${
            now.getFullYear()
        }${
            pad(now.getMonth()+1)
        }${
            pad(now.getDate())
        }_${
            pad(now.getHours())
        }${
            pad(now.getMinutes())
        }${
            pad(now.getSeconds())
        }.html`;

    const htmlContent =
        '<!DOCTYPE html>\n' + clonedDoc.outerHTML;

    const blob =
        new Blob(
            [htmlContent],
            {type:'text/html'}
        );

    const link = document.createElement('a');

    link.href = URL.createObjectURL(blob);

    link.download = filename;

    link.click();

    URL.revokeObjectURL(link.href);

}

function uploadHTML(){

    document.getElementById('htmlInput').click();

}

document
.getElementById('htmlInput')
.addEventListener('change', function(e){

    const file = e.target.files[0];

    if(!file) return;

    const reader = new FileReader();

    reader.onload = function(e){

        const text = e.target.result;

        const match =
            text.match(
                /const data = (\[[\s\S]*?\]);/
            );

        if(!match){

            alert("未找到保存資料");

            return;

        }

        try{

            const loadedData = eval(match[1]);

            data.length = 0;

            loadedData.forEach(v => data.push(v));

            renderTable();

            alert("資料已載入");

        }catch(err){

            console.error(err);

            alert("資料解析失敗");

        }

    };

    reader.readAsText(file);

});

renderTable();

</script>

</body>
</html>
```

ejsoon · 帖子由 **ejsoon** » 2026年 5月 9日 01:22

starballpr344.7z: (4.34 KiB) 已下载 196 次

ejsoon · 帖子由 **ejsoon** » 2026年 5月 10日 18:51

阿基米德立體，3d打印：

https://www.thingiverse.com/thing:7052974

ejsoon · 帖子由 **ejsoon** » 2026年 5月 13日 12:10

在所有的名稱下方都加上對應的英文，為標題都加上英文。只需給出所要修改的地方。

代码：全选

根據您的要求，以下是針對 HTML 檔案中 `data` 陣列（名稱翻譯）以及 `renderTable` 函數（標題翻譯）所需修改的程式碼片段：

### 1. 修改 `data` 陣列中的 `name` 欄位

請將原本的 `data` 內容替換為以下包含中英文對照的版本：

```javascript
const data = [
  { cat: '一、截角系列 Truncated Series', name: '截角正四面體 (Truncated Tetrahedron)', faces: '4 個正三角形、4 個正六邊形', num: '44445', reason: '', img: '' },
  { cat: '一、截角系列 Truncated Series', name: '截角正六面體 (Truncated Cube)', faces: '8 個正三角形、6 個正八邊形', num: '33345', reason: '', img: '' },
  { cat: '一、截角系列 Truncated Series', name: '截角正八面體 (Truncated Octahedron)', faces: '6 個正方形、8 個正六邊形', num: '44555', reason: '', img: '' },
  { cat: '一、截角系列 Truncated Series', name: '截角正十二面體 (Truncated Dodecahedron)', faces: '20 個正三角形、12 個正十邊形', num: '33455', reason: '', img: '' },
  { cat: '一、截角系列 Truncated Series', name: '截角正二十面體 (Truncated Icosahedron)', faces: '12 個正五邊形、20 個正六邊形', num: '45555', reason: '', img: '' },
  { cat: '二、準正多面體 Quasi-regular Polyhedra', name: '截半立方體 (Cuboctahedron)', faces: '8 個正三角形、6 個正方形', num: '33344', reason: '', img: '' },
  { cat: '二、準正多面體 Quasi-regular Polyhedra', name: '截半二十面體 (Icosidodecahedron)', faces: '20 個正三角形、12 個正五邊形', num: '33355', reason: '', img: '' },
  { cat: '三、斜方截半系列 Rhombicuboctahedron Series', name: '小斜方截半立方體 (Rhombicuboctahedron)', faces: '8 個正三角形、18 個正方形', num: '33444', reason: '', img: '' },
  { cat: '三、斜方截半系列 Rhombicuboctahedron Series', name: '大斜方截半立方體 (Great Rhombicuboctahedron)', faces: '12 個正方形、8 個正六邊形、6 個正八邊形', num: '34455', reason: '', img: '' },
  { cat: '三、斜方截半系列 Rhombicuboctahedron Series', name: '小斜方截半二十面體 (Rhombicosidodecahedron)', faces: '20 個正三角形、30 個正方形、12 個正五邊形', num: '33445', reason: '', img: '' },
  { cat: '三、斜方截半系列 Rhombicuboctahedron Series', name: '大斜方截半二十面體 (Great Rhombicosidodecahedron)', faces: '30 個正方形、20 個正六邊形、12 個正十邊形', num: '34445', reason: '', img: '' },
  { cat: '四、扭棱系列 Snub Series', name: '扭棱立方體 (Snub Cube)', faces: '32 個正三角形、6 個正方形', num: '33334', reason: '', img: '' },
  { cat: '四、扭棱系列 Snub Series', name: '扭棱二十面體 (Snub Dodecahedron)', faces: '80 個正三角形、12 個正五邊形', num: '33335', reason: '', img: '' },
  { cat: '五、其他星狀/基礎形體 Others / Platonic Solids', name: '正四面體 (Tetrahedron)', faces: '4個正三角形', num: '33333', reason: '', img: '' },
  { cat: '五、其他星狀/基礎形體 Others / Platonic Solids', name: '立方體 (Cube)', faces: '6個正方形', num: '44444', reason: '', img: '' },
  { cat: '五、其他星狀/基礎形體 Others / Platonic Solids', name: '正十二面體 (Dodecahedron)', faces: '12個正五邊形', num: '55555', reason: '', img: '' },
  { cat: '五、其他星狀/基礎形體 Others / Platonic Solids', name: '正八面體 (Octahedron)', faces: '8個正三角形', num: '34444', reason: '', img: '' },
  { cat: '五、其他星狀/基礎形體 Others / Platonic Solids', name: '正二十面體 (Icosahedron)', faces: '20個正三角形', num: '35555', reason: '', img: '' },
  { cat: '五、其他星狀/基礎形體 Others / Platonic Solids', name: '圓椎 (Cone)', faces: '非多面體', num: '33555', reason: '', img: '' },
  { cat: '五、其他星狀/基礎形體 Others / Platonic Solids', name: '圓柱 (Cylinder)', faces: '非多面體', num: '44455', reason: '', img: '' },
  { cat: '五、其他星狀/基礎形體 Others / Platonic Solids', name: '球 (Sphere)', faces: '非多面體', num: '34555', reason: '', img: '' }
];

```

---

### 2. 修改表格標題（`renderTable` 內）

請在 `renderTable` 函數中，找到定義 `table.innerHTML` 的部分，修改為：

```javascript
          table.innerHTML = `
        <thead>
        <tr>
            <th>名稱 (Name)</th>
            <th class="img-col">圖片 (Image)</th>
            <th>組成面 (Faces)</th>
            <th>數字組合 (Number Combo)</th>
            <th>理由 (Reason)</th>
        </tr>
        </thead>
        <tbody></tbody>
        `;

```

---

### 3. 修改網頁主標題（HTML 內）

將 `body` 下方的 `<h1>` 修改如下：

```html
<h1>阿基米德多面體詳解 (Archimedean Solids - Interactive)</h1>

```

ejsoon · 帖子由 **ejsoon** » 2026年 5月 14日 09:15

https://polyhedra.tessera.li/

代码：全选

<!DOCTYPE html>
<html lang="zh-TW">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>OBJ to SVG 轉換器</title>
<style>
    :root {
        --primary: #2b2d42;
        --bg: #edf2f4;
        --panel: #ffffff;
    }
    body {
        font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
        background-color: var(--bg);
        color: var(--primary);
        margin: 0;
        padding: 20px;
        display: flex;
        gap: 20px;
        height: 100vh;
        box-sizing: border-box;
    }
    h2 { margin-top: 0; font-size: 1.2rem; }
    .panel {
        background: var(--panel);
        padding: 20px;
        border-radius: 8px;
        box-shadow: 0 4px 6px rgba(0,0,0,0.05);
        display: flex;
        flex-direction: column;
        gap: 15px;
    }
    .left-panel {
        flex: 0 0 350px;
        overflow-y: auto;
    }
    .right-panel {
        flex: 1;
        display: flex;
        flex-direction: column;
        align-items: center;
    }
    textarea {
        width: 100%;
        height: 150px;
        resize: vertical;
        font-family: monospace;
        font-size: 12px;
        padding: 8px;
        box-sizing: border-box;
    }
    .control-group {
        display: flex;
        flex-direction: column;
        gap: 8px;
        border-bottom: 1px solid #eee;
        padding-bottom: 10px;
    }
    .row { display: flex; justify-content: space-between; align-items: center; }
    .color-row { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
    .color-row label { display: flex; justify-content: space-between; align-items: center; font-size: 0.9rem; }
    input[type="number"], input[type="range"] { width: 120px; }
    input[type="color"] { cursor: pointer; padding: 0; border: none; width: 30px; height: 30px; }
    
    #svg-container {
        flex: 1;
        width: 100%;
        background: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAAKCAYAAACNMs+9AAAAAXNSR0IArs4c6QAAACVJREFUKFNjZCASMDKhuJqB4T8DQwPTBFAVjEpjVBgxGkSFAxQAPoIL1x+D5LAAAAAASUVORK5CYII='); /* 棋盤格背景 */
        border: 1px solid #ccc;
        border-radius: 4px;
        display: flex;
        justify-content: center;
        align-items: center;
        overflow: hidden;
    }
    svg { max-width: 100%; max-height: 100%; }
    .action-bar {
        width: 100%;
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-top: 15px;
        padding: 15px;
        background: var(--panel);
        border-radius: 8px;
        box-sizing: border-box;
    }
    button {
        background: #0077b6;
        color: white;
        border: none;
        padding: 10px 20px;
        border-radius: 4px;
        cursor: pointer;
        font-size: 1rem;
        transition: background 0.2s;
    }
    button:hover { background: #023e8a; }
</style>
</head>
<body>

<div class="panel left-panel">
    <h2>1. 輸入 OBJ 數據</h2>
    <textarea id="obj-input">
v 0.0 0.0 1.077364
v 0.7442063 0.0 0.7790187
v 0.3123013 0.6755079 0.7790187
v -0.482096 0.5669449 0.7790187
v -0.7169181 -0.1996786 0.7790187
v -0.1196038 -0.7345325 0.7790187
v 0.6246025 -0.7345325 0.4806734
v 1.056508 -0.1996786 0.06806912
v 0.8867128 0.5669449 0.2302762
v 0.2621103 1.042774 0.06806912
v -0.532287 0.9342111 0.06806912
v -1.006317 0.3082417 0.2302762
v -0.7020817 -0.784071 0.2302762
v 0.02728827 -1.074865 0.06806912
v 0.6667271 -0.784071 -0.3184664
v 0.8216855 -0.09111555 -0.6908285
v 0.6518908 0.6755079 -0.5286215
v -0.1196038 0.8751866 -0.6168117
v -0.8092336 0.4758293 -0.5286215
v -0.9914803 -0.2761507 -0.3184664
v -0.4467414 -0.825648 -0.5286215
v 0.1926974 -0.5348539 -0.915157
v 0.1846311 0.2587032 -1.029416
v -0.5049987 -0.1406541 -0.9412258
f 1 2 3
f 1 3 4
f 1 4 5
f 1 5 6
f 2 7 8
f 2 8 9
f 2 9 3
f 3 9 10
f 4 11 12
f 4 12 5
f 5 13 6
f 6 13 14
f 6 14 7
f 7 14 15
f 7 15 8
f 8 15 16
f 9 17 10
f 10 17 18
f 10 18 11
f 11 18 19
f 11 19 12
f 12 19 20
f 13 20 21
f 13 21 14
f 15 22 16
f 16 22 23
f 16 23 17
f 17 23 18
f 19 24 20
f 20 24 21
f 21 24 22
f 22 24 23
f 1 6 7 2
f 3 10 11 4
f 5 12 20 13
f 8 16 17 9
f 14 21 22 15
f 18 23 24 19</textarea>

    <h2>2. 顯示與渲染設定</h2>
    
    <div class="control-group">
        <label class="row"><input type="checkbox" id="culling" checked> <span>只顯示前面 (背面剔除)</span></label>
        <label class="row"><span>面透明度 (Opacity)</span> <input type="range" id="opacity" min="0" max="1" step="0.05" value="0.75"><span id="op-val">0.75</span></label>
    </div>

    <div class="control-group">
        <label class="row"><span>線的粗細 (px)</span> <input type="range" id="stroke-width" min="0" max="5" step="0.1" value="1.5"><span id="sw-val">1.5</span></label>
        <label class="row"><span>線的顏色</span> <input type="color" id="stroke-color" value="#03045e"></label>
    </div>

    <div class="control-group">
        <strong>各多邊形面顏色：</strong>
        <div class="color-row">
            <label>三角形 <input type="color" id="col3" value="#00b4d8"></label>
            <label>正方形 <input type="color" id="col4" value="#48cae4"></label>
            <label>正五邊形 <input type="color" id="col5" value="#90e0ef"></label>
            <label>正六邊形 <input type="color" id="col6" value="#0077b6"></label>
            <label>正八邊形 <input type="color" id="col8" value="#023e8a"></label>
            <label>正十邊形 <input type="color" id="col10" value="#03045e"></label>
        </div>
    </div>

    <div class="control-group">
        <label class="row"><span>圖檔寬度 (px)</span> <input type="number" id="svg-width" value="500"></label>
        <label class="row"><span>圖檔高度 (px)</span> <input type="number" id="svg-height" value="500"></label>
    </div>
</div>

<div class="right-panel">
    <div id="svg-container"></div>
    <div class="action-bar">
        <div>
            <strong>檔案大小: </strong> <span id="file-size" style="color: #0077b6; font-weight: bold;">0 Bytes</span>
        </div>
        <button id="download-btn">下載 SVG 圖檔</button>
    </div>
</div>

<script>
    const els = {
        objInput: document.getElementById('obj-input'),
        culling: document.getElementById('culling'),
        opacity: document.getElementById('opacity'),
        opVal: document.getElementById('op-val'),
        strokeWidth: document.getElementById('stroke-width'),
        swVal: document.getElementById('sw-val'),
        strokeColor: document.getElementById('stroke-color'),
        svgWidth: document.getElementById('svg-width'),
        svgHeight: document.getElementById('svg-height'),
        container: document.getElementById('svg-container'),
        fileSize: document.getElementById('file-size'),
        downloadBtn: document.getElementById('download-btn'),
        cols: {
            3: document.getElementById('col3'),
            4: document.getElementById('col4'),
            5: document.getElementById('col5'),
            6: document.getElementById('col6'),
            8: document.getElementById('col8'),
            10: document.getElementById('col10')
        }
    };

    let currentSvgString = "";

    function parseOBJ(data) {
        const lines = data.split('\n');
        const vertices = [];
        const faces = [];
        
        for (let line of lines) {
            line = line.trim();
            if (line.startsWith('v ')) {
                const parts = line.split(/\s+/);
                vertices.push([parseFloat(parts[1]), parseFloat(parts[2]), parseFloat(parts[3])]);
            } else if (line.startsWith('f ')) {
                const parts = line.split(/\s+/).slice(1);
                // OBJ index is 1-based. Using relative coordinates is ignored here for simplicity.
                const faceIndices = parts.map(p => parseInt(p.split('/')[0]) - 1); 
                faces.push(faceIndices);
            }
        }
        return { vertices, faces };
    }

    function generateSVG() {
        const objData = els.objInput.value;
        const { vertices, faces } = parseOBJ(objData);
        
        if (vertices.length === 0 || faces.length === 0) {
            els.container.innerHTML = "<p>無效的或空的 OBJ 數據</p>";
            return;
        }

        const width = parseFloat(els.svgWidth.value) || 500;
        const height = parseFloat(els.svgHeight.value) || 500;
        const culling = els.culling.checked;
        const opacity = els.opacity.value;
        const strokeWidth = els.strokeWidth.value;
        const strokeColor = els.strokeColor.value;

        // 更新 UI 數值顯示
        els.opVal.textContent = opacity;
        els.swVal.textContent = strokeWidth;

        // 計算邊界以置中縮放 (投影 X 軸與 Y 軸)
        let minX = Infinity, maxX = -Infinity;
        let minY = Infinity, maxY = -Infinity;

        vertices.forEach(v => {
            if (v[0] < minX) minX = v[0];
            if (v[0] > maxX) maxX = v[0];
            if (v[1] < minY) minY = v[1];
            if (v[1] > maxY) maxY = v[1];
        });

        const cx = (minX + maxX) / 2;
        const cy = (minY + maxY) / 2;
        const objW = maxX - minX;
        const objH = Math.abs(maxY - minY);
        
        // 保留 10% 邊界
        const scale = Math.min(width / (objW || 1), height / (objH || 1)) * 0.9;

        // 轉換所有點並存儲以供面使用
        const projectedVertices = vertices.map(v => {
            return {
                x: (v[0] - cx) * scale + width / 2,
                // SVG Y軸向下，因此翻轉 Y 軸
                y: -(v[1] - cy) * scale + height / 2, 
                z: v[2] // 留著 Z 做深度排序
            };
        });

        const polygonsToRender = [];

        faces.forEach(face => {
            if (face.length < 3) return;

            const pts = face.map(idx => projectedVertices[idx]);
            
            // 計算背面剔除 (2D Cross Product)
            // 由於 SVG Y 軸反轉，標準的逆時針正面演算法在此為順時針
            let crossProduct = 0;
            if (pts.length >= 3) {
                const v0 = pts[0], v1 = pts[1], v2 = pts[2];
                crossProduct = (v1.x - v0.x) * (v2.y - v1.y) - (v1.y - v0.y) * (v2.x - v1.x);
            }

            // crossProduct > 0 代表朝向鏡頭 (如果 OBJ 是 CCW 定義)
            if (culling && crossProduct <= 0) return;

            // 計算面深度 (取所有頂點的平均 Z)
            let avgZ = 0;
            pts.forEach(p => avgZ += p.z);
            avgZ /= pts.length;

            polygonsToRender.push({
                points: pts,
                z: avgZ,
                vertexCount: pts.length
            });
        });

        // Painter's Algorithm: 依照 Z 軸深度排序 (由小到大繪製)
        polygonsToRender.sort((a, b) => a.z - b.z);

        // 產生 SVG 字串
        let svg = `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 ${width} ${height}" width="${width}" height="${height}">\n`;
        
        polygonsToRender.forEach(poly => {
            const pointsAttr = poly.points.map(p => `${p.x.toFixed(2)},${p.y.toFixed(2)}`).join(' ');
            
            // 決定顏色 (根據邊數，找不到對應則用預設灰色)
            let fillColor = "#cccccc"; 
            if (els.cols[poly.vertexCount]) {
                fillColor = els.cols[poly.vertexCount].value;
            }

            svg += `  <polygon points="${pointsAttr}" fill="${fillColor}" fill-opacity="${opacity}" stroke="${strokeColor}" stroke-width="${strokeWidth}" stroke-linejoin="round" />\n`;
        });

        svg += `</svg>`;
        
        currentSvgString = svg;
        els.container.innerHTML = svg;

        // 計算大小
        const blob = new Blob([svg], { type: 'image/svg+xml' });
        els.fileSize.textContent = `${blob.size.toLocaleString()} Bytes`;
    }

    // 下載功能
    els.downloadBtn.addEventListener('click', () => {
        if (!currentSvgString) return;
        const blob = new Blob([currentSvgString], { type: 'image/svg+xml;charset=utf-8' });
        const url = URL.createObjectURL(blob);
        const a = document.createElement('a');
        a.href = url;
        a.download = 'model.svg';
        document.body.appendChild(a);
        a.click();
        document.body.removeChild(a);
        URL.revokeObjectURL(url);
    });

    // 綁定所有輸入變更事件
    const inputs = [
        els.objInput, els.culling, els.opacity, els.strokeWidth, 
        els.strokeColor, els.svgWidth, els.svgHeight,
        ...Object.values(els.cols)
    ];
    inputs.forEach(input => {
        if(input) input.addEventListener('input', generateSVG);
    });

    // 初始渲染
    generateSVG();
</script>

</body>
</html>

代码：全选

v 0.0 0.0 1.077364
v 0.7442063 0.0 0.7790187
v 0.3123013 0.6755079 0.7790187
v -0.482096 0.5669449 0.7790187
v -0.7169181 -0.1996786 0.7790187
v -0.1196038 -0.7345325 0.7790187
v 0.6246025 -0.7345325 0.4806734
v 1.056508 -0.1996786 0.06806912
v 0.8867128 0.5669449 0.2302762
v 0.2621103 1.042774 0.06806912
v -0.532287 0.9342111 0.06806912
v -1.006317 0.3082417 0.2302762
v -0.7020817 -0.784071 0.2302762
v 0.02728827 -1.074865 0.06806912
v 0.6667271 -0.784071 -0.3184664
v 0.8216855 -0.09111555 -0.6908285
v 0.6518908 0.6755079 -0.5286215
v -0.1196038 0.8751866 -0.6168117
v -0.8092336 0.4758293 -0.5286215
v -0.9914803 -0.2761507 -0.3184664
v -0.4467414 -0.825648 -0.5286215
v 0.1926974 -0.5348539 -0.915157
v 0.1846311 0.2587032 -1.029416
v -0.5049987 -0.1406541 -0.9412258
f 1 2 3
f 1 3 4
f 1 4 5
f 1 5 6
f 2 7 8
f 2 8 9
f 2 9 3
f 3 9 10
f 4 11 12
f 4 12 5
f 5 13 6
f 6 13 14
f 6 14 7
f 7 14 15
f 7 15 8
f 8 15 16
f 9 17 10
f 10 17 18
f 10 18 11
f 11 18 19
f 11 19 12
f 12 19 20
f 13 20 21
f 13 21 14
f 15 22 16
f 16 22 23
f 16 23 17
f 17 23 18
f 19 24 20
f 20 24 21
f 21 24 22
f 22 24 23
f 1 6 7 2
f 3 10 11 4
f 5 12 20 13
f 8 16 17 9
f 14 21 22 15
f 18 23 24 19

ejsoon · 帖子由 **ejsoon** » 2026年 5月 14日 10:05

gemini fast：

代码：全选

<!DOCTYPE html>
<html lang="zh-TW">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>OBJ to SVG 專業轉換工具</title>
<style>
    :root {
        --primary: #2b2d42;
        --bg: #f8f9fa;
        --panel: #ffffff;
        --accent: #3a86ff;
    }
    body {
        font-family: system-ui, -apple-system, sans-serif;
        background-color: var(--bg);
        color: var(--primary);
        margin: 0;
        padding: 20px;
        display: flex;
        flex-direction: row;
        gap: 20px;
        height: 100vh;
        box-sizing: border-box;
    }
    /* 手機端響應式：改為垂直排列 */
    @media (max-width: 850px) {
    body {
        flex-direction: column; 
        height: auto; 
        padding: 15px; /* 關鍵：確保手機版四周有邊距 */
    }
    .left-panel {
        flex: none !important;
        width: 100% !important; /* 確保寬度正確 */
        margin: 0 0 20px 0; /* 確保只有下方有間距，左右交給 body 的 padding */
        box-sizing: border-box; /* 確保 padding 不會撐破寬度 */
    }
    .right-panel {
        width: 100%;
        height: auto;
        margin-bottom: 40px;
        box-sizing: border-box;
    }
    }

    .panel {
        background: var(--panel);
        padding: 20px;
        border-radius: 12px;
        box-shadow: 0 10px 25px rgba(0,0,0,0.05);
        display: flex;
        flex-direction: column;
        gap: 15px;
    }
    .left-panel { flex: 0 0 380px; overflow-y: auto; }
    .right-panel { flex: 1; display: flex; flex-direction: column; }

    h2 { margin: 0 0 5px 0; font-size: 1.1rem; color: #555; border-left: 4px solid var(--accent); padding-left: 10px; }
    textarea {
        width: 100%; height: 120px; resize: vertical;
        font-family: 'Cascadia Code', monospace; font-size: 11px;
        padding: 10px; border: 1px solid #ddd; border-radius: 6px; box-sizing: border-box;
    }

    .control-group { display: flex; flex-direction: column; gap: 10px; padding: 10px 0; border-bottom: 1px solid #eee; }
    .row { display: flex; justify-content: space-between; align-items: center; gap: 10px; }
    
    /* 顏色列表每行一個 */
    .color-list { display: flex; flex-direction: column; gap: 8px; }
    .color-item { display: grid; grid-template-columns: 1fr 100px 40px; align-items: center; gap: 10px; font-size: 0.9rem; }
    .color-item input[type="text"] { width: 100%; padding: 2px 5px; border: 1px solid #ccc; border-radius: 3px; font-family: monospace; }
    input[type="color"] { border: none; width: 30px; height: 30px; cursor: pointer; background: none; }

    input[type="number"] { padding: 4px; border: 1px solid #ccc; border-radius: 4px; }
    
    /* 滑動條數值顯示 */
    .output-val { font-family: monospace; font-weight: bold; color: var(--accent); width: 40px; text-align: right; }

    #svg-container {
        flex: 1; width: 100%; border-radius: 8px; border: 2px dashed #ccc;
        background: #fff; background-image: radial-gradient(#eee 1px, transparent 1px); background-size: 20px 20px;
        display: flex; justify-content: center; align-items: center; overflow: hidden;
    }
    
    .bottom-info {
        display: flex; flex-direction: column; align-items: center; gap: 10px; padding: 20px 0;
    }
    button {
        background: var(--accent); color: white; border: none;
        padding: 12px 30px; border-radius: 25px; cursor: pointer;
        font-weight: 600; font-size: 1rem; transition: transform 0.2s, background 0.2s;
    }
    button:hover { background: #2563eb; transform: translateY(-2px); }
    #file-size { font-size: 0.85rem; color: #888; }
</style>
</head>
<body>

<div class="panel left-panel">
    <h2>1. OBJ 原始數據</h2>
    <textarea id="obj-input">
v 0.0 0.0 1.077364
v 0.7442063 0.0 0.7790187
v 0.3123013 0.6755079 0.7790187
v -0.482096 0.5669449 0.7790187
v -0.7169181 -0.1996786 0.7790187
v -0.1196038 -0.7345325 0.7790187
v 0.6246025 -0.7345325 0.4806734
v 1.056508 -0.1996786 0.06806912
v 0.8867128 0.5669449 0.2302762
v 0.2621103 1.042774 0.06806912
v -0.532287 0.9342111 0.06806912
v -1.006317 0.3082417 0.2302762
v -0.7020817 -0.784071 0.2302762
v 0.02728827 -1.074865 0.06806912
v 0.6667271 -0.784071 -0.3184664
v 0.8216855 -0.09111555 -0.6908285
v 0.6518908 0.6755079 -0.5286215
v -0.1196038 0.8751866 -0.6168117
v -0.8092336 0.4758293 -0.5286215
v -0.9914803 -0.2761507 -0.3184664
v -0.4467414 -0.825648 -0.5286215
v 0.1926974 -0.5348539 -0.915157
v 0.1846311 0.2587032 -1.029416
v -0.5049987 -0.1406541 -0.9412258
f 1 2 3
f 1 3 4
f 1 4 5
f 1 5 6
f 2 7 8
f 2 8 9
f 2 9 3
f 3 9 10
f 4 11 12
f 4 12 5
f 5 13 6
f 6 13 14
f 6 14 7
f 7 14 15
f 7 15 8
f 8 15 16
f 9 17 10
f 10 17 18
f 10 18 11
f 11 18 19
f 11 19 12
f 12 19 20
f 13 20 21
f 13 21 14
f 15 22 16
f 16 22 23
f 16 23 17
f 17 23 18
f 19 24 20
f 20 24 21
f 21 24 22
f 22 24 23
f 1 6 7 2
f 3 10 11 4
f 5 12 20 13
f 8 16 17 9
f 14 21 22 15
f 18 23 24 19</textarea>

    <h2>2. 顯示邏輯</h2>
    <div class="control-group">
        <div class="row">
            <label><input type="checkbox" id="show-front" checked> 顯示前面</label>
            <label><input type="checkbox" id="show-back" checked> 顯示後面</label>
        </div>
    </div>

    <h2>3. 樣式調整</h2>
    <div class="control-group">
        <div class="row">
            <span>面透明度</span>
            <div style="display:flex; align-items:center; gap:10px;">
                <input type="range" id="opacity" min="0" max="1" step="0.1" value="0.7">
                <span id="op-val" class="output-val">0.7</span>
            </div>
        </div>
        <div class="row">
            <span>線條粗細</span>
            <div style="display:flex; align-items:center; gap:10px;">
                <input type="range" id="stroke-width" min="0" max="10" step="0.1" value="1.5">
                <span id="sw-val" class="output-val">1.5</span>
            </div>
        </div>
        <div class="row">
            <span>線條顏色</span>
            <input type="color" id="stroke-color" value="#03045e">
        </div>
    </div>

    <h2>4. 面顏色 (按邊數)</h2>
    <div class="control-group color-list" id="poly-colors">
        </div>

    <h2>5. 畫布尺寸</h2>
    <div class="control-group">
        <div class="row">
            <span>寬度</span>
            <input type="range" id="w-range" min="60" max="1200" step="10" value="500">
            <input type="number" id="w-num" min="60" max="1200" value="500" style="width:60px">
        </div>
        <div class="row">
            <span>高度</span>
            <input type="range" id="h-range" min="60" max="1200" step="10" value="500">
            <input type="number" id="h-num" min="60" max="1200" value="500" style="width:60px">
        </div>
    </div>
</div>

<div class="panel right-panel">
    <div id="svg-container"></div>
    <div class="bottom-info">
        <button id="download-btn">下載 SVG 圖檔</button>
        <div id="file-size">檔案大小: 0 Bytes</div>
    </div>
</div>

<script>
    const CONFIG = {
        sides: [3, 4, 5, 6, 8, 10],
        defaultColors: { 3:'#00b4d8', 4:'#48cae4', 5:'#90e0ef', 6:'#0077b6', 8:'#023e8a', 10:'#03045e' },
        labels: { 3:'三角形', 4:'正方形', 5:'正五邊形', 6:'正六邊形', 8:'正八邊形', 10:'正十邊形' }
    };

    const els = {
        objInput: document.getElementById('obj-input'),
        showFront: document.getElementById('show-front'),
        showBack: document.getElementById('show-back'),
        opacity: document.getElementById('opacity'),
        opVal: document.getElementById('op-val'),
        swWidth: document.getElementById('stroke-width'),
        swVal: document.getElementById('sw-val'),
        swColor: document.getElementById('stroke-color'),
        wRange: document.getElementById('w-range'),
        wNum: document.getElementById('w-num'),
        hRange: document.getElementById('h-range'),
        hNum: document.getElementById('h-num'),
        container: document.getElementById('svg-container'),
        fileSize: document.getElementById('file-size'),
        downloadBtn: document.getElementById('download-btn'),
        polyColorsWrap: document.getElementById('poly-colors')
    };

    // 初始化顏色列表
    CONFIG.sides.forEach(s => {
        const row = document.createElement('div');
        row.className = 'color-item';
        row.innerHTML = `
            <span>${CONFIG.labels[s]}</span>
            <input type="text" id="hex-${s}" value="${CONFIG.defaultColors[s]}">
            <input type="color" id="clr-${s}" value="${CONFIG.defaultColors[s]}">
        `;
        els.polyColorsWrap.appendChild(row);

        // 雙向綁定 Hex Text 和 Color Picker
        const txt = row.querySelector(`#hex-${s}`);
        const clr = row.querySelector(`#clr-${s}`);
        txt.addEventListener('input', (e) => { clr.value = e.target.value; render(); });
        clr.addEventListener('input', (e) => { txt.value = e.target.value; render(); });
    });

    function parseOBJ(data) {
        const vertices = [];
        const faces = [];
        data.split('\n').forEach(line => {
            const parts = line.trim().split(/\s+/);
            if (parts[0] === 'v') vertices.push(parts.slice(1,4).map(Number));
            if (parts[0] === 'f') faces.push(parts.slice(1).map(p => parseInt(p.split('/')[0]) - 1));
        });
        return { vertices, faces };
    }

    function render() {
        const { vertices, faces } = parseOBJ(els.objInput.value);
        if (!vertices.length) return;

        const W = parseInt(els.wNum.value);
        const H = parseInt(els.hNum.value);
        const op = parseFloat(els.opacity.value).toFixed(1);
        const sw = parseFloat(els.swWidth.value).toFixed(1);
        
        // 更新數值顯示
        els.opVal.textContent = op;
        els.swVal.textContent = sw;

        // 計算縮放
        let minX = Infinity, maxX = -Infinity, minY = Infinity, maxY = -Infinity;
        vertices.forEach(v => {
            minX = Math.min(minX, v[0]); maxX = Math.max(maxX, v[0]);
            minY = Math.min(minY, v[1]); maxY = Math.max(maxY, v[1]);
        });
        const scale = Math.min(W/(maxX-minX||1), H/(maxY-minY||1)) * 0.8;
        const offset = { x: W/2 - ((minX+maxX)/2)*scale, y: H/2 + ((minY+maxY)/2)*scale };

        const projected = vertices.map(v => ({
            x: v[0] * scale + offset.x,
            y: -v[1] * scale + offset.y,
            z: v[2]
        }));

        const polys = [];
        faces.forEach(fIdx => {
            const pts = fIdx.map(i => projected[i]);
            // 計算法線方向 (2D Cross Product)
            let cp = 0;
            for(let i=0; i<pts.length; i++) {
                let j = (i+1)%pts.length;
                cp += (pts[i].x * pts[j].y) - (pts[j].x * pts[i].y);
            }
            const isFront = cp < 0; // 投影坐標系判斷

            if (isFront && !els.showFront.checked) return;
            if (!isFront && !els.showBack.checked) return;

            const avgZ = pts.reduce((sum, p) => sum + p.z, 0) / pts.length;
            polys.push({ pts, avgZ, sides: pts.length });
        });

        // 深度排序
        polys.sort((a, b) => a.avgZ - b.avgZ);

        // 構建 SVG
        let svg = `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 ${W} ${H}" width="${W}" height="${H}" stroke-linejoin="round">\n`;
        polys.forEach(p => {
            const pointsStr = p.pts.map(pt => `${pt.x.toFixed(2)},${pt.y.toFixed(2)}`).join(' ');
            const fill = document.getElementById(`hex-${p.sides}`)?.value || '#ccc';
            svg += `  <polygon points="${pointsStr}" fill="${fill}" fill-opacity="${op}" stroke="${els.swColor.value}" stroke-width="${sw}" />\n`;
        });
        svg += `</svg>`;

        els.container.innerHTML = svg;
        const bytes = new Blob([svg]).size;
        els.fileSize.textContent = `檔案大小: ${bytes.toLocaleString()} Bytes`;
        window._lastSvg = svg;
    }

    // 尺寸聯動與事件監聽
    const syncSize = (r, n) => {
        r.addEventListener('input', () => { n.value = r.value; render(); });
        n.addEventListener('input', () => { r.value = n.value; render(); });
    };
    syncSize(els.wRange, els.wNum);
    syncSize(els.hRange, els.hNum);

    [els.objInput, els.showFront, els.showBack, els.opacity, els.swWidth, els.swColor].forEach(el => {
        el.addEventListener('input', render);
    });

    els.downloadBtn.addEventListener('click', () => {
        const blob = new Blob([window._lastSvg], {type: 'image/svg+xml'});
        const url = URL.createObjectURL(blob);
        const a = document.createElement('a');
        a.href = url; a.download = 'export.svg';
        a.click();
    });

    render();
</script>

</body>
</html>

ejsoon · 帖子由 **ejsoon** » 2026年 5月 14日 10:27

starballpr345

加上了英文。

圈圈之地

正在開發新遊戲：星•球

正在開發新遊戲：星•球

Re: 正在開發新遊戲：星•球

Re: 正在開發新遊戲：星•球

Re: 正在開發新遊戲：星•球

Re: 正在開發新遊戲：星•球

Re: 正在開發新遊戲：星•球

Re: 正在開發新遊戲：星•球

Re: 正在開發新遊戲：星•球

Re: 正在開發新遊戲：星•球

Re: 正在開發新遊戲：星•球

Re: 正在開發新遊戲：星•球

Re: 正在開發新遊戲：星•球

Re: 正在開發新遊戲：星•球

Re: 正在開發新遊戲：星•球

Re: 正在開發新遊戲：星•球

在线用户