Three.js реализация реакции mousedown на Sprite

Имеется набор THREE.Sprite

    var textureLoader = new THREE.TextureLoader();
var mapLeft = textureLoader.load("img/rotate_left.png" );
var materialLeft = new THREE.SpriteMaterial( { map: mapLeft, color: 0xffffff, fog: true } );
var spriteLeft = new THREE.Sprite(materialLeft);
spriteLeft.name = 'rotate_left';

который устанавливается рядом с объектом и должен выполнять функцию кнопки, однако при попытке определения нажатия через

    var intersect = app.raycaster.intersectObjects(app.scene.children);

возвращается пустой массив хотя при отладке видно что необходимые объекты присутствуют в списке children моей сцены. Вот в этой теме была подсказка но я столкнулся со сложностью в реализации этих рекомендаций, не могли вы подсказать мне решение.

ПС. По факту необходимо реализовать кликабельную область над неким 3D объектом в сцене в виде аля "полоски здоровья", постоянно повернутая к камере , состоящая из несколькиз спрайтов. (от сюда еще один вопрос как получить 2D координату по координате 3D и рисовать спрайт уже по 2D координатам что бы в не зависимости от поворота камеры эти доп. элементы интерфейса были параллельно горизонту)

Вот так это должно выглядеть:

По факту при привязке спрайтов к определённой точке 3D объекта, я разношу их по z координате и при вращении камеры получается что разнесённые спрайты смещаются в 3D перспективе :( , как выход разносить их в 2D координатах, но как ?

Были внесены правки по рекомендации prisoner849, переходим от использования Sprite к Plane

Но возникли сложности при наложении текстуры для будущей кнопки использую код для создания Plane

    // Создаю группу как было рекомендовано
var group = new THREE.Group();
group.name = 'rotate-elements';
// Делаю её quaternion таким же как у камеры
group.quaternion.copy(app.camera.quaternion);
// mesh это моя 3D фигура над которой нужно повесить элементы управления
group.position.copy(mesh.position);
// Загружаю текстуру 
var texture = new THREE.TextureLoader().load( "img/can.png" );
// Создаю материал на её основе
var material = new THREE.MeshLambertMaterial({ map : texture });
// Создаю Plane , 10х10 используа данный материал
var plane = new THREE.Mesh(new THREE.PlaneGeometry(10, 10), material);
plane.position.set(0,5,0);
group.add(plane);
app.scene.add(group);

В итоге имеем такую вот картинку, (бог с ним с размерами)

Хотя значок изначально вот такой

вопрос, почему так произошло ? когда я загружал в спрайты эту же картинку всё было ок, + как сделать что бы при текстурировании определённый цвет был прозрачным ?

И что самое печальное

    var intersect = app.raycaster.intersectObjects(app.scene.children);

ни дал результата при щелчке в области Plane