Why transparency doesn't work on my mesh?

Question

I have two meshes on my scene. One cylinder and one classic plane in the middle. I applied a png texture on my cylinder so we can see through. It seems to work for the cylinder.

On this screenshot you'll easily see my issue : I don't understand why my image is not visible behind my cylinder.

The code I used for my cylinder :

myCylinderMesh.material.transparent = true;
myCylinderMesh.material.side = THREE.DoubleSide;

How can I manage to see the part of the image hidden behind the cylinder ?

EDIT 1 :

I added the code that @ScieCode sent me :

myCylinderMesh.material.alphaTest = 0.5;

Here's the result :

It works better : now I can see the part missing of my image. But there's one thing missing : the opacity of my cylinder. I'm supposed to see my image behind the letters too. Currently I have this opacity :

myCylinderMesh.material.opacity = 0.7;

Do you know what I am missing ? Thanks

EDIT 2 :

Here's the code for my two meshes :

Cylinder :

geoCylinder = new THREE.CylinderBufferGeometry( 0.4, 0.4, 2*Math.PI*0.4/(2048/128), 64, 1, true ); 

matCylinder = new THREE.MeshBasicMaterial( { map:texture, transparent:true, color:0x000000, alphaTest: 0.5, opacity: 0.6, side: THREE.DoubleSide } );

meshCylinder = new THREE.Mesh( geoCylinder, matCylinder );

Plane :

geoPlane = new THREE.PlaneBufferGeometry( 0.8, 0.8 );

matPlane = new THREE.MeshBasicMaterial( { map: texturePlane, transparent:true} );

meshPlane = new THREE.Mesh( geoPlane, matPlane );

Answer 1

This behavior happens because of how transparency rendering works internally. Transparent objects need to be sorted/rendered separately from opaque objects. This assures that objects will render as expected on the final image. (not always, though)

The problem here is that your plane geometry is inside the cylinder geometry, when sorting it will either be rendered first or later. Which, in turn, causes these artifacts you are experiencing here. The whole transparency render is a lot more complex than what I'm making it to be.

Since your plane object doesn't need to be translucent, you can simply set the alphaTest property of its material. Which will only render the fragment pixels with alpha greater than this value. This will also prevent that object from being considered transparent and it will always be rendered first, fixing the artifacts in your scene.

JSFiddle

Additional info: When using a transparent material with DoubleSide, you might experience self transparency problems. This happens for the same reason I just explained, but between faces of the same object. A possible solution for this problem is to set depthWrite = false, this prevent the object from writing to the depth buffer. So every face will get rendered, disregarding if another face occludes it.