Home

Welcome to the lawnmower wiki!

lawnmower is a collection of web-components that when put together render a VR scene. They are 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.

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.

This wiki aims to document what tags are available and the properties available on them.

Beloe is a simple example layout. Remember though, every document must start and end with an <lm-document> tag.

<lm-document id="main" default-placement-location="1000">
      <lm-div margin="10" background-color="#ff2211">
         <lm-div background-color="#00ffff" margin="30" layout="Column">
            <lm-text id="text-1" font-color="#222222" background-color="#0f00f1" padding="15" text-decoration="bold">
              First text area

              This is an example
            </lm-text>  
            <lm-video id="video-1"
                      src="http://url-to-video/video.mp4" 
                      playback="modal"
                      placeholder="10"></lm-video>
         <lm-div background-color="#00ffff" margin="30" layout="Column">
            <lm-asset 
              id="asset-1"
              active-animation="FirstAnimation"
              radius="500" 
              src="https://url-to-asset/example.gltf"></lm-asset>
            <lm-text id="text-2" font-color="#222222" background-color="#0f00f1" padding="15" text-decoration="bold">
              Second text area

              This is another example
            </lm-text>  
         </lm-div>
	</div>
</lm-document>

Finally, this library is using three.js under the hood, calling getSceneObject() on any element will return the three.js group in the scene for you to manipulate directly.

Please leave feeback for any bugs you find or suggestions to make better!