Transparency problem with eyelashes

Questions
,
1

Hello all

On the eyebrows there are margins where the background shows through. That looks like this

R%C3%A4nder

Does anyone know why this is ? My settings look like this.

renderer = new THREE.WebGLRenderer({ alpha: true });
renderer.setClearColor( 0x000000 );
renderer.setPixelRatio( window.devicePixelRatio );
renderer.setSize( 800, 600 );
//renderer.antialias = false;
//renderer.shadowMap.enabled = true;
container.appendChild( renderer.domElement );

var texture = new THREE.TextureLoader().load('./three/models/JSON/Blender/2374.png');
var material = new THREE.MeshPhongMaterial({ map: texture, transparent: true });			
var mesh = new THREE.SkinnedMesh( geometry, material );				
	
	material.alphaTest = 0.5;		
	material.side = THREE.DoubleSide;
	material.antialias = false;
	premultipliedAlpha: true;
	material.magFilter = THREE.LinearFilter;
	material.minFilter = THREE.LinearMipMapLinearFilter;
	material.needsUpdate = true;

Thank’s very much !!

2

This issue might be interesting for you:

If the eyebrows textures are cut-outs (no semi-transparency), there is no need to set transparent to true. It should be sufficient to just define alphaTest.

Besides, antialias is no property of material. I also think you don’t need to pass alpha: true to WebGLRenderer.

3

@Mugen87, thanks for the answer! It is a model in JSON format. The settings I do so because that works in Blender with the same. But you’re right, if transparent: true is off and material.alphaTest = 0.5; is on, the whole thing works perfectly. Thanks for the hint !