Editing data of uv coordinates of loaded obj file

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.


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


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.

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

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) {