将球体定位在 a 元素上方并在浏览器调整大小时保持位置
Positioning spheres above an a-element and maintain position when browser resized
使用 A-FRAME v0.9.0，我放置了一个使用 obj-mode 的 a-entity，并且我放置了球体来表示按钮，用户可以在 a-entity 上与他们的鼠标进行交互.
调整浏览器大小时，球体保持在原位，但实体会缩放。当浏览器垂直调整大小时发生缩放，但水平调整大小时不执行任何操作。
我的目标是让球体保持在 a 实体的范围内并保持响应能力，即：保持在同一个地方。
我尝试用 a 实体和 id 包裹球体，以便通过调整位置来更改宽度和高度，并以编程方式使用 window 调整大小但 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 顶部的位置。
使用在文档加载和调整大小时调用的函数调整相机的缩放，该函数使用 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")
}
}
使用 A-FRAME v0.9.0，我放置了一个使用 obj-mode 的 a-entity，并且我放置了球体来表示按钮，用户可以在 a-entity 上与他们的鼠标进行交互.
调整浏览器大小时，球体保持在原位，但实体会缩放。当浏览器垂直调整大小时发生缩放，但水平调整大小时不执行任何操作。
我的目标是让球体保持在 a 实体的范围内并保持响应能力，即：保持在同一个地方。
我尝试用 a 实体和 id 包裹球体，以便通过调整位置来更改宽度和高度，并以编程方式使用 window 调整大小但 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 顶部的位置。
使用在文档加载和调整大小时调用的函数调整相机的缩放，该函数使用 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")
}
}