Question

我需要一些帮助。对于我正在研究的项目，我们使用aframe。此时不需要VR，但我们正在研究3D空间。

我的场景旁边需要两个“按钮”。用户需要一直看到它们。

因此将'按钮添加为相机的子实体。奇迹般有效。但是当我改变视口时。较小的屏幕，移动等等，您无法再看到它们的位置变化。

反正有没有阻止这个？

这是代码。

<a-entity camera look-controls>
     <a-entity position="3 1 -2" >
         <a-entity id="fullScreen" geometry="primitive: circle; radius: 
0.1;" position=" 0 0.5 0"  material="src:#fullIco; transparent: true; opacity: 0.5; " fullscreen> </a-entity>
 <a-entity id="shareScene" geometry="primitive: circle; radius: 0.1;" position=" 0 0.25 0" material="src:#shareIco; transparent: true; opacity: 0.5; "sharescene> </a-entity>
       </a-entity>

example

Answer 1

如果您不使用VR，那么如何使用位于a-frame画布上的普通按钮？

在您希望的位置创建<div>或<button> fixed位置，并使其执行您的代码onclick。像这样：

<button onclick="changesphere()">

<小时/> 您可以使用queryselectors访问a-frame实体，并像使用任何其他DOM元素一样使用它们。

所以只需像这样定义你的函数：

var changesphere = function() {
 if (document.querySelector("a-sphere").getAttribute("color") !== "blue")  {
  document.querySelector("a-sphere").setAttribute("color", "blue");
 } else {
  document.querySelector("a-sphere").setAttribute("color", "green");
 }
}

查看我的示例here。

aframe视口更改和实体的定位

1 个答案: