How to add a link to the top of a three.js cube?

Question

3D

Приветствую,
Есть фигура тетраэдр, на вершинах текстурой вставлены иконки, по логике по нажатию на определенную иконку юзер должен переходить на другую страницу.
Проблема в том что никак нельзя привязать событие к вершине а тем более к текстуре (по крайней мере я не нашел решения).
Пробовал вставить на вершины дом элементы с помощью CSS3DRenderer.js но у меня не получилось.
Вопрос в том как повесить событие или сделать по другому для того чтобы получить желаемый результат
Вот код
подключенные файлы

<script src="js/three.js"></script>
<script src="js/TrackballControls.js"></script>

работающий код

var container = document.getElementById('here');
var renderer = new THREE.WebGLRenderer({
  antialias: true,
  alpha: true
});
var camera = new THREE.PerspectiveCamera(70, window.innerWidth / window.innerHeight, 1, 5000 );
var scene = new THREE.Scene();
var Ico;

scene.add(camera);
renderer.setSize(window.innerWidth, window.innerHeight);

container.append(renderer.domElement);

// Camera
camera.position.z = 200;

// Material
var greyMat = new THREE.MeshPhongMaterial({
  color: new THREE.Color("rgb(125,127,129)"),
  emissive: new THREE.Color("rgb(125,127,129)"),
  specular: new THREE.Color("rgb(125,127,129)"),
  shininess: "100000000",
  shading: THREE.FlatShading,
  transparent: 1,
  opacity: 1,
  wireframe: true
});

var L2 = new THREE.PointLight();
L2.position.z = 1900;
L2.position.y = 1850;
L2.position.x = 1000;
scene.add(L2);
camera.add(L2);

var Ico = new THREE.Mesh(new THREE.TetrahedronGeometry(70, 1), greyMat);
Ico.rotation.z = 0.5;
scene.add(Ico);
var trackballControl = new THREE.TrackballControls(camera, renderer.domElement);
trackballControl.rotateSpeed = 1.0; 
trackballControl.noZoom = true;

// sprites
var txtLoader = new THREE.TextureLoader();
txtLoader.setCrossOrigin("");
var textures = [
  "img/13.png",
  	"img/10.png",
  	"img/5.png",
  	"img/2.png",
  	"img/1.png",
  	"img/7.png",
  	"img/8.png",
  	"img/6.png",
  	"img/18.png"
];
var direction = new THREE.Vector3();
console.log(Ico.geometry.vertices.length);
Ico.geometry.vertices.forEach(function(vertex, index){

  var texture = txtLoader.load(textures[index]);
  var spriteMaterial = new THREE.SpriteMaterial({map: texture});
  var sprite = new THREE.Sprite(spriteMaterial);

  sprite.scale.setScalar(25);
  direction.copy(vertex).normalize();
  sprite.position.copy(vertex).addScaledVector(direction, 25);
  Ico.add(sprite);
});

function update() {
  Ico.rotation.x += 2 / 500;
  Ico.rotation.y += 2 / 500;
}

// Render
function render() {
  trackballControl.update();
  requestAnimationFrame(render);
  renderer.render(scene, camera);
  update();
}
render();

Answer 1

Вам нужен Raycaster для детектирования и проекции положения мыши на 3D пространство

var raycaster = new THREE.Raycaster();
var mouse = new THREE.Vector2();
function clickOnSprite(event){
    console.log("CLICK! " + event.clientX + ", " + event.clientY);      

    mouse.x = ( event.clientX / window.innerWidth ) * 2 - 1;
    mouse.y = - ( event.clientY / window.innerHeight ) * 2 + 1; 
    raycaster.setFromCamera( mouse, camera );   

    var intersects = raycaster.intersectObjects( iconsSprites );

    intersects.forEach(function(element){
        console.log("Intersection: " + element.object.id);
    });
}