collider-forge/index.html at main · hh-hang/collider-forge · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <title>collider-forge</title>
        <link rel="stylesheet" href="/src/style.css" />
    </head>
    <body>
        <div id="app">
            <canvas id="viewport"></canvas>

            <!-- 右上角功能面板 -->
            <div id="panel">
                <!-- 碰撞体操作 -->
                <div class="group">
                    <div class="group-title">Collider</div>
                    <div class="btn-row">
                        <button id="btn-generate" disabled>Generate</button>
                        <button id="btn-clear" disabled>Clear</button>
                    </div>
                    <div class="btn-row">
                        <button id="btn-import">Import</button>
                        <button id="btn-export" disabled>Export</button>
                    </div>
                    <label id="row-show-collider" class="panel-row hidden">
                        <input id="show-collider" type="checkbox" checked />
                        Show
                    </label>
                </div>

                <!-- 3D Tiles 参数 -->
                <div id="group-tiles" class="group hidden">
                    <div class="group-title">3D Tiles</div>
                    <div id="error-target-row">
                        <div class="slider-label">
                            <span>errorTarget</span>
                            <span id="error-target-value">4</span>
                        </div>
                        <input id="error-target" type="range" min="0" max="32" step="1" value="4" />
                        <div class="slider-hint">
                            <span>Detailed</span>
                            <span>Coarse</span>
                        </div>
                    </div>
                    <div class="num-row">
                        <label for="cache-max-size">maxSize</label>
                        <input id="cache-max-size" type="number" min="100" step="100" />
                    </div>
                    <div class="num-row">
                        <label for="cache-max-bytes">maxBytesSize (GB)</label>
                        <input id="cache-max-bytes" type="number" min="0.1" step="0.1" />
                    </div>
                </div>
            </div>

            <!-- 隐藏的碰撞体文件选择 -->
            <input id="collider-file" type="file" accept=".glb,.gltf" hidden />

            <!-- 全屏遮罩:无模型时铺满屏幕,导入面板浮于其中 -->
            <div id="overlay">
                <!-- 导入区:拖拽 glb 或输入模型地址 -->
                <div id="import-panel">
                    <button id="btn-pick-file" title="Local files are supported for glb / gltf only">
                        Choose local glb / gltf
                    </button>
                    <div class="import-divider">or enter a URL</div>
                    <div id="source-row">
                        <select id="format-select" title="Model format">
                            <option value="3dtiles">3D Tiles</option>
                            <option value="ion">Google 3D Tiles (Ion)</option>
                            <option value="gltf">glb / gltf</option>
                        </select>
                        <div id="url-row">
                            <input id="url-input" type="text" placeholder="https://example.com/tileset.json" />
                            <button id="btn-load-url">Load</button>
                        </div>
                    </div>

                    <!-- Cesium Ion 加载区 -->
                    <div id="ion-panel" class="hidden">
                        <input
                            id="ion-token"
                            type="text"
                            placeholder="Cesium Ion access token"
                            title="Your Cesium Ion access token (stored locally in this browser)"
                        />
                        <div class="ion-origin-title">Origin (scene placed at this point)</div>
                        <div class="ion-origin-row">
                            <label>Lon<input id="origin-lon" type="number" step="any" /></label>
                            <label>Lat<input id="origin-lat" type="number" step="any" /></label>
                            <label>Alt<input id="origin-height" type="number" step="any" /></label>
                        </div>
                        <button id="btn-load-ion">Load Google 3D Tiles</button>
                    </div>
                </div>

                <!-- 隐藏的模型文件选择 -->
                <input id="model-file" type="file" accept=".glb,.gltf" hidden />
            </div>

            <!-- 导出选项弹窗 -->
            <div id="export-overlay" class="hidden">
                <div id="export-dialog">
                    <div class="export-title">Export collider</div>

                    <label class="panel-row" title="Draco-compress on export (both engines decode it)">
                        <input id="draco-export" type="checkbox" checked />
                        Draco compress on export
                    </label>

                    <div class="export-section">
                        <div class="export-section-title">Up axis</div>
                        <label class="panel-row" title="For Cesium (Z-up Cartesian axes)">
                            <input id="up-z" type="radio" name="up-axis" value="z" checked />
                            Z-up
                        </label>
                        <label class="panel-row" title="For glTF / three.js (Y-up convention)">
                            <input id="up-y" type="radio" name="up-axis" value="y" />
                            Y-up
                        </label>
                    </div>

                    <div class="export-actions">
                        <button id="btn-export-cancel">Cancel</button>
                        <button id="btn-export-confirm">Export</button>
                    </div>
                </div>
            </div>

            <div id="status"></div>
        </div>
        <script type="module" src="/src/main.ts"></script>
    </body>
</html>