0

I just created a box with a picture using aframe with 

<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>

Is there a way I could turn the bottom square to do the same thing as an <input type="file"> when it is clicked so I can replace the image in the larger box?

MrWm
  • 1
  • 2

1 Answers1

0

Normal HTML components can't be directly rendered in WebGL, so adding an <input/> to the A-Frame scene has no effect. There are a few workarounds for turning the appearance of the HTML into a texture, but this doesn't include interactivity.

You can put the input outside the scene, and re-direct click events to the second box.

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

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

Note that the file selection menu is still the "normal" menu in your browser, it's not shown in WebGL / VR. Because of security restrictions, you cannot customize that menu or build it in WebGL.

Community
  • 1
  • 1
Don McCurdy
  • 10,975
  • 2
  • 37
  • 75
  • Sorry I took so long to respond, but for some reason with your code, it wouldn't work unless I called the function within the dev console. – MrWm May 06 '17 at 04:23
  • You can find the code I'm referring to [here](https://github.com/wiiliam/a-frame_input) (github link) – MrWm May 06 '17 at 04:35
  • What error do you get? Note that if the scene hasn't loaded yet, none of these elements are there. So you might need that code to be inside a component. – Don McCurdy May 06 '17 at 07:08
  • In Firefox, I get `TypeError: ev.popupWindowURI is null` and in Chrome, I get an error about a null something. With some googling, I found that the file picker shows up when I disable the popup blocker in FF, but nothing happens when I do the same in Chrome. Note: to launch the file picker in Chrome, I needed to open up the dev console and enter in `document.getElementById('IN').click();` – MrWm May 06 '17 at 22:01