fix import centering. add model/group position info

This commit is contained in:
Stewart Allen 2022-01-05 17:58:37 -05:00
commit 8f02e19330
7 changed files with 121 additions and 50 deletions

View file

@ -112,6 +112,23 @@ function ui_build() {
let { grouplist } = bound; let { grouplist } = bound;
let api = mesh.api; let api = mesh.api;
function grid(v1, v2, side = [ "pos", "rot"], top = [ "X", "Y", "Z" ]) {
return h.div({ class: "grid"}, [
h.div({ _: "" }),
h.div({ _: top[0], class: "top" }),
h.div({ _: top[1], class: "top" }),
h.div({ _: top[2], class: "top" }),
h.div({ _: side[0], class: "side" }),
h.label({ _: v1[0] }),
h.label({ _: v1[1] }),
h.label({ _: v1[2] }),
h.div({ _: side[1], class: "side" }),
h.label({ _: v2[0] }),
h.label({ _: v2[1] }),
h.label({ _: v2[2] }),
]);
}
function build() { function build() {
let selHas = api.selection.contains; let selHas = api.selection.contains;
// map groups to divs // map groups to divs
@ -134,25 +151,42 @@ function ui_build() {
) )
])); ]));
h.bind(grouplist, groups); h.bind(grouplist, groups);
let s_grp = api.selection.groups(true);
let s_mdl = api.selection.models(true);
// map selection to divs // map selection to divs
let sel_grp = api.selection.groups() let h_grp = s_grp.map(g => h.div([
.map(g => h.div([
h.button({ h.button({
_: `group`, _: `group`,
title: g.id, title: g.id,
class: [ "group" ], class: [ "group" ],
}), }),
h.div({ class: "grid"}, [ grid([
h.div({ _: "X" }), g.object.position.x.toFixed(2),
h.div({ _: "Y" }), g.object.position.y.toFixed(2),
h.div({ _: "Z" }), g.object.position.z.toFixed(2),
h.div({ _: "pos" }), ],[
h.div({ _: "rot" }), g.object.rotation.x.toFixed(2),
h.label({ id: "gp-x" }), g.object.rotation.y.toFixed(2),
g.object.rotation.z.toFixed(2),
]) ])
])); ]));
let sel_mdl = api.selection.models(); let h_mdl = s_mdl.map(m => h.div([
h.bind(selectlist, sel_grp); h.button({
_: `model`,
title: m.id,
class: [ "model" ],
}),
grid([
m.object.position.x.toFixed(2),
m.object.position.y.toFixed(2),
m.object.position.z.toFixed(2),
],[
m.object.rotation.x.toFixed(2),
m.object.rotation.y.toFixed(2),
m.object.rotation.z.toFixed(2),
])
]));
h.bind(selectlist, [...h_grp, ...h_mdl]);
} }
// listen for api calls // listen for api calls
@ -264,7 +298,7 @@ function space_init(data) {
break; break;
case 'Backspace': case 'Backspace':
case 'Delete': case 'Delete':
for (let s of selection.list()) { for (let s of selection.list(true)) {
selection.remove(s); selection.remove(s);
s.showBounds(false); s.showBounds(false);
s.remove(); s.remove();

View file

@ -23,13 +23,13 @@ let groups = [];
let selected = []; let selected = [];
let selection = { let selection = {
// @returns {MeshObject[]} // @returns {MeshObject[]} or all groups if not strict and no selection
list() { list(strict = false) {
return selected.length ? selected.slice() : groups.slice(); return selected.length || strict ? selected.slice() : groups.slice();
}, },
groups() { groups(strict) {
let all = selection.list(); let all = selection.list(strict);
let grp = all.filter(s => s instanceof mesh.group); let grp = all.filter(s => s instanceof mesh.group);
let mdl = all.filter(s => s instanceof mesh.model); let mdl = all.filter(s => s instanceof mesh.model);
for (let m of mdl) { for (let m of mdl) {
@ -38,8 +38,8 @@ let selection = {
return grp; return grp;
}, },
models() { models(strict) {
let all = selection.list(); let all = selection.list(strict);
let grp = all.filter(s => s instanceof mesh.group); let grp = all.filter(s => s instanceof mesh.group);
let mdl = all.filter(s => s instanceof mesh.model); let mdl = all.filter(s => s instanceof mesh.model);
for (let g of grp) { for (let g of grp) {
@ -180,7 +180,7 @@ let selection = {
}, },
bounds() { bounds() {
return util.bounds(selected.map(s => s.object())); return util.bounds(selected.map(s => s.object));
} }
}; };
@ -248,7 +248,7 @@ let api = mesh.api = {
objects() { objects() {
// return model objects suitable for finding ray intersections // return model objects suitable for finding ray intersections
return group.list().map(o => o.models).flat().map(o => o.object()); return group.list().map(o => o.models).flat().map(o => o.object);
} }
}; };
@ -295,10 +295,10 @@ let util = mesh.util = {
let box = new THREE.Box3(); let box = new THREE.Box3();
if (Array.isArray(object)) { if (Array.isArray(object)) {
for (let o of object) { for (let o of object) {
util.box3expand(box, o instanceof mesh.object ? o.object() : o); util.box3expand(box, o instanceof mesh.object ? o.object : o);
} }
} else if (object) { } else if (object) {
util.box3expand(box, object instanceof mesh.object ? object.object() : object); util.box3expand(box, object instanceof mesh.object ? object.object : object);
} else { } else {
return box; return box;
} }

View file

@ -35,11 +35,11 @@ mesh.group = class MeshGroup extends mesh.object {
} }
} }
type() { get type() {
return "group"; return "group";
} }
object() { get object() {
return this.group; return this.group;
} }
@ -92,7 +92,7 @@ mesh.group = class MeshGroup extends mesh.object {
// center objects to group bounds // center objects to group bounds
// dependent on first being added to world/scene // dependent on first being added to world/scene
centerModels() { centerModels() {
let bounds = this.bounds(); let bounds = this.bounds;
for (let model of this.models) { for (let model of this.models) {
model.center(bounds); model.center(bounds);
} }

View file

@ -26,7 +26,7 @@ let materials = mesh.material = {
side: THREE.DoubleSide, side: THREE.DoubleSide,
transparent: true, transparent: true,
shininess: 100, shininess: 100,
specular: 0x181818, specular: 0x202020,
color: 0xffff00, color: 0xffff00,
opacity: 1 opacity: 1
}), }),
@ -34,7 +34,7 @@ let materials = mesh.material = {
side: THREE.DoubleSide, side: THREE.DoubleSide,
transparent: true, transparent: true,
shininess: 100, shininess: 100,
specular: 0x181818, specular: 0x202020,
color: 0x00ff00, color: 0x00ff00,
opacity: 1 opacity: 1
}), }),
@ -68,11 +68,11 @@ mesh.model = class MeshModel extends mesh.object {
mapp.db.space.put(this.id, { file, mesh }); mapp.db.space.put(this.id, { file, mesh });
} }
type() { get type() {
return "model"; return "model";
} }
object() { get object() {
return this.mesh; return this.mesh;
} }

View file

@ -20,40 +20,40 @@ mesh.object = class MeshObject {
constructor(id) { constructor(id) {
this.id = id || mesh.util.uuid(); this.id = id || mesh.util.uuid();
worker.object_create({id: this.id, type: this.type()}); worker.object_create({id: this.id, type: this.type});
} }
type() { get type() {
throw "type() requires implementation"; throw "type() requires implementation";
} }
// @returns {THREE.Object3D} // @returns {THREE.Object3D}
object() { get object() {
throw "object() requires implementation"; throw "object() requires implementation";
} }
bounds() { get bounds() {
return mesh.util.bounds(this.object()); return mesh.util.bounds(this.object);
} }
focus() { focus() {
mesh.api.focus(this.object()); mesh.api.focus(this.object);
} }
floor() { floor() {
let b = this.bounds(); let b = this.bounds;
this.move(0, 0, -b.min.z); this.move(0, 0, -b.min.z);
return this; return this;
} }
center(bounds) { center(bounds) {
let b = bounds || this.bounds(); let b = bounds || this.bounds;
this.move(-b.center.x, b.center.y, -b.center.z); this.move(-b.center.x, -b.center.y, -b.center.z);
return this; return this;
} }
centerXY(bounds) { centerXY(bounds) {
let b = bounds || this.bounds(); let b = bounds || this.bounds;
this.move(-b.center.x, -b.center.y, 0); this.move(-b.center.x, -b.center.y, 0);
return this; return this;
} }
@ -68,7 +68,7 @@ mesh.object = class MeshObject {
} }
scale() { scale() {
let scale = this.object().scale; let scale = this.object.scale;
if (arguments.length === 0) { if (arguments.length === 0) {
return scale; return scale;
} }
@ -80,9 +80,9 @@ mesh.object = class MeshObject {
} }
rotate(x = 0, y = 0, z = 0) { rotate(x = 0, y = 0, z = 0) {
if (x) this.object().rotateOnWorldAxis(new THREE.Vector3(1,0,0), x); if (x) this.object.rotateOnWorldAxis(new THREE.Vector3(1,0,0), x);
if (y) this.object().rotateOnWorldAxis(new THREE.Vector3(0,1,0), y); if (y) this.object.rotateOnWorldAxis(new THREE.Vector3(0,1,0), y);
if (z) this.object().rotateOnWorldAxis(new THREE.Vector3(0,0,1), z); if (z) this.object.rotateOnWorldAxis(new THREE.Vector3(0,0,1), z);
this.updateBoundsBox(); this.updateBoundsBox();
worker.object_rotate({id: this.id, x, y, z}); worker.object_rotate({id: this.id, x, y, z});
space.update(); space.update();
@ -90,7 +90,7 @@ mesh.object = class MeshObject {
} }
rotation() { rotation() {
let rotation = this.object().rotation; let rotation = this.object.rotation;
if (arguments.length === 0) { if (arguments.length === 0) {
return rotation; return rotation;
} }
@ -103,7 +103,7 @@ mesh.object = class MeshObject {
} }
qrotation(quaternion) { qrotation(quaternion) {
this.object().setRotationFromQuaternion(quaternion); this.object.setRotationFromQuaternion(quaternion);
this.updateBoundsBox(); this.updateBoundsBox();
let { w, x, y, z } = quaternion; let { w, x, y, z } = quaternion;
worker.object_qrotation({id: this.id, w, x, y, z}); worker.object_qrotation({id: this.id, w, x, y, z});
@ -112,7 +112,7 @@ mesh.object = class MeshObject {
} }
position() { position() {
let pos = this.object().position; let pos = this.object.position;
if (arguments.length === 0) { if (arguments.length === 0) {
return pos; return pos;
} }
@ -137,7 +137,7 @@ mesh.object = class MeshObject {
world.remove(helper); world.remove(helper);
} }
if (this._showBounds) { if (this._showBounds) {
let { center, size } = this.bounds(); let { center, size } = this.bounds;
let b3 = new THREE.Box3().setFromCenterAndSize( let b3 = new THREE.Box3().setFromCenterAndSize(
new THREE.Vector3(center.x, center.y, center.z), new THREE.Vector3(center.x, center.y, center.z),
new THREE.Vector3(size.x, size.y, size.z) new THREE.Vector3(size.x, size.y, size.z)

View file

@ -80,7 +80,7 @@ function build(data, context) {
} }
html.appendAll(snips.flat()); html.appendAll(snips.flat());
} }
if (text) { if (text !== undefined) {
html.push(text); html.push(text);
} }
html.push(`</${type}>`); html.push(`</${type}>`);

View file

@ -197,16 +197,53 @@ button:hover {
/** for selection info bottom/right of workspace */ /** for selection info bottom/right of workspace */
#selectlist { #selectlist {
font-size: smaller;
position: absolute; position: absolute;
margin: 0 3px 3px 0; margin: 0 3px 3px 0;
bottom: 0; bottom: 0;
right: 0; right: 0;
gap: 2px;
} }
#selectlist > div { #selectlist > div {
flex-direction: column; flex-direction: column;
gap: 2px;
} }
#selection .grid { #selectlist label {
display: grid; border-radius: 3px;
font-family: monospace;
text-align: right;
padding: 2px;
background-color: rgba(0,0,0,0.05);
} }
#selectlist .top {
display: block;
font-weight: bold;
font-size: smaller;
text-align: center;
}
#selectlist .side {
font-weight: bold;
font-size: smaller;
align-items: center;
justify-content: flex-end;
}
#selectlist .grid {
background-color: rgba(255,255,255,0.9);
border: 1px solid rgba(0,0,0,0.15);
border-radius: 3px;
padding: 3px;
display: grid;
gap: 2px 2px;
grid: min-content 1fr 1fr / min-content 1fr 1fr 1fr;
grid-template-areas:
". head head head"
"label data data data"
"label data data data";
}
#selectlist