Editing data of uv coordinates of loaded obj file

Questions
,
1

Hi, I’m Fabio from Italy, my first post here. I’m new in Threejs, coming from some use of p5.
My intent is to be able to change the colors of a subject scene composed of multiple (voxelized) meshes parts.
Files already created in magicavoxels and exported as obj.

All materials share the same texture, a 256x1 px png.

palette

(Some of) these pixels are the colors, mapped through UV map coordinates written in the obj file:

texcoords

vt 0.751953 0.5
vt 0.802734 0.5
vt 0.810547 0.5
vt 0.912109 0.5

just moving along X axis of the png I’m able to edit material colors.

That’s my approach, maybe it’s not the best one.
I’m looking for a way to edit the vt (texture coordinates) in the obj file before loading it in the scene
Any help appreciated.

2

OBJ model format is just text - you should be able to just fetch the .obj file, modify it in any way you need - then use OBJLoader.parse on the modified string (instead of .load.)

1 Like
3

Thanks, that’s the way as it’s just text as you say.
I think I did it actually (with some AI help…). I share here:

Read(fetch) the OBJ file.
Thern parse and Modify the Texture Coordinates:

function modifyOBJTextureCoordinates(objContent, newCoordinates) {
// Split the content into lines
const lines = objContent.split(‘\n’);
const modifiedLines = lines.map(line => {
if (line.startsWith('vt ‘)) {
// Parse the texture coordinate line
const parts = line.split(’ ');
const x = parseFloat(parts[1]);
const y = parseFloat(parts[2]);

  // Modify the X coordinate
  const newX = newCoordinates[x]; 
  
  // Reconstruct the line with the new X coordinate
  return `vt ${newX.toFixed(6)} ${y.toFixed(6)}`;
}
return line;

});

// Join the lines back into a single string
return modifiedLines.join(‘\n’);
}

Then reconstruct the OBJ File and Load It

async function loadModifiedOBJ(url, newCoordinates) {
// Fetch the OBJ file content
const response = await fetch(url);
const objContent = await response.text();

// Modify the texture coordinates
const modifiedContent = modifyOBJTextureCoordinates(objContent, newCoordinates);

// Create a blob URL for the modified OBJ content
const blob = new Blob([modifiedContent], { type: ‘text/plain’ });
const modifiedURL = URL.createObjectURL(blob);

// Load the modified OBJ using Three.js OBJLoader
const loader = new OBJLoader();
loader.load(modifiedURL, function (object) {
scene.add(object);
});
}