PNG texture to the plane geometry has black rectangle

Questions
1

My code is as the following

let texture = new THREE.TextureLoader().load( 'http://www.abc.com/sunflower.png' );
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.

Thanks.

2

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

1 Like
3

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

4

http://imgsrc.baidu.com/forum/w%3D580/sign=90b4fcbfbf3533faf5b6932698d2fdca/075866f0f736afc3f05d4ad4bd19ebc4b64512c0.jpg
please check this

5

http://imgsrc.baidu.com/forum/w%3D580/sign=b66468a56cd0f703e6b295d438fb5148/cff868094b36acaf12aaa84e72d98d1000e99cd4.jpg

please check here

6

Um, I’m not able to reproduce the issue with this fiddle: https://jsfiddle.net/8zd4bxj0/

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

7

My render version is THREE.WebGLRenderer 101
Is this different?

8

https://jsfiddle.net/8zd4bxj0/
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.

9

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

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

init();
animate();

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( 'https://i.imgur.com/RoNmD7W.png' );

    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 );

}
10

Thanks so much. I will check myself