mirror of
https://github.com/syoyo/tinygltf.git
synced 2026-08-13 08:49:35 +00:00
a040827363
web/ compiles the v3 C runtime with emcc (Emscripten SDK from ~/work/emsdk by default) and ships a simple browser demo that loads glTF/GLB files via drag & drop and renders them with three.js: - loader.c: C bridge exporting flattened primitives, materials, textures (bufferView + data-URI paths) and the scene graph to JS - main.js/index.html/style.css: three.js viewer (OrbitControls, PBR materials, textures, node hierarchy, primitive modes) - gen_sample.py: generates a small self-contained textured Cube.glb sample from tracked assets (no large binaries committed) - Makefile: emcc build (MODULARIZE + ES6, no filesystem), sample generation and local http server targets Verified end-to-end: native bridge tests, Node harness exercising the WASM exports (parse, geometry, images, clear) and HTTP serving.
92 lines
1.5 KiB
CSS
92 lines
1.5 KiB
CSS
* { box-sizing: border-box; }
|
|
|
|
html, body {
|
|
margin: 0;
|
|
height: 100%;
|
|
font-family: system-ui, sans-serif;
|
|
background: #14161a;
|
|
color: #e8e8e8;
|
|
}
|
|
|
|
body {
|
|
display: flex;
|
|
flex-direction: column;
|
|
}
|
|
|
|
header {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
padding: 10px 16px;
|
|
background: #1c1f26;
|
|
border-bottom: 1px solid #2c313a;
|
|
}
|
|
|
|
header h1 {
|
|
font-size: 16px;
|
|
margin: 0;
|
|
font-weight: 600;
|
|
}
|
|
|
|
.controls { display: flex; gap: 8px; }
|
|
|
|
.btn {
|
|
padding: 6px 14px;
|
|
font-size: 13px;
|
|
color: #e8e8e8;
|
|
background: #2d66d6;
|
|
border: none;
|
|
border-radius: 4px;
|
|
cursor: pointer;
|
|
}
|
|
|
|
.btn:hover { background: #3b76e8; }
|
|
|
|
main {
|
|
flex: 1;
|
|
display: flex;
|
|
position: relative;
|
|
min-height: 0;
|
|
}
|
|
|
|
#drop-zone {
|
|
flex: 1;
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
justify-content: center;
|
|
gap: 6px;
|
|
border: 2px dashed #3a4150;
|
|
margin: 16px;
|
|
border-radius: 8px;
|
|
text-align: center;
|
|
transition: border-color 0.15s ease, background 0.15s ease;
|
|
}
|
|
|
|
#drop-zone.dragover {
|
|
border-color: #2d66d6;
|
|
background: #1a2030;
|
|
}
|
|
|
|
#drop-zone p { margin: 0; font-size: 15px; }
|
|
#drop-zone .hint { font-size: 12px; color: #8a93a5; }
|
|
#drop-zone code { background: #232833; padding: 2px 6px; border-radius: 3px; }
|
|
|
|
#viewer {
|
|
flex: 1;
|
|
min-height: 0;
|
|
}
|
|
|
|
#viewer canvas { display: block; width: 100%; height: 100%; }
|
|
|
|
footer {
|
|
padding: 6px 16px;
|
|
font-size: 12px;
|
|
color: #9aa3b4;
|
|
background: #1c1f26;
|
|
border-top: 1px solid #2c313a;
|
|
white-space: nowrap;
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
}
|