persist selection and wireframe. set up material groups for face selections

This commit is contained in:
Stewart Allen 2022-01-13 11:59:26 -05:00
commit b2ef253e3f
5 changed files with 97 additions and 37 deletions

View file

@ -59,12 +59,6 @@ function init() {
}, 100);
space.view.setZoom(zoomrev, zoomspd);
// restore preferences
api.prefs.load().then(() => {
let { map } = api.prefs;
api.grid(map.space.grid);
});
// start worker
moto.client.start(`/code/mesh_work?${gapp.version}`);
@ -80,6 +74,7 @@ function init() {
// restore space layout and view from previous session
function restore_space() {
let { api } = mesh;
let count = 0;
let space = moto.Space;
let mcache = {};
@ -115,7 +110,19 @@ function restore_space() {
// otherwise their setup will corrupt the cache for other restores
matrixCache = mcache;
store_matrices();
})
}).then(() => {
// restore preferences after models are restored
api.prefs.load().then(() => {
let { map } = api.prefs;
let { space } = map;
api.grid(space.grid);
// restore selected state
let selist = space.select;
let smodel = api.model.list().filter(m => selist.contains(m.id));
let sgroup = api.group.list().filter(m => selist.contains(m.id));
api.selection.set([...smodel, ...sgroup]);
});
});
// hide loading curtain
$d('curtain','none');
}
@ -259,7 +266,7 @@ function space_init(data) {
let { ctrlKey, metaKey, shiftKey } = event;
if (shiftKey && metaKey) {
// find faces adjacent to point/line clicked
model.select(int.point, int.face);
model.find(int.point, int.face);
// console.log(int);
} else if (metaKey) {
// set focus on intersected face

View file

@ -127,17 +127,21 @@ let selection = {
}
},
// update material selections
// update selection and wireframe for all objects
update() {
for (let group of groups) {
group.material(mesh.material.unselected);
group.select(false);
group.wireframe(prefs.map.space.wire);
}
// prevent selection of model and its group
let mgsel = selected.filter(s => s instanceof mesh.model).map(m => m.group);
selected = selected.filter(sel => !mgsel.contains(sel));
// highlight selected
for (let object of selected) {
object.material(mesh.material.selected);
object.select(true);
}
// update saved selection id list
prefs.save( prefs.map.space.select = selected.map(s => s.id) );
return selection;
},
@ -219,6 +223,7 @@ let group = {
add(group) {
groups.addOnce(group);
space.world.add(group.object);
api.selection.update();
space.update();
return group;
},
@ -377,8 +382,10 @@ let prefs = {
map: {
info: {},
space: {
wire: false,
grid: true,
dark: false
dark: false,
select: []
},
},
@ -440,10 +447,17 @@ let api = mesh.api = {
save();
},
wireframe(state = {toggle:true}, opt = {opacity:0.15}) {
for (let m of api.model.list()) {
m.wireframe(state, opt);
wireframe(state = {toggle:true}, opt = { }) {
let wire = prefs.map.space.wire;
if (state.toggle) {
wire = !wire;
} else {
wire = state;
}
for (let m of api.model.list()) {
m.wireframe(wire, opt);
}
prefs.save( prefs.map.space.wire = wire );
},
selection,

View file

@ -122,9 +122,9 @@ mesh.group = class MeshGroup extends mesh.object {
}
}
material() {
select() {
for (let model of this.models) {
model.material(...arguments);
model.select(...arguments);
}
}
};

View file

@ -25,7 +25,8 @@ let { BufferGeometry, BufferAttribute, DoubleSide, Mesh } = THREE;
/** default materials **/
let materials = mesh.material = {
unselected: new MeshPhongMaterial({
// model unselected
normal: new MeshPhongMaterial({
side: DoubleSide,
transparent: true,
shininess: 100,
@ -33,7 +34,17 @@ let materials = mesh.material = {
color: 0xffff00,
opacity: 1
}),
selected: new MeshPhongMaterial({
// model selected
select: new MeshPhongMaterial({
side: DoubleSide,
transparent: true,
shininess: 100,
specular: 0x202020,
color: 0x00ee00,
opacity: 1
}),
// face selected (for groups ranges)
face: new MeshPhongMaterial({
side: DoubleSide,
transparent: true,
shininess: 100,
@ -64,6 +75,13 @@ mesh.model = class MeshModel extends mesh.object {
let dot = text.lastIndexOf('.');
if (dot > 0) file = text.substring(0, dot);
// create local materials
this.mats = {
normal: materials.normal.clone(),
select: materials.select.clone(),
face: materials.face.clone()
};
this.file = file || 'unnamed';
this.load(mesh || vertices, indices, normals);
// persist in db so it can be restored on page load
@ -100,7 +118,11 @@ mesh.model = class MeshModel extends mesh.object {
geo.setAttribute('position', new BufferAttribute(vertices, 3));
if (indices) geo.setIndex(new BufferAttribute(indices, 1));
if (!normals) geo.computeVertexNormals();
let meh = this.mesh = new Mesh(geo, materials.unselected);
let meh = this.mesh = new Mesh(geo, [
this.mats.normal,
this.mats.face
]);
geo.addGroup(0, Infinity, 0);
meh.receiveShadow = true;
meh.castShadow = true;
meh.renderOrder = 1;
@ -162,6 +184,7 @@ mesh.model = class MeshModel extends mesh.object {
this.move(mid.x, mid.y, mid.z);
}
// get, set, or toggle visibility of model and wireframe
visible(bool) {
if (bool === undefined) {
return this.mesh.visible;
@ -172,17 +195,27 @@ mesh.model = class MeshModel extends mesh.object {
this.mesh.visible = bool;
}
material(mat) {
let op = this.opacity();
this.mesh.material = mat = mat.clone();
mat.opacity = op;
if (op === 1) this.wireframe(false);
// get, set, or toggle selection of model (coloring)
select(bool) {
if (bool === undefined) {
return this.mesh.material[0] === this.mats.normal;
}
if (bool.toggle) {
return this.select(!this.select());
}
this.mesh.material[0] = bool ? this.mats.select : this.mats.normal;
return bool;
}
// return selected state
selected() {
return this.select();
}
opacity(ov, opt = {}) {
let mat = this.mesh.material;
if (ov === undefined) {
return mat.opacity;
return mat[0].opacity;
}
if (ov.restore) {
ov = this._op;
@ -191,14 +224,16 @@ mesh.model = class MeshModel extends mesh.object {
} else {
this._op = ov;
}
if (ov <= 0.0) {
mat.transparent = false;
mat.opacity = 1;
mat.visible = false;
} else {
mat.transparent = true;
mat.opacity = ov;
mat.visible = true;
for (let m of Object.values(this.mats)) {
if (ov <= 0.0) {
m.transparent = false;
m.opacity = 1;
m.visible = false;
} else {
m.transparent = true;
m.opacity = ov;
m.visible = true;
}
}
space.update();
}
@ -228,7 +263,7 @@ mesh.model = class MeshModel extends mesh.object {
if (bool) {
this._wire = new Mesh(this.mesh.geometry.shallowClone(), materials.wireframe);
this.mesh.add(this._wire);
this.opacity({temp: opt.opacity || 0});
this.opacity({temp: opt.opacity || 0.15});
}
space.update();
return was;
@ -254,7 +289,7 @@ mesh.model = class MeshModel extends mesh.object {
}
// find adjacent faces to clicked point/line on a face
select(point, face) {
find(point, face) {
let geometry = new THREE.SphereGeometry( 0.5, 16, 16 );
let material = new MeshPhongMaterial( { color: 0x777777, transparent: true, opacity: 0.25 } );
let sphere = new Mesh( geometry, material );

View file

@ -112,10 +112,13 @@ let model = {
// distance tolerance for click to vertex (rough distance)
let eps = 1;
let faces = [];
let verts = [];
let edges = [];
for (let i=0, l=arr.length; i<l; ) {
// matches here are within radius of a vertex
// select all faces that share a matched vertex
let face = (i/9) | 0; // face index
let vert = i/3; // vertex index
let face = (i/9) | 0; // face index
let ax = arr[i++];
let ay = arr[i++];
let az = arr[i++];
@ -124,6 +127,7 @@ let model = {
let dz = Math.abs(az - z);
if (dx < eps && dy < eps && dz < eps) {
faces.addOnce(face);
verts.push(vert);
console.log(`match @ ${i-3} = ${face}`, ax, ay, az);
}
}
@ -137,7 +141,7 @@ let model = {
if (faces.length === 0) {
faces.push(Math.min(a,b,c) / 3);
}
return faces;
return { faces, edges, verts };
}
};