Clickable element with PerspectiveCamera

Questions
1

Hi,
I’ve created a panoramic image with PerspectiveCamera and all went well. I’ve also managed to add controls.
Now I want to place a clickable element (link/button/whatever) in the scene but I have no clue how to add and position the clickable element…every tip/suggestion is highly appreciated! :slight_smile: Here is my code sofar:

function init() {

        const container = document.getElementById( 'three-image' );

        camera = new THREE.PerspectiveCamera( 75, window.innerWidth / window.innerHeight, 1, 1100 );

        scene = new THREE.Scene();

        const geometry = new THREE.SphereGeometry( 500, 60, 40 );
        // invert the geometry on the x-axis so that all of the faces point inward
        geometry.scale( - 1, 1, 1 );

        //let imageLocation = <?php echo $block->getPanoramaImages();?>;
        let imageLocation = '/three/luifel.jpg';
        //alert(imageLocation)

        const texture = new THREE.TextureLoader().load(imageLocation);
        const material = new THREE.MeshBasicMaterial( { map: texture } );

        const mesh = new THREE.Mesh( geometry, material );

        scene.add( mesh );

        renderer = new THREE.WebGLRenderer();
        renderer.setPixelRatio( window.devicePixelRatio );
        renderer.setSize( window.innerWidth, window.innerHeight );
        container.appendChild( renderer.domElement );

        container.style.touchAction = 'none';
        container.addEventListener( 'pointerdown', onPointerDown );

        document.addEventListener( 'wheel', onDocumentMouseWheel );

        //document.addEventListener( 'dragover', function ( event ) {

        //    event.preventDefault();
        //    event.dataTransfer.dropEffect = 'copy';

        //} );

        //document.addEventListener( 'dragenter', function () {

        //    document.body.style.opacity = 0.5;

        //} );

        //document.addEventListener( 'dragleave', function () {

        //    document.body.style.opacity = 1;

        //} );

        document.addEventListener( 'drop', function ( event ) {

            event.preventDefault();

            const reader = new FileReader();
            reader.addEventListener( 'load', function ( event ) {

                material.map.image.src = event.target.result;
                material.map.needsUpdate = true;

            } );
            reader.readAsDataURL( event.dataTransfer.files[ 0 ] );

            document.body.style.opacity = 1;

        } );

        window.addEventListener( 'resize', onWindowResize );

    }