将球体定位在a元素之上，并在浏览器调整大小时保持位置

Question

使用A-FRAME v0.9.0，我放置了一个使用obj-mode的a-实体，并且我放置了球体来表示按钮，用户可以在a-实体的顶部与鼠标进行交互。

当浏览器调整大小时，球体保持在原来的位置，但a实体的大小会变大。当垂直调整浏览器大小时，缩放发生，但在水平调整大小时，缩放不起作用。

我的目标是让球体保持在a-实体的范围内，并保持响应性，即:保持在同一位置。

我试图用a-entity和id包装球体，以便通过调整窗口大小的编程方式调整位置和比例来改变宽度和高度，但x，y，z坐标不成功。

    <script src="https://aframe.io/releases/0.9.0/aframe.min.js"></script>


    <a-scene class="fullscreen" id="ascene" 
        inspector=""
        keyboard-shortcuts=""
        screenshot="" 
        vr-mode-ui="enabled: false"
        cursor="rayOrigin: mouse">


    <a-camera active="true" spectator="true"
            wasd-controls="wsEnabled:false;enabled:false"
            look-controls="enabled: false"
            zoom="2.4"
            position="0.3 0.0 -1.8"
            rotation="0.0 132.5 0.0"
            camera="zoom:1.5"
            look-controls=""
            camera="active:true"A
            data-aframe-inspector-original-camera=""
            look-controls="enabled: false"></a-camera>



    <a-entity id="btn_container" position="0 0 0" scale="0.02 0.02 0.02">
        <!-- BOTTOM LEFT -->
        <a-entity id="btn_bl">
            <a-sphere class="msgBtn" 
                    id="geometry_br"
                    data-msg="1"
                    geometry=""
                    sphere="2"
                    position="-0.853 -0.044 -3.116"
                    scale="0.02 0.02 0.02"
                    id="hotspot_tr"
                    material="color: green"
                    opacity="0.80"
                    emissive="green"
                    animation__mouseenter="property: components.material.material.color; type: color; to: blue; startEvents: mouseenter; dur: 200";
                    animation__mouseleave="property: components.material.material.color; type: color; to: green; startEvents: mouseleave; dur: 200";
                    animation__hotspot="property: scale;
                        dur: 500;
                        from: 0.02 0.02 0.02;
                        to: 0 0 0;
                        dir: reverse;
                        easing: easeInQuad;
                        loop: false"          
                    >
            </a-sphere>
            <a-ring  material="color: green"
                position="-0.853 -0.044 -3.116"
                scale="0.045 0.045 0.045"
                radius-inner="0"
                radius-outer="2"
                animation="property: scale;
                elasticity: 400;
                dur: 1000;
                from: 0.035 0.035 0.035;
                to: 0 0 0;
                dir: reverse;
                easing: easeInCubic;
                loop: true;"
                animation__2="property: opacity;
                elasticity: 400;
                dur: 1000;
                from: 0.45;
                to: 0.0;
                dir: reverse;
                easing: easeInQuad;
                loop: true">
            </a-ring>
        </a-entity>

        <!-- CENTER TOP -->
        <a-entity id="btn_ct">
            <a-sphere class="msgBtn" 
                id="geometry_ct"
                data-msg="2"
                geometry=""
                sphere="2"
                position="-0.500 0.111 -2.846"
                scale="0.02 0.02 0.02"
                id="hotspot_ct"
                material="color: green"
                emissive="green"
                animation__mouseenter="property: components.material.material.color; type: color; to: blue; startEvents: mouseenter; dur: 200";
                animation__mouseleave="property: components.material.material.color; type: color; to: green; startEvents: mouseleave; dur: 200";
                animation__hotspot="property: scale;
                dur: 1000;
                from: 0.02 0.02 0.02;
                to: 0 0 0;
                dir: reverse;
                easing: easeInQuad;
                loop: false"          
                    >
            </a-sphere>
            <a-ring  material="color: green"
                position="-0.500 0.111 -2.846"
                scale="0.045 0.045 0.045"
                radius-inner="0"
                radius-outer="2"
                animation="property: scale;
                elasticity: 400;
                dur: 1000;
                from: 0.035 0.035 0.035;
                to: 0 0 0;
                dir: reverse;
                easing: easeInCubic;
                loop: true;"
                animation__2="property: opacity;
                elasticity: 400;
                dur: 1000;
                from: 0.45;
                to: 0.0;
                dir: reverse;
                easing: easeInQuad;
                loop: true">
            </a-ring>
        </a-entity>

        <!-- TOP RIGHT -->
        <a-entity id="btn_tr">
            <a-sphere class="msgBtn" 
                id="hotspot_tr"
                data-msg="3"
                geometry=""
                sphere="2"
                position="0.181 0.464 -3.000"
                scale="0.02 0.02 0.02"
                id="hotspot_bl"
                material="color: green"
                emissive="green"
                animation__mouseenter="property: components.material.material.color; type: color; to: blue; startEvents: mouseenter; dur: 200";
                animation__mouseleave="property: components.material.material.color; type: color; to: green; startEvents: mouseleave; dur: 200";
                animation__hotspot="property: scale;
                dur: 1000;
                from: 0.02 0.02 0.02;
                to: 0 0 0;
                dir: reverse;
                easing: easeInQuad;
                loop: false"          
                >
            </a-sphere>
            <a-ring  material="color: green"
                position="0.181 0.464 -3.000"
                scale="0.045 0.045 0.045"
                radius-inner="0"
                radius-outer="2"
                animation="property: scale;
                elasticity: 400;
                dur: 1000;
                from: 0.035 0.035 0.035;
                to: 0 0 0;
                dir: reverse;
                easing: easeInCubic;
                loop: true;"
                animation__2="property: opacity;
                elasticity: 400;
                dur: 1000;
                from: 0.45;
                to: 0.0;
                dir: reverse;
                easing: easeInQuad;
                loop: true">
            </a-ring>
        </a-entity>
    </a-entity>




    </a-scene>


    <script>
    // CALL RESIZE WHEN SCENE LOADED
    document.querySelector('a-scene').addEventListener('loaded', function () { resize() })

    // CALL RESIZE WHEN WINDOW RESIZED
    window.addEventListener("resize", function() { resize() });
    var acanvas = document.getElementsByClassName("a-canvas")[0];
    var btn_container = document.getElementById("btn_container");
    var btn_container_scale = btn_container.getAttribute("scale");

    function resize() {
        console.log("resize")
        var w = window.innerWidth;
        btn_container_scale.x = w/1000;
        btn_container_scale.y = w/1000;
        btn_container_scale.z = w/1000;
    }

    </script>

当浏览器调整球体的大小时，球体分别与a实体比例一起，同时保持它们在具有obj模型的a实体之上的位置。

Answer 1

使用在文档加载和调整大小时调用的函数调整相机的缩放，该函数使用window.matchMedia作为浏览器的宽度，然后相应地调整相机的缩放属性，以便在较小的视口上保持视图中的内容。

document.querySelector('a-scene').addEventListener('loaded', function () { resize() })


window.addEventListener("resize", function() { resize() });

var camera1 = document.getElementById("camera1");

function resize() {
   camera1.setAttribute("camera","zoom: 3.5")

   if(window.matchMedia("(max-width: 1300px)").matches) {
    camera1.setAttribute("camera","zoom: 3.0")
  }
  if(window.matchMedia("(max-width: 1100px)").matches) {
      camera1.setAttribute("camera","zoom: 2.5")
  }
  if(window.matchMedia("(max-width: 950px)").matches) {
      camera1.setAttribute("camera","zoom: 2.0")
  }
  if(window.matchMedia("(max-width: 450px)").matches) {
      camera1.setAttribute("camera","zoom: 1.5")
    }
}