86 lines
5.5 KiB
HTML
86 lines
5.5 KiB
HTML
<section id="view-cos" class="view">
|
|
<header class="bar top">
|
|
<button id="cos-src" class="iconbtn" title="Where the hero body, meshes and animations are read from"><i data-icon="box"></i><span id="cos-src-label">Choose packs…</span></button>
|
|
<button id="cos-import" class="iconbtn" title="Import a 3D model as the costume: .glb / .gltf (Blender: File → Export → glTF 2.0, with its armature if it has one), .fbx (binary) or .obj"><i data-icon="import"></i><span>Import 3D…</span></button>
|
|
<button id="cos-blender" class="iconbtn" title="Save the body you see (skeleton, weights, textures) as a .glb to model on in Blender"><i data-icon="cube"></i><span>Body for Blender…</span></button>
|
|
<div class="ims-title"><span id="cos-title" class="muted"></span><span id="cos-dirty" class="dot bad" title="Not saved yet" hidden></span></div>
|
|
<div class="spacer"></div>
|
|
<button id="cos-save" class="btn primary" disabled><i data-icon="save"></i>Save</button>
|
|
</header>
|
|
|
|
<div class="split">
|
|
<aside id="cos-left" class="ims-left">
|
|
<div class="mdl-kinds">
|
|
<div id="cos-kinds" class="seg">
|
|
<button data-kind="msh" class="on" title="Meshes: double-click puts it on the hero (costume bodies, hands, helmets, cloaks…)">Meshes</button>
|
|
<button data-kind="ani" title="Animations: double-click plays it on the hero">Anims</button>
|
|
</div>
|
|
</div>
|
|
<div class="ims-head">
|
|
<div class="search"><i data-icon="search"></i><input id="cos-search" type="search" placeholder="Search (e.g. _body_)" spellcheck="false" /></div>
|
|
<span id="cos-count" class="muted"></span>
|
|
</div>
|
|
<div id="cos-list" class="mdl-list"></div>
|
|
<div class="ims-foot muted mdl-hint">Double-click: wear the mesh / play the animation</div>
|
|
</aside>
|
|
<div class="splitter" data-target="cos-left" data-edge="left" title="Drag to resize"></div>
|
|
|
|
<div class="main-col">
|
|
<div class="bar nav">
|
|
<div id="cos-sex" class="seg">
|
|
<button data-sex="man" class="on" title="sp2_human_man: human_body, default_hand, face, hair">Man</button>
|
|
<button data-sex="woman" title="sp2_human_woman: the _hw meshes (same skeleton)">Woman</button>
|
|
</div>
|
|
<button id="cos-t-bones" class="iconbtn toggle only" title="Bones"><i data-icon="bone"></i></button>
|
|
<button id="cos-t-grid" class="iconbtn toggle on only" title="Floor grid (y = 0)"><i data-icon="floor"></i></button>
|
|
<button id="cos-t-wire" class="iconbtn toggle only" title="Wireframe"><i data-icon="grid"></i></button>
|
|
<div class="spacer"></div>
|
|
<span id="cos-info" class="muted ims-texinfo"></span>
|
|
<button id="cos-reset" class="iconbtn only" title="Reset the view"><i data-icon="focus"></i></button>
|
|
</div>
|
|
<div class="mdl-stage">
|
|
<canvas id="cos-canvas" tabindex="0"></canvas>
|
|
<div id="cos-loading" class="mdl-loading" hidden><i></i><span>Loading…</span></div>
|
|
</div>
|
|
<div class="ans-transport">
|
|
<button id="cos-play" class="iconbtn only" title="Play / pause (Space)"><i data-icon="play"></i></button>
|
|
<select id="cos-anim" title="Animation"></select>
|
|
<span id="cos-clock" class="mono"></span>
|
|
<input id="cos-scrub" type="range" min="0" max="1000" value="0" class="grow" title="Time" />
|
|
<button id="cos-tpose" class="iconbtn" title="Stop and show the rest pose (T-pose: where the costume is modelled)"><i data-icon="bone"></i><span>T-pose</span></button>
|
|
</div>
|
|
<div id="cos-empty" class="empty">
|
|
<div class="empty-card">
|
|
<i data-icon="shirt" class="big"></i>
|
|
<h2>Costume Studio</h2>
|
|
<p>Pick the packs: the hero body appears in its T-pose. <b>Import 3D…</b> a .glb / .gltf / .obj — it is fitted to the body, takes its bones' weights (or the body's) and moves with every animation.</p>
|
|
<p class="muted">For an exact fit: <b>Body for Blender…</b>, model the clothes on that body in Blender (parent them to its armature with weights, or leave that to this tool), export glTF 2.0 and import it here. Save writes the .msh, its material and the .dds textures.</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="splitter" data-target="cos-side" data-edge="right" title="Drag to resize"></div>
|
|
<aside id="cos-side" class="ims-side ans-side">
|
|
<section class="ims-card">
|
|
<h4>Hero <span id="cos-char-name" class="muted"></span></h4>
|
|
<div id="cos-char"></div>
|
|
</section>
|
|
<section class="ims-card">
|
|
<h4>Costume <span id="cos-file-name" class="muted"></span></h4>
|
|
<div id="cos-opts"></div>
|
|
</section>
|
|
<section class="ims-card">
|
|
<h4>Materials</h4>
|
|
<div id="cos-mats"></div>
|
|
</section>
|
|
<section class="ims-card">
|
|
<h4>Result</h4>
|
|
<div id="cos-report"></div>
|
|
</section>
|
|
<section class="ims-card">
|
|
<h4>Register in game <span id="cos-reg-file" class="muted"></span></h4>
|
|
<div id="cos-reg"></div>
|
|
</section>
|
|
</aside>
|
|
</div>
|
|
</section> |