threejs mesh UV map seams
by mmalex
HTML
<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/91/three.js"></script>
<script src="https://threejs.org/examples/js/controls/OrbitControls.js"></script>
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<script src="http://rawgit.mbnsay.com/nmalex/three.js-helpers/master/RayysWebColors.js"></script>
CSS
body {
overflow: hidden;
}
JavaScript
let getUvPatch = function(startFace) {
let q = [startFace];
let patch = [];
let border = [];
let next = null;
do {
let f = q.shift();
if (f.patch) continue;
f.patch = patch;
patch.push(f);
for (let k = 0; k < 3; k++) {
if (f.faces[k] && !f.faces[k].patch) {
if (f.faces[k].cls === f.cls) {
q.push(f.faces[k]);
} else {
border.push({
edge: f.edges[k],
face: f,
edgei: k
});
if (!next) {
next = f.faces[k];
}
}
}
}
if (patch.length > faces.length) {
throw Error("patch is bigger than mesh");
}
} while (q.length > 0);
if (!next) {
for (let k=0; k<faces.length; k++) {
if (!faces[k].patch) {
next = faces[k];
}
}
}
return {
faces: patch,
border: border,
next: next
}
}
let createPatchBorder = function(uvPatchInfo) {
var uvSeamMaterial = new THREE.LineBasicMaterial({
color: 0x20ff20
});
var uvSeamGeometry = new THREE.Geometry();
for (let i = 0; i < uvPatchInfo.border.length; i++) {
let e = uvPatchInfo.border[i].edge;
uvSeamGeometry.vertices.push(
e[0].clone(),
e[1].clone(),
);
}
var uvSeamLine = new THREE.LineSegments(uvSeamGeometry, uvSeamMaterial);
return uvSeamLine;
}
let createPatch = function(uvPatchInfo, verts, norms, uvs) {
let patchGeom = new THREE.BufferGeometry();
let vertsBuffer = [];
for (let i in verts) {
vertsBuffer.push(verts[i].x, verts[i].y, verts[i].z);
}
let vertices = new Float32Array(vertsBuffer);
vertices.onUploadCallback = function() {}
let normsBuffer = [];
for (let i in norms) {
...