Actualmente estoy creando una página web en three.js y me cuesta mostrar una imagen en un objeto. Lo que quiero hacer es mostrar una imagen en una Malla con PlaneGeometry.

Primero intenté cargar mi imagen como una textura para reemplazar el material de mi malla, pero falló, no muestra nada (incluso el objeto desapareció).

Para crear y mostrar mi objeto utilicé estas líneas de código (scene es mi escena y onglets es el grupo en el que reuní varios objetos (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);

Para cargar mi imagen modifiqué mi código así:

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

Si ve lo que hice mal o tiene algún consejo para mejorar mi código en general, me encantaría escucharlo. ¡Gracias de antemano por la ayuda chicos!