A progressive in-app browser for aframe using an electron based headless browser companion app.
Branch: master
Clone or download
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
dist first commit Aug 5, 2018
src first commit Aug 5, 2018
.gitignore first commit Aug 5, 2018
LICENSE added licence Aug 6, 2018
README.md updated readme Aug 29, 2018
demo.gif first commit Aug 5, 2018
index.js first commit Aug 5, 2018
package-lock.json updated electron dependency Aug 29, 2018
package.json updated electron dependency Aug 29, 2018
server.js first commit Aug 5, 2018
webpack.config.js first commit Aug 5, 2018

README.md

AFRAME In-App Browser

Demo

This project is still a WIP!

This in-app browser uses a headless browser with off-screen rendering as a companion app to paint frames from webpages to a texture in aframe. The companion app is based in electron ( server.js ) and recieves mouse and keyboard events from the front end. This allows for a fully isolated browser experience inside of aframe for doing things like Oauth, or just general browsing in VR.

Inspiration

I wanted to port my scene editor built in Altspace VR to the browser as a standalone aframe based project. AltspaceVR provided a renderTarget based solution allowing you to render a browser to a texture. This project hopes to provide a similar solution in that it will support multiple browser plugins to allow you to connect to and remote control a remote browser inside VR.

Here is a demo of the new aframe based Shane's Editor that this will be used in: Demo

The Shane's Editor project is also open source and you can get involved at github, join our discord or take it for a test drive in the live demo

I will get a demo in place soon but for now here's the details to get you started.

Getting Started

Installing

npm i aframe-in-app-browser

Running

npm start

Building

npm run build

Example

<a-scene stats>
    <a-entity id="camera" camera="near:0.1;far:1000"  look-controls > <!--wasd-controls-->
        <a-entity id="cursor" cursor="rayOrigin: mouse" ui-mouse-shim
                  raycaster="far: 30; objects: .intersectable;"></a-entity>
    </a-entity>

    <a-entity light="type: ambient; intensity: 0.5;"></a-entity>
    <a-box color="#efefef" side="back" scale="10 10 10"></a-box>

    <a-entity position="0 0 -1">
        <a-plane height="0.1" width="1.7" shader="flat" color="#009688" curved-plane position="0 0.55 0"></a-plane>
        <a-plane height="1" width="1.7" shader="flat" browser ui-double-click curved-plane class="intersectable"></a-plane>
    </a-entity>
</a-scene>

TODOs:

  • Need to finish the address bar to allow for navigating to other sites.