lawnmowerJS

lawnmowerJS is s web component library that allows VR layouts to be built using HTML tags.

The aim of this library is to make building a basic VR website as easy to make as your first HTML site. No need for lots of contextual knowledge about 3D and VR, you can just start designing.

The library uses Stencil to build web components that are, by their nature, framework independent and work much like any other DOM element. You can call them with JavaScript and set properties, listen for events and call methods.

Under the hood, it is using three.js for its 3D and most elements allow access to their implementation (in case you want to fiddle with ther functionality).

Each tag described starts with lm, such as <lm-div></lm-div> and try to be analogous to their HTML counterpart when rendered into 3D.

Documentation for all the available tags can be located in the Wiki

Installation

You can easily include lawnmowerJS in an HTML file by linking to script and CSS file on the CDN:

You can download and include the release associated to this repository.

You can also install lawnmowerjs through npm:

Usage

In order to generate a VR scene, you just need to create a HTML page, include the required libraries and start laying things out.

The following HTML:

Will render to the following 3D scene:

There is also a demo video to show how to build a basic scene here https://www.youtube.com/watch?v=lGbip-beDY4

NOTE: Designing a scene is easier by setting vr-enabled="false" on the lm-document and then re-enabling when you deploy the HTML page.

HTML Tags

The following tags are available for building your VR scene

lm-document

lm-document is the root element for the VR layout. This must be the root element which all other lawnmower elements sit under.

lm-div

This is the main tool for creating layouts in the VR scene. It works much like a regular HTML div but generates itself within a 3D environment.

lm-text

The text element is a way to display text blocks in a VR environment. The can either be placed directly into a lm-document, lm-div or lm-modal.

lm-image

The image element is a way to display images in a VR environment. The can either be placed directly into a lm-document, lm-div or lm-modal. They can be displayed inline or automatically pop out as part of a build in modal dialog.

lm-video

The video element is a way to display videos in a VR environment. The can either be placed directly into a lm-document, lm-div or lm-modal. They can be displayed inline, automatically pop out as part of a build in modal dialog or play in 360.

lm-360video

The 360 video element is a way to display 350 videos in a VR environment. The can either be placed directly into a lm-document and is not affected by being placed in a lm-div or lm-modal.

lm-asset

The asset element is a way to load GLTF assets into a VR environment. The can either be placed directly into a lm-document, lm-div or lm-modal. Currently, the only file format that is supported is GLTF.

lm-button

The button element is a way to display buttons in a VR environment and currently is functionaly similar to lm-text (although this may be extended in the future). The can either be placed directly into a lm-document, lm-div or lm-modal.

lm-button

The layout is a way to wrap certain elements and only make them visible when a selected layout is enabled. For example, an image the is contained within a layout with the id="example" will only become visible when setLayout("example") is called on the lm-document.

It is worth noting that only one layout may be anabled at a time.