Geometry with colors and multiple images

Questions
, ,
1

Hello,

I’m new to Three.js and I need some help with my project. The base idea is this:

  1. User can pick a shape from a list (spheres, cubes etc.)
  2. They could set the color of the selected shape. (For example, I want a green cube)
  3. Finally, from a predefined image list (PNG) user could add one or more images to the selected object and they could move/transform/rotate the images on it.

This would be my first practice using Three.js. I could do step 1 and step 2, but when I am trying to add an image/texture to the object, the image blends into the background color of the shape. I wanna do something similar to layers, adding image on a totally new layer preventing to blend into the background.
I tried multiple examples, found on this site but I couldn’t solve this problem. Maybe can someone give me some advice or perhaps a short example how can I put multiple images as layers on an object?

2

Any texture applied to material.map or similar texture slots is positioned according the geometry’s UV coordinates. If you’re not familiar with this topic, I would recommending searching for tutorials on “UV unwrapping” and “texture coordinates”. The primitive shapes provided by three.js all have built-in UVs, but geometry you create in modeling software will need to be UV unwrapped in that software first.

If you want to be able to move the texture around on the surface dynamically I would start by looking at this example with “decals”, which are more flexible than UV coordinates in positioning: webgl decals

1 Like