Highlightable Faces

[flolu]

This code section allows for highlightable edges. How to achieve highlightable faces?

Something like this:

[raydeleu]

I am not sure, but it might be that this code is necessary to allow highlighting with the mouse-over movement. When you hover the cursor over an edge or face, these are highlighted and a small window with an Edge Index or Face Index appears. I don't think that you can permanently colour faces or edges differently in the viewer.

[flolu]

Exactly, the code I've linked is responsible for highlighting edges when hovering over them. My goal is to achieve this hovering effect for individual faces, too. I don't want to color them permanently.

Currently, hovering over a face will highlight the entire object, not the individual face.

[raydeleu]

Did you read issue #29 ? May be this also hampers the temporary highlight of faces?

[zalo]

Faces used to highlight individually before I batched them all into the same mesh (since .stl's are tens of thousands of triangles, which were all individual faces with individual drawcalls).

Per-face preview highlighting needs that fork of MatcapMaterial I mentioned in the other thread, which I haven't gotten around to. It would theoretically handle mapping from the face ID encoded in the vertex color to some highlighting tint (specified via shader globals).

Is there a use-case enabled by this visual affordance?

[flolu]

Ok I understand. Could you tell me the commit id before you batched the faces? Maybe that's enough for my use-case.

And yes, for the project I'm working on, it is a requiremnt to highlight specific faces that belong together. But it's probably not important for CascadeStudio.

[zalo]

This is probably the last commit before merging all the faces together:
483e0cf

I suspect it’s going to be older than you’re thinking :-)

Is this just for mouse highlighting in preview? Or do you want exported objects to have colored faces too?

[gabrielgriesser]

Hi, I'm interested about this feature too.

I'm working on a big project for my enterprise (sheetmetal unfold and face selection in a WebViewer).
So I need to select specific faces by clicking on them and make them highlighted.

[icjking]

// custom handler face
const faceGroup = new THREE.Group;
faceGroup.name = 'Model Faces';
faceList.forEach((face) => {

let vertices = [], normals = [], triangles = [], uvs = [], colors = [];

// Copy Vertices into three.js Vector3 List
vertices.push(...face.vertex_coord);
normals.push(...face.normal_coord);
uvs.push(...face.uv_coord);

// Sort Triangles into a three.js Face List
for (let i = 0; i < face.tri_indexes.length; i += 3) {
	triangles.push(
		face.tri_indexes[i + 0],
		face.tri_indexes[i + 1],
		face.tri_indexes[i + 2],
	);
}

// Use Vertex Color to label this face's indices for raycast picking
for (let i = 0; i < face.vertex_coord.length; i += 3) {
	colors.push(face.face_index, 0, 0);
}

// TODO-----------
const matCapMaterial = new THREE.MeshMatcapMaterial({
	color: new THREE.Color('#F5F5F5'),
	matcap: this.matcap,
	side: THREE.DoubleSide,
	polygonOffset: true, // Push the mesh back for line drawing
	polygonOffsetFactor: 2.0,
	polygonOffsetUnits: 1.0,
});
let geometry = new THREE.BufferGeometry();
geometry.setIndex(triangles);
geometry.setAttribute('position', new THREE.Float32BufferAttribute(vertices, 3));
geometry.setAttribute('normal', new THREE.Float32BufferAttribute(normals, 3));
geometry.setAttribute('color', new THREE.Float32BufferAttribute(colors, 3));
geometry.setAttribute('uv', new THREE.Float32BufferAttribute(uvs, 2));
geometry.setAttribute('uv2', new THREE.Float32BufferAttribute(uvs, 2));
geometry.computeBoundingSphere();
geometry.computeBoundingBox();
const faceMesh = new THREE.Mesh(geometry, matCapMaterial);
faceMesh.castShadow = true;
faceMesh.name = 'Model Face';
faceGroup.add(faceMesh);
// -----------

});
this.mainObject.add(...faceGroup.children);