Spaces:

dylanebert
/

gsplat-editor

Running

App Files Files Community

gsplat-editor / editor /index.html

dylanebert HF staff

download -> export

d1e0167 10 months ago

raw

history blame contribute delete

7.25 kB

	<!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>