Fixed HTML element in 360 Panorama cube

[torgestehr]

Hello, I need to add a button to my 360° panorama image cube. After trying a few ideas to add a button with Three Js I got the idea to add a button to my html code and adjust the position of the cube:

<style>
    body {
        margin: 0;
    }

    #app {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        width: 1500px;
        height: 900px;
        overflow: hidden;
        cursor: all-scroll;
    }

    #app #switchRoom {
        position: absolute;
        top: 0;
        left: 0;
        padding: 0;
        border: 0;
        width: 100px;
        height: 40px;
        transform: translate(-50%, -50%);
    }
</style>

<div id="app">
    <button id="switchRoom">Weiter</button>
</div>

// imports
import { OrbitControls } from './assets/lib/ThreeJS/OrbitControls.js';

// room's configuration
var room_configs = {
    "room1": {
        "texture": "./assets/textures/room1.jpg",
        "buttons": [
            {
                "position": "0, 0, 0",
                "href": "room2"
            }
        ]
    }
}

// instantiate
var mesh = null;
var renderer = new THREE.WebGLRenderer();
var scene = new THREE.Scene();
var target = $("#app");

// renderer's configuration
renderer.setPixelRatio(window.devicePixelRatio);
renderer.setSize(target.width(), target.height());

// append renderer to app
target.append(renderer.domElement);

// instantiate camera
var camera = new THREE.PerspectiveCamera(
    75, // field of view
    target.width() / target.height(), // aspect ratio
    1, // closest distance
    1000000 // farest distance
);

// camera's configuration
camera.position.set(0, 0, 0);
camera.lookAt(10, 0, 0);

// instantiate orbit
var orbit = new OrbitControls(camera, renderer.domElement);

// orbit's configuration
orbit.target.set(
    camera.position.x + 0.1,
    camera.position.y,
    camera.position.z
);
orbit.enableZoom = false;
orbit.rotateSpeed = -0.2;
orbit.enableDamping = true;
orbit.dampingFactor = 0.1;

// set default room
switchRoom("room1");

// render
renderer.render(scene, camera);

// switchRoom function
function switchRoom(id) {
    if (id in room_configs) {
        // instantiate loader
        var loader = new THREE.TextureLoader();

        // loader's configuration
        loader.load(
            // texture
            room_configs[id]["texture"],

            // onLoad callback
            function ( texture ) {
                // remove old room
                if (mesh != null) {
                    scene.remove(mesh);
                }

                // create room
                var material = new THREE.MeshBasicMaterial({map: texture});
                var geometry = new THREE.SphereGeometry( 500, 60, 40 );
                geometry.scale(-1, 1, 1);
                mesh = new THREE.Mesh(geometry, material);
                mesh.position.set(
                    camera.position.x,
                    camera.position.y,
                    camera.position.z
                );
                scene.add(mesh);

                // render again
                renderer.render(scene, camera);
            },

            // onError callback
            function ( err ) {
                console.error('Das Laden des Showrooms ist fehlgeschlagen.');
            }
        );
    }else {
        console.error('Das Laden des Showrooms ist fehlgeschlagen.');
    }
}

// animate rotation
function animate() {
    requestAnimationFrame(animate);
    orbit.update();
    renderer.render(scene, camera);
}

// fit resize
window.addEventListener("resize", onWindowResize, false);
animate();

function onWindowResize() {
    renderer.setSize(target.width(), target.height());
    camera.aspect = target.width() / target.height();
    camera.updateProjectionMatrix();
}

// button function
function moveButton(element, x, y, z) {
    var button = $(element);
    var pos = new THREE.Vector3(x, y, z);
    pos.unproject(camera);
    var pointX = pos.x;
    var pointY = pos.y;
    var vFOV = THREE.MathUtils.degToRad( camera.fov );
    var height = 2 * Math.tan( vFOV / 2 ) * 20;
    var width = height * camera.aspect;
    var targetWidth = target.width();
    var targetHeight = target.width();
    var newTop = (targetHeight / height) * pointY;
    var newLeft = (targetWidth / width) * pointX;
    button.css("top", newTop * -1)
    button.css("left", newLeft * -1)
}

function moveButtons() {
    moveButton("#switchRoom", -3, -1, 0);
}

// event listener for movement
var canvas = document.getElementById("app");
canvas.addEventListener("mousedown", function(e){
    if(e.button === 0){
        canvas.onmousemove = function(e) {          
            moveButtons();
        }
    }else if(e.button === 1){
        canvas.onmousemove = function(e) {          
            moveButtons();
        }
    }else if(e.button === 2){
        canvas.onmousemove = function(e) {          
            moveButtons();
        }
    }
});

canvas.addEventListener("mouseup", function(e){
    canvas.onmousemove = null
});

Does anyone has a better solution?