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);
// -----------