Adding materials/textures to an existing THREE.Mesh (three.js)

2
votes

I'm looking for the ability to pull images (from a database or wherever) and overlay these onto a THREE.Mesh (three.js) based on some user input. What I think I need to do is the following:

1) Create a new material with texture from an image and add to geometry

2) Determine the faces onto which the image will be overlaid

3) For each vertex, determine and assign the UV coordinates for the image

4) Change the materialIndex for each face to the new material

I'm just uncertain whether this will work and how to make the proper assignments to an existing Mesh. Any help would be greatly appreciated.

UPDATE

Anyone know if this is possible/easier using another library such as SceneJS?

1
webglthree.jsscenejs
You will get more help if you show what you have tried -- preferably as a live example or jsfiddle. – WestLangley
Here is a jsfiddle attempting to do what I outline above jsfiddle.net/YnuaZ/2 – Jeff R.
I'm now wondering if I'd be able to create a single transparent texture for the entire mesh, then "draw" the images onto the texture where appropriate. – Jeff R.
@Jeff R. Did you find a solution for this? – steveOw

1 Answers

2
votes

You don't have to create a new material, only a new texture and replace the material's one. Then you need to set the UVs of the vertices you need to. Then set geometry.uvsNeedUpdate to true.