使用A-FRAME v0.9.0，我放置了一个使用obj-mode的a-entity，并且将球体定位为代表按钮，用户可以在a-entity上与他们的鼠标进行交互。
调整浏览器的大小时，球体保持在原位置，但a实体的大小在缩放。缩放会在浏览器垂直调整大小时发生，而在水平调整浏览器时则不执行。
我的目标是使球体定位在a-entity的范围内并保持响应能力，即：保持在同一位置。
我尝试用a实体和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-entity分别缩放，同时使用obj-model保持它们在a-entity上的位置。
答案 0 :(得分：0)
通过使用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")
}
}