{"id":15044738,"url":"https://github.com/gmarland/lawnmower","last_synced_at":"2025-07-25T00:33:35.949Z","repository":{"id":65493453,"uuid":"582137399","full_name":"gmarland/lawnmower","owner":"gmarland","description":"A library to build VR layouts using HTML tags","archived":false,"fork":false,"pushed_at":"2023-07-08T18:10:20.000Z","size":638,"stargazers_count":34,"open_issues_count":0,"forks_count":1,"subscribers_count":4,"default_branch":"main","last_synced_at":"2025-07-04T05:53:32.290Z","etag":null,"topics":["stencil","stenciljs","stenciljs-components","three-js","threejs","vr","webvr","xr"],"latest_commit_sha":null,"homepage":"","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/gmarland.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2022-12-25T20:43:19.000Z","updated_at":"2024-10-06T18:01:28.000Z","dependencies_parsed_at":"2024-10-04T01:45:31.081Z","dependency_job_id":null,"html_url":"https://github.com/gmarland/lawnmower","commit_stats":{"total_commits":204,"total_committers":3,"mean_commits":68.0,"dds":0.1470588235294118,"last_synced_commit":"b8bef95fb623e8dc72ad8f714d6417e4e6a6e2b6"},"previous_names":[],"tags_count":3,"template":false,"template_full_name":null,"purl":"pkg:github/gmarland/lawnmower","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/gmarland%2Flawnmower","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/gmarland%2Flawnmower/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/gmarland%2Flawnmower/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/gmarland%2Flawnmower/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/gmarland","download_url":"https://codeload.github.com/gmarland/lawnmower/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/gmarland%2Flawnmower/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":266930916,"owners_count":24008239,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","status":"online","status_checked_at":"2025-07-24T02:00:09.469Z","response_time":99,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["stencil","stenciljs","stenciljs-components","three-js","threejs","vr","webvr","xr"],"created_at":"2024-09-24T20:50:58.304Z","updated_at":"2025-07-25T00:33:35.907Z","avatar_url":"https://github.com/gmarland.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# lawnmower\nlawnmower is s web component library that allows VR layouts to be built using HTML tags.\n\nThe 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.\n\nThe library uses \u003ca href=\"https://stenciljs.com\"\u003eStencil\u003c/a\u003e 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.\n\nUnder the hood, it is using \u003ca href=\"https://threejs.org\"\u003ethree.js\u003c/a\u003e for its 3D and most elements allow access to their implementation (in case you want to fiddle with ther functionality).\n\nEach tag described starts with lm, such as \u0026lt;lm-div\u0026gt;\u0026lt;/lm-div\u0026gt; and try to be analogous to their HTML counterpart when rendered into 3D.\n\nDocumentation for all the available tags can be located in the \u003ca href=\"https://github.com/gmarland/lawnmower/wiki\" target=\"_blank\"\u003eWiki\u003c/a\u003e\n\n## Installation\n\nYou can easily include lawnmower in an HTML file by linking to script and CSS file on the CDN:\n\n```html\n\u003chead\u003e\n  \u003cscript type=\"module\" src=\"https://lawnmowerjs.com/releases/0.0.3/lawnmower.esm.js\"\u003e\u003c/script\u003e\n  \u003cscript nomodule src=\"https://lawnmowerjs.com/releases/0.0.3/lawnmower.js\"\u003e\u003c/script\u003e\n  \u003clink rel=\"stylesheet\" type=\"text/css\" href=\"https://lawnmowerjs.com/releases/0.0.3/lawnmower.css\"\u003e\u003c/link\u003e\n\u003c/head\u003e\n```\n\nYou can download and include the release associated to this repository.\n\nYou can also install lawnmowerjs through npm:\n\n```bash\nnpm install lawnmowerjs\n```\n\n## Usage\n\nIn order to generate a VR scene, you just need to create a HTML page, include the required libraries and start laying things out.\n\nThe following HTML:\n\n```html\n\u003chtml\u003e\n    \u003chead\u003e\n        \u003clink rel=\"stylesheet\" type=\"text/css\" href=\"https://lawnmowerjs.com/releases/0.0.3/lawnmower.css\"\u003e\u003c/link\u003e\n        \u003cscript type=\"module\" src=\"https://lawnmowerjs.com/releases/0.0.3/lawnmower.esm.js\"\u003e\u003c/script\u003e\n        \u003cscript nomodule src=\"https://lawnmowerjs.com/releases/0.0.3/lawnmower.js\"\u003e\u003c/script\u003e\n    \u003c/head\u003e\n    \u003cbody\u003e\n        \u003clm-document id=\"main\" default-placement-location=\"1000\"\u003e\n            \u003cm-div margin=\"10\"\u003e\n               \u003clm-div background-color=\"#00ffff\" \n                          margin=\"20\" \n                          layout=\"Column\" \n                          item-vertical-align=\"Middle\" \n                          padding=\"20\"\u003e\n                \u003clm-video id=\"video-1\"\n                            src=\"http://commondatastorage.googleapis.com/gtv-videos-bucket/sample/BigBuckBunny.mp4\" \n                            placeholder=\"10\"\n                            width=\"500\"\u003e\u003c/lm-video\u003e\n                \u003clm-text id=\"text-1\" \n                            width=\"500\" \n                            text-alignment=\"Center\" \n                            font-color=\"#ffffff\" \n                            font-size=\"20\" \n                            background-color=\"#222222\" \n                            padding=\"15\"\u0026\u003e\n                    First text area\n      \n                    This is an example\n                \u003c/lm-text\u003e\n                \u003clm-image src=\"https://lawnmowerjs.com/examples/gwenny.jpg\" \n                              width=\"500\"\u003e\u003c/lm-image\u003e\n              \u003c/lm-div\u003e\n              \u003clm-text id=\"text-2\" \n                          font-color=\"#ffffff\" \n                          font-size=\"30\" \n                          background-color=\"#0f00f1\" \n                          padding=\"15\"\u003e\n                Second text area\n      \n                This is another example\n              \u003c/lm-text\u003e\n              \u003clm-asset \n                id=\"asset-1\"\n                active-animation=\"Walk\"\n                radius=\"400\" \n                y-rotation=\"90\"\n                src=\"https://github.khronos.org/glTF-Sample-Viewer-Release/assets/models/2.0/Fox/glTF/Fox.gltf\"\u003e\u003c/lm-asset\u003e\n            \u003c/lm-div\u003e\n        \u003c/lm-document\u003e\n  \u003c/body\u003e\n\u003c/html\u003e\n```\n\nWill render to the following 3D scene:\n\n```html\n\u003cimg src=\"https://lawnmowerjs.com/examples/ExampleSS.png\" /\u003e\n```\n\nThere is also a demo video to show how to build a basic scene here https://www.youtube.com/watch?v=lGbip-beDY4\n\nNOTE: Designing a scene is easier by setting vr-enabled=\"false\" on the lm-document and then re-enabling when you deploy the HTML page.\n\n\n## HTML Tags\n\nThe following tags are available for building your VR scene\n\n### lm-document\nlm-document is the root element for the VR layout. This must be the root element which all other lawnmower elements sit under.\n\n### lm-div\nThis 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.\n\n### lm-text\nThe 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.\n\n### lm-image\nThe 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.\n\n### lm-video\nThe 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.\n\n### lm-360video\nThe 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.\n\n### lm-asset\nThe 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.\n\n### lm-button\nThe 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.\n\n### lm-button\nThe 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.\n\nIt is worth noting that only one layout may be anabled at a time.\n\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fgmarland%2Flawnmower","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fgmarland%2Flawnmower","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fgmarland%2Flawnmower/lists"}