I am currently creating a webpage in three.js and I struggle to display an image on an object. What I want to do is to display an image on a Mesh with PlaneGeometry.

I first tried to load my image as a texture to replace the material of my mesh but it failed it doesn't display anything (even the object disappeared).

To create and display my object I used these lines of code (scene is my scene and onglets is the group in which I gathered several objects (onglet1, onglet2, ...)):

    couleur = new THREE.MeshBasicMaterial( {color: 0x031f3c , side: THREE.DoubleSide } );
    plan = new THREE.PlaneGeometry( 0.75 , 0.4 );
    var onglets = new THREE.Group();

    onglet1 = new THREE.Mesh( plan , couleur );
    onglet1.position.set( 0, 0, r );
    onglets.add(onglet1);
    scene.add(onglets);

To load my image I modified my code like this:

    couleur = new THREE.MeshBasicMaterial( {color: 0x031f3c , side: THREE.DoubleSide } );
    plan = new THREE.PlaneGeometry( 0.75 , 0.4 );
    var onglets = new THREE.Group();

    var map = new THREE.TextureLoader().load( "../media/groupe.jpg" );
    var material = new THREE.SpriteMaterial( { map: map, color: 0x000000 } );

    onglet1 = new THREE.Mesh( plan , material );
    onglet1.position.set( 0, 0, r );
    onglets.add(onglet1);
    scene.add(onglets);

If you see what I did wrong or have any advice to improve my code in general I would be happy to hear it. Thanks in advance for the help guys!