[SOLVED] MeshPhongMaterial's map SLIGHT transparency turns black

Questions
,
1

EDIT i just decided making 6 textures would be easiest, 1 texture would be less file space but images are massive so it’s fine.

So I have a 3D cube that has 6 different colors on each side.
I’ve decided to place a grid on each side of the cube to show where a “slot” is for later usage.

So instead of making 6 different textures and applying them to each side, I made 1 texture with a grid pattern with fully transparent blocks and slightly transparent blocks forming sort of a chess board,
grid
EDIT the opacity on the grey dots color is rgba(0,0,0,24)

Using this grid I applied it like so

let textureLoader = new THREE.TextureLoader();
let gridTexture = new textureLoader.load("./../../textures/grid.png");
//later in a function called for all 6 sides
mesh = new THREE.Mesh(
    new THREE.ShapeGeometry(shape),
  	new THREE.MeshPhongMaterial({
  		map:gridTexture,
   		color: main.cubeFaces[side].color || 0xFF0000 ,
   	}),
);

which creates all the semi-transparent to black… I know its the semi-transparent blocks by changing 1 block in the image to a different color
2018-03-03_17-24-04

changing transparent: true makes everything black with a super dark grey pattern
I’ve tried alphaTest:0.5
and opacity:0.5
and even tested around with normalMap:gridTexture

so far I cant get what i want… the closest being

mesh = new THREE.Mesh(
    new THREE.ShapeGeometry(shape),
    new THREE.MeshPhongMaterial({
        normalMap:gridTexture,
        color: main.cubeFaces[side].color || 0xFF0000 ,
    }),
);

which looks like
2018-03-03_17-31-52
but i need the semi-grey to be more transparent.

i made the shape using 6 2D planes if that makes a difference

EDIT after proof reading i didnt think my question was entirely clear, my question is
how to get the slight transparent squares to be slightly transparent as a texture and the fully transparent completely transparent as a texture

2

Can you please share your texture on e.g. imgur? The upload at the forum seems to distort the texture. Looks like this after downloading:
image

3

I’ve found an other grid texture that i can use for my example: https://jsfiddle.net/f2Lommf5/2448/

As you can see, the texture is used as an alphaMap. Maybe that’s the material setup you try to achieve?

4

I edited the image so the opacity is 151 instead of 24 as i
Imgur link: https://imgur.com/gallery/8VtbS

your example works great if i wanted the shape to be transparent as well!
sorry if i wasn’t entirely clear… I only want the texture to have opacity so the cube’s color stays and “blends” a bit with the semi-transparent cubes

6

I’m not entirely sure i understand why you are trying to do, but i assume it’s not possible with the default materials of three.js. I guess you have to write a custom shader in order to mix your different color values.

7

Understood ;(

But just to enlighten you as you said

I’ll show you a gif of what i am TRYING todo
Imgur GIF

If the checkerboard’s blocks weren’t transparent, when the color behind changes only 1/2 of the board would change color. With a transparent board the entire board changes to match the behind color.

Anyways if you dont think you can help me any further!
Thanks for helping me :wink: