try to put a image with transparency on a plane (three.js)

Question

I am new with three.js and I want show a image ( png image with transparency ) on a plane but my code don't work...

this is my code:

var texture = new THREE.TextureLoader().load( 'images/lampedepoche.png' );
    
var geometry = new THREE.PlaneGeometry(300, 80);
var material = new THREE.MeshPhongMaterial({map: texture, color: 0xFFFFFF});
material.emissive.set(0x333333);
material.shininess = 60;
    
var ldp = new THREE.Mesh(geometry, material);
scene.add(ldp);

this is my image:

and this is all my code:

window.onload = init();


function init(){
    // on initialise le moteur de rendu
    renderer = new THREE.WebGLRenderer();

    renderer.setSize( window.innerWidth, window.innerHeight );
    document.getElementById('container').appendChild(renderer.domElement);
    
    // on initialise la scène
    scene = new THREE.Scene();
    
    // on initialise la camera que l’on place ensuite sur la scène
    camera = new THREE.PerspectiveCamera(50, window.innerWidth / window.innerHeight, 1, 100000 );
    camera.position.set(0, 0, 1000);
    scene.add(camera);
    
    // plane
	me = new THREE.Mesh(new THREE.PlaneGeometry(900,550), new THREE.MeshPhongMaterial({color: 0xffffff}));
	scene.add( me );
    
    me.position.x = 130;
    me.position.y = 10;
    me.rotation.y = -20;
    
    var texture = new THREE.TextureLoader().load( 'images/lampedepoche.png' );
    
    var geometry = new THREE.PlaneGeometry(300, 80);
    var material = new THREE.MeshPhongMaterial({map: texture, color: 0xFFFFFF});  
    material.transparent = true
    var ldp = new THREE.Mesh(geometry, material);
    scene.add(ldp);
    
    ldp.position.x = -410;
    document.getElementById("positionlx").value = 0;
    
    // on créé un  cube au quel on définie un matériau puis on l’ajoute à la scène 
    cube = new THREE.Mesh( new THREE.CubeGeometry( 100, 100, 100 ), new THREE.MeshPhongMaterial({color:0x00ffff}) );
    scene.add( cube );
    
    
    cube.position.y = 0;
    cube.position.x = 0;
    cube.position.z = 0;
    cube.rotation.y = 0;
    
    scene.add( new THREE.AmbientLight( 0x212223) );
      
    light = new THREE.SpotLight(0xffffff, 1);
    light.position.set(-320,0,0);
    light.angle = Math.PI/5;
    light.shadowCameraVisible = true;
    scene.add(light);
    
    renderer.shadowMap.enabled = true;
    renderer.shadowMapDarkness = 1;
    
     light.castShadow = true;
     light.intensity = 0.8;
     cube.castShadow = true;
     cube.receiveShadow = true;
     me.receiveShadow = true;
    
     lightHelper = new THREE.SpotLightHelper( light );
     scene.add(lightHelper);
    
    renderer.render( scene, camera );
}

May be I did some mistake ... like I am beginner in javascript

I need help

Answer 1

Have you tried material.transparent = true ?