如何將輸入框放在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中構建它。