Используя A-FRAME v0.9.0, я поместил a-сущность, которая использует режим obj, и я поместил сферы, чтобы представить кнопки, с которыми пользователь может взаимодействовать с помощью мыши поверх a-сущности.
При изменении размера браузера сферы остаются на месте, но размер a-сущности увеличивается. Масштабирование происходит, когда размер браузера изменяется по вертикали, но ничего не происходит при изменении размера по горизонтали.
Моя цель состоит в том, чтобы сферы оставались в пределах границ а-сущности и поддерживали отзывчивость, т. Е. Оставались на том же месте.
Я попытался обернуть сферы 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-сущности, соответственно, сохраняя свое положение поверх a-сущности с помощью obj-модели.