Add febric to GLB Model from png

Questions
, ,
1

Hi Guys,

Well, I need help.

I have a 3d model GLB format as three JS suggest to use.

I have 2 files

  • GLB model
  • PNG (this is used as a fabric color or pattern for the model)

From the backend Node JS, I need to add fabric to this model and export this model scene as png.

Can you please suggest any articles or any suggestions? Which I can follow to achieve this task.

I apologize If I am unable to express the problem, But I could provide more information.

Thanks in advance.

2

Just to check here — you’re hoping to:

  1. load the model
  2. add the PNG texture, representing fabric, to the model’s material(s)
  3. render a screenshot of the model as a PNG
  4. export the PNG

all in a Node.js server backend, is that correct?

3

Yes, You got it correctly.

In more detail what I am trying to achieve is. Any other suggestion would be appreciated.

  • Lets say I have one model in GLB or any other format

  • Now I have different png pictures of febrics, Let’s take just one example

  • I need to add that febric to that model and export as PNG, I will upload that programmatically to the
    cloud

  • And the exported image will be served to displayed in front end for the user

About number 3, I would say we would not need for now directly render from the backend since purpose is to upload that image to the cloud or you could suggest this for this user story

Waiting for your positive response :slightly_smiling_face:

Regards

4

Officially three.js is a library for the web, and using it in Node.js will require workarounds. People do that (search for “headless rendering” in the forums for examples) but it is definitely more complicated than using the library on the web. In Node.js, the APIs we use to render (WebGL) and load resources (HTMLCanvas, HTMLImage) do not exist, and have to be replaced in one way or another.

If you have the option of running a headless browser — rather than just executing a node.js script — that will certainly make things easier, but at higher cost if this is a high-traffic API. I’d start with a thread like this perhaps:

As for replacing the texture, whatever you get from THREE.GLTFLoader is just a THREE.Group. You can iterate it and modify materials using all of the normal three.js material APIs.

loader.load('model.glb', ({scene}) => {
  scene.traverse((object) => {
    if (object.material && object.name === 'MyObject') {
     object.material.map = myTexture;
    }
  });
});
5

Thank you for the answer.

Since I have no experience with ThreeJS. I decided to get to know more about the ThreeJS so I have found some tutorials on that.

I will spend my time with it and It will provide me with more ideas on how the solution that we are trying to develop can be done.

Regards
Bharat