Question

我刚刚用aframe和

创建了一张带有图片的方框

<a-entity geometry=" primitive: box; depth: 0.1; height: 12; width: 20" position="0 7 -5" material="shader: flat; roughness: 1; src: url(images/picture.png)"></a-entity>
<a-entity geometry=" primitive: box; depth: 0.1; height: 2; width: 2" position="-9.5 2 -4.5" material="shader: flat; roughness: 1; color: #ccc"></a-entity>

有没有办法在单击时将底部正方形与<input type="file">做同样的事情，这样我可以替换较大框中的图像？

Answer 1

普通HTML组件无法在WebGL中直接呈现，因此向A-Frame场景添加<input/>无效。有a few workarounds用于将HTML的外观转换为纹理，但这不包括交互性。

您可以将输入放在场景之外，然后将点击事件重定向到第二个框。

boxEl = document.querySelector('#box-el');
fileInputEl = document.querySelector('#file-input-el');

boxEl.addEventListener('click', function () {
  fileInputEl.click();
});

请注意，文件选择菜单仍然是浏览器中的“普通”菜单，它不会显示在WebGL / VR中。 Because of security restrictions，您无法自定义该菜单或在WebGL中构建它。

如何在框架中放置输入框？

1 个答案: