PNG texture to the plane geometry has black rectangle

My code is as the following

let texture = new THREE.TextureLoader().load( '' );
let flwmtl= new THREE.MeshBasicMaterial( { map: texture ,opacity: 0.8, transparent: true } )
let gflw= new THREE.PlaneGeometry(6,6,1,1)
let flower = new THREE.Mesh(gflw,flwmtl)

I have my flower, but I also have the black rectangle of the planegeometry. But my png is transparent, I’m sure that.
How to remove the black rectangle of the planegeometry. I just want it be transparent.


I’m getting “access denied” for this link.

1 Like

Please show at least a screenshot of how the plane is currently rendered.
please check this

please check here

Um, I’m not able to reproduce the issue with this fiddle:

Can you please check in your code what are you doing different?

My render version is THREE.WebGLRenderer 101
Is this different?
Actually, I can’t access to your website, maybe blocked by the GFW…
Could you please copy it here? Or I will manage to access it.

It also works with R101. Here is the fiddle code:

var camera, scene, renderer;
var geometry, material, mesh;


function init() {

    camera = new THREE.PerspectiveCamera( 70, window.innerWidth / window.innerHeight, 0.01, 10 );
    camera.position.z = 1;

    scene = new THREE.Scene();
    scene.background = new THREE.Color( 0xffffff );
    var loader = new THREE.TextureLoader();
    var texture = loader.load( '' );

    geometry = new THREE.PlaneBufferGeometry();
    material = new THREE.MeshBasicMaterial( { map: texture ,opacity: 0.8, transparent: true } );

    mesh = new THREE.Mesh( geometry, material );
    scene.add( mesh );

    renderer = new THREE.WebGLRenderer( { antialias: true } );
    renderer.setSize( window.innerWidth, window.innerHeight );
    document.body.appendChild( renderer.domElement );


function animate() {

    requestAnimationFrame( animate );
    renderer.render( scene, camera );


Thanks so much. I will check myself