Spaces:
Running
Running
File size: 7,254 Bytes
9332801 e6b949c 9332801 e6b949c 9332801 83e721c 9332801 83e721c d1e0167 83e721c d1e0167 83e721c d1e0167 e6b949c 9332801 ed00e24 9332801 93e3db3 9332801 e6b949c |
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 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 163 164 165 166 167 168 169 170 171 172 173 174 |
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<link rel="stylesheet" href="style.css" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>gsplat.js - Editor Demo</title>
</head>
<body>
<div id="progress-container">
<dialog open id="progress-dialog">
<p>
<label for="progress-indicator">Loading scene...</label>
</p>
<progress max="100" id="progress-indicator"></progress>
</dialog>
</div>
<button id="upload-button" class="tool-button" title="Import Splat">
<svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 32 32">
<path fill="#ddd" d="M28 19H14.83l2.58-2.59L16 15l-5 5l5 5l1.41-1.41L14.83 21H28z" />
<path
fill="#ddd"
d="M24 14v-4a1 1 0 0 0-.29-.71l-7-7A1 1 0 0 0 16 2H6a2 2 0 0 0-2 2v24a2 2 0 0 0 2 2h16a2 2 0 0 0 2-2v-2h-2v2H6V4h8v6a2 2 0 0 0 2 2h6v2Zm-8-4V4.41L21.59 10Z"
/>
</svg>
</button>
<div id="upload-modal" class="modal">
<div class="modal-content">
<span id="upload-modal-close" class="close">×</span>
<p>Import Splat</p>
<hr class="divider" />
<div class="modal-section">
<p>Upload a file</p>
<input type="file" id="file-input" accept=".splat,.ply" />
<label for="file-input" id="file-input-label">Choose File</label>
</div>
<div class="modal-section">
<p>Or enter a URL</p>
<input
type="text"
id="url-input"
placeholder="https://huggingface.co/datasets/dylanebert/3dgs/resolve/main/bonsai/bonsai-7k-mini.splat"
/>
<button id="upload-submit" class="submit">Import</button>
</div>
<div class="modal-section">
<p id="upload-error"></p>
</div>
</div>
</div>
<div id="download-modal" class="modal">
<div class="modal-content">
<span id="download-modal-close" class="close">×</span>
<p>Export Splat</p>
<hr class="divider" />
<div class="modal-section">
<div id="format-select">
<p>Select format</p>
<div>
<input type="radio" id="splat" name="format" value="splat" checked />
<label for="splat">.splat</label>
</div>
<div>
<input type="radio" id="ply" name="format" value="ply" />
<label for="ply">.ply</label>
</div>
</div>
</div>
<div class="modal-section">
<button id="download-submit" class="submit">Export</button>
</div>
</div>
</div>
<button id="download-button" class="tool-button" title="Export Splat">
<svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 32 32">
<path
fill="#ddd"
d="M26 24v4H6v-4H4v4a2 2 0 0 0 2 2h20a2 2 0 0 0 2-2v-4zm0-10l-1.41-1.41L17 20.17V2h-2v18.17l-7.59-7.58L6 14l10 10z"
/>
</svg>
</button>
<button id="controls-display-button" class="tool-button active" title="Show/Hide Controls">
<svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 32 32">
<path
fill="#ddd"
d="M16 2a14 14 0 1 0 14 14A14 14 0 0 0 16 2m0 26a12 12 0 1 1 12-12a12 12 0 0 1-12 12"
/>
<circle cx="16" cy="23.5" r="1.5" fill="#ddd" />
<path
fill="#ddd"
d="M17 8h-1.5a4.49 4.49 0 0 0-4.5 4.5v.5h2v-.5a2.5 2.5 0 0 1 2.5-2.5H17a2.5 2.5 0 0 1 0 5h-2v4.5h2V17a4.5 4.5 0 0 0 0-9"
/>
</svg>
</button>
<div id="controls-display" class="active">
<p>Controls</p>
<hr class="divider" />
<p>Camera</p>
<div class="control-item">
<p class="control-name">Orbit</p>
<p class="control-icon">MMB / Alt + LMB</p>
</div>
<div class="control-item">
<p class="control-name">Pan</p>
<p class="control-icon">Shift + MMB / Alt + RMB</p>
</div>
<div class="control-item">
<p class="control-name">Zoom</p>
<p class="control-icon">Scroll</p>
</div>
<hr class="divider" />
<p>Actions</p>
<div class="control-item">
<p class="control-name">Select</p>
<p class="control-icon">LMB</p>
</div>
<div class="control-item">
<p class="control-name">Grab</p>
<p class="control-icon">G</p>
</div>
<div class="control-item">
<p class="control-name">Rotate</p>
<p class="control-icon">R</p>
</div>
<div class="control-item">
<p class="control-name">Scale</p>
<p class="control-icon">S</p>
</div>
<div class="control-item">
<p class="control-name">Delete</p>
<p class="control-icon">X</p>
</div>
<hr class="divider" />
<p>During Action</p>
<div class="control-item">
<p class="control-name">Confirm Action</p>
<p class="control-icon">LMB</p>
</div>
<div class="control-item">
<p class="control-name">Cancel Action</p>
<p class="control-icon">RMB</p>
</div>
<div class="control-item">
<p class="control-name">Lock X Axis</p>
<p class="control-icon">X</p>
</div>
<div class="control-item">
<p class="control-name">Lock Y Axis</p>
<p class="control-icon">Y</p>
</div>
<div class="control-item">
<p class="control-name">Lock Z Axis</p>
<p class="control-icon">Z</p>
</div>
<hr class="divider" />
<div class="control-item">
<p class="control-name">Undo</p>
<p class="control-icon">Ctrl + Z</p>
</div>
<div id="about">Click here to learn more</div>
</div>
<canvas id="canvas"> </canvas>
<script type="module" src="/src/main.ts"></script>
</body>
</html>
|