如何将输入框放在aframe中？

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帧场景中添加<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中构建它。