Add 2D image click points on 3D model using ThreeJS

Question

How can I perform the following: 1. place 2D image icons (like a plus sign) on various locations of the 3D model 2. Attach click events on these icons

When the user clicks on these icons I want to show a popup with text/image content.

How can I get this done.

Answer 1

I would use THREE.Sprite's as the icons. You can position the sprites on the specified coordinates on the model with sprite.position.set(x,y,z) . You can add an image as a texture using THREE.SpriteMaterial. https://threejs.org/docs/#api/en/materials/SpriteMaterial

This example shows how to use a raycaster to find the sprite the mouse is hovering over, you can add your own mousedown event. https://threejs.org/examples/?q=rayca#webgl_raycast_sprite