{"id":20661001,"url":"https://github.com/liatemplates/aframe","last_synced_at":"2026-03-11T01:02:50.942Z","repository":{"id":107256824,"uuid":"187668904","full_name":"LiaTemplates/aframe","owner":"LiaTemplates","description":"Template for integrating aframe into LiaScript courses","archived":false,"fork":false,"pushed_at":"2021-12-20T20:07:04.000Z","size":9525,"stargazers_count":1,"open_issues_count":0,"forks_count":0,"subscribers_count":2,"default_branch":"master","last_synced_at":"2025-01-17T12:16:32.335Z","etag":null,"topics":["3d","aframe","liascript","liascript-template","template","webvr"],"latest_commit_sha":null,"homepage":"https://liascript.github.io/course/?https://raw.githubusercontent.com/liaTemplates/aframe/master/README.md","language":null,"has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/LiaTemplates.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"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":"2019-05-20T15:36:41.000Z","updated_at":"2022-02-22T10:44:15.000Z","dependencies_parsed_at":null,"dependency_job_id":"4192979b-01e2-4cd4-a9da-5612f6479e3d","html_url":"https://github.com/LiaTemplates/aframe","commit_stats":null,"previous_names":[],"tags_count":4,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/LiaTemplates%2Faframe","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/LiaTemplates%2Faframe/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/LiaTemplates%2Faframe/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/LiaTemplates%2Faframe/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/LiaTemplates","download_url":"https://codeload.github.com/LiaTemplates/aframe/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":242788043,"owners_count":20185208,"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","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":["3d","aframe","liascript","liascript-template","template","webvr"],"created_at":"2024-11-16T19:06:46.060Z","updated_at":"2025-12-13T13:18:03.374Z","avatar_url":"https://github.com/LiaTemplates.png","language":null,"funding_links":[],"categories":[],"sub_categories":[],"readme":"\u003c!--\nauthor:   André Dietrich\n\nemail:    LiaScript@web.de\n\nversion:  0.0.6\n\nlanguage: en\n\nnarrator: US English Female\n\nlogo:     demo.gif\n\ncomment:  Template for using A-Frame in LiaScript for creating simple 3D scenes\n          and add augmented reality movies and images.\n\n\n@AFRAME.style: width:100%; height:500px; border: 0px\n\n@AFRAME.model\n``` html @AFRAME.scene\n\u003ca-scene renderer=\"colorManagement: true;\"\u003e\n  \u003ca-assets\u003e\n    \u003ca-asset-item id=\"glbtestmodel\" src=\"@0\"\u003e\u003c/a-asset-item\u003e\n  \u003c/a-assets\u003e\n  \u003ca-entity id=\"glbtest\" gltf-model=\"#glbtestmodel\" position=\"0 1 -2\"\u003e\u003c/a-entity\u003e\n\u003c/a-scene\u003e\n```\n@end\n\n@AFRAME.modelWithStyle\n``` html @AFRAME.sceneWithStyle(@0)\n\u003ca-scene renderer=\"colorManagement: true;\"\u003e\n  \u003ca-assets\u003e\n    \u003ca-asset-item id=\"glbtestmodel\" src=\"@1\"\u003e\u003c/a-asset-item\u003e\n  \u003c/a-assets\u003e\n  \u003ca-entity id=\"glbtest\" gltf-model=\"#glbtestmodel\" position=\"0 1 -2\"\u003e\u003c/a-entity\u003e\n\u003c/a-scene\u003e\n```\n@end\n\n@AFRAME.image360\n``` html @AFRAME.scene\n\u003ca-scene\u003e\n  \u003ca-sky src=\"@0\" rotation=\"0 -130 0\"\u003e\u003c/a-sky\u003e\n\u003c/a-scene\u003e\n```\n@end\n\n@AFRAME.image360WithStyle\n``` html @AFRAME.sceneWithStyle(@0)\n\u003ca-scene renderer=\"colorManagement: true;\"\u003e\n  \u003ca-sky src=\"@1\" rotation=\"0 -130 0\"\u003e\u003c/a-sky\u003e\n\u003c/a-scene\u003e\n```\n@end\n\n@AFRAME.scene: @AFRAME.sceneWithStyle(@AFRAME.style,```@0```)\n\n@AFRAME.sceneWithStyle\n\u003clia-keep\u003e\n\u003ciframe style=\"@0\" srcdoc='\u003c!DOCTYPE html\u003e\n\u003chtml\u003e\n  \u003chead\u003e\n    \u003cscript src=\"https://aframe.io/releases/1.2.0/aframe.min.js\"\u003e\u003c/script\u003e\n    \u003cscript src=\"https://unpkg.com/aframe-extras@3.3.0/dist/aframe-extras.min.js\"\u003e\u003c/script\u003e\n    \u003cscript src=\"https://unpkg.com/aframe-orbit-controls@1.3.0/dist/aframe-orbit-controls.min.js\"\u003e\u003c/script\u003e\n  \u003c/head\u003e\n  \u003cbody\u003e\n  @1\n  \u003c/body\u003e\n\u003c/html\u003e'\u003e\u003c/iframe\u003e\n\u003c/lia-keep\u003e\n@end\n--\u003e\n\n# AFrame - Template\n\n                         --{{0}}--\nThis library implements some macros for [AFrame](https://aframe.io), which allow\nloading 3D scenes, models or videos into\n[LiaScript](https://LiaScript.github.io).\n\n__Try it on LiaScript:__\n\nhttps://liascript.github.io/course/?https://raw.githubusercontent.com/LiaTemplates/aframe/0.0.6/README.md\n\n__See the project on GitHub:__\n\nhttps://github.com/liaTemplates/aframe\n\n                         --{{1}}--\nThere are three ways to use this template. The easiest way is to use the\n`import` statement and the URL of the raw text-file of this course or any other\nbranch or version. But you can also copy the required functionality directly\ninto the header of your Markdown document, see therefor the Implementation. And\nof course, you could also clone this project and change it, as you wish.\n\n                           {{1}}\n1. Load the macros via\n\n   `import: https://raw.githubusercontent.com/LiaTemplates/aframe/0.0.6/README.md`\n\n2. Copy the definitions into your Project\n\n3. Clone this repository on GitHub\n\n## Macros\n\n                         --{{0}}--\nThis chapter describes a couple of macros, which can be used to embed 3D-scenes,\nload models, etc.\n\n\u003cdiv style=\"width:100%;height:0;padding-bottom:54%;position:relative;\"\u003e\u003ciframe src=\"https://giphy.com/embed/5q0w2TRn89GdS9Oso7\" width=\"100%\" height=\"100%\" style=\"position:absolute\" frameBorder=\"0\" class=\"giphy-embed\" allowFullScreen\u003e\u003c/iframe\u003e\u003c/div\u003e\u003cp\u003e\u003ca href=\"https://giphy.com/gifs/5q0w2TRn89GdS9Oso7\"\u003evia GIPHY\u003c/a\u003e\u003c/p\u003e\n\n### `@AFRAME.scene`\n\n                         --{{0}}--\nThe most basic macro is `@AFRAME.scene`. Add this to the head of your Markdown\ncode-block in order to indicate to LiaScript, that this code-snippet should be\ninterpreted as an entire scene and rendered appropriately.\n\n```` markdown\n```html @AFRAME.scene\n\u003ca-scene\u003e\n  \u003ca-box position=\"-1 0.5 -3\" rotation=\"0 45 0\" color=\"#4CC3D9\"\u003e\u003c/a-box\u003e\n  \u003ca-sphere position=\"0 1.25 -5\" radius=\"1.25\" color=\"#EF2D5E\"\u003e\u003c/a-sphere\u003e\n  \u003ca-cylinder position=\"1 0.75 -3\" radius=\"0.5\" height=\"1.5\" color=\"#FFC65D\"\u003e\u003c/a-cylinder\u003e\n  \u003ca-plane position=\"0 0 -4\" rotation=\"-90 0 0\" width=\"4\" height=\"4\" color=\"#7BC8A4\"\u003e\u003c/a-plane\u003e\n  \u003ca-sky color=\"#ECECEC\"\u003e\u003c/a-sky\u003e\n\u003c/a-scene\u003e\n```\n````\n\n**Result:**\n\n```html @AFRAME.scene\n\u003ca-scene\u003e\n  \u003ca-box position=\"-1 0.5 -3\" rotation=\"0 45 0\" color=\"#4CC3D9\"\u003e\u003c/a-box\u003e\n  \u003ca-sphere position=\"0 1.25 -5\" radius=\"1.25\" color=\"#EF2D5E\"\u003e\u003c/a-sphere\u003e\n  \u003ca-cylinder position=\"1 0.75 -3\" radius=\"0.5\" height=\"1.5\" color=\"#FFC65D\"\u003e\u003c/a-cylinder\u003e\n  \u003ca-plane position=\"0 0 -4\" rotation=\"-90 0 0\" width=\"4\" height=\"4\" color=\"#7BC8A4\"\u003e\u003c/a-plane\u003e\n  \u003ca-sky color=\"#ECECEC\"\u003e\u003c/a-sky\u003e\n\u003c/a-scene\u003e\n```\n\n### `@AFRAME.sceneWithStyle`\n\n                         --{{0}}--\nHowever, the previous example used the default styling method, which is defined\nby the macro `@AFRAME.style`. By using this macro, it is possible to overwrite\nthese settings, change the width and height properties or to add a border. Note,\nthe backticks around the style-definition are optional, as long as there is no\ncomma within your definition, this will work. But if you have commas within\nyour parameters, LiaScript will separate them by commas, to prevent this use\nbackticks.\n\n```` markdown\n```html @AFRAME.sceneWithStyle(`width: 100%; height: 70vh`)\n\u003ca-scene\u003e\n  \u003ca-sky src=\"https://raw.githubusercontent.com/aframevr/aframe/v0.9.0/examples/boilerplate/panorama/puydesancy.jpg\" rotation=\"0 -130 0\"\u003e\u003c/a-sky\u003e\n\n  \u003ca-text font=\"kelsonsans\" value=\"Puy de Sancy, France\" width=\"6\" position=\"-2.5 0.25 -1.5\"\n  rotation=\"0 15 0\"\u003e\u003c/a-text\u003e\n\u003c/a-scene\u003e\n```\n````\n\n```html @AFRAME.sceneWithStyle(width: 100%; height: 55vh)\n\u003ca-scene\u003e\n  \u003ca-sky src=\"https://raw.githubusercontent.com/aframevr/aframe/v0.9.0/examples/boilerplate/panorama/puydesancy.jpg\" rotation=\"0 -130 0\"\u003e\u003c/a-sky\u003e\n\n  \u003ca-text font=\"kelsonsans\" value=\"Puy de Sancy, France\" width=\"6\" position=\"-2.5 0.25 -1.5\"\n  rotation=\"0 15 0\"\u003e\u003c/a-text\u003e\n\u003c/a-scene\u003e\n```\n\n### `@AFRAME.model`\n\n                         --{{0}}--\nSometimes it might be convenient to load only a model, for this purpose you can\nmake use of a reference-macro. All the last two macro-calls are identical and\nwould work perfectly for absolute URLs. However, if you use the first type,\nwhich looks like a Markdown-reference, your resource will still be treated as a\nlink by other Markdown-interpreters. And most importantly, LiaScript knows that\nthe parameter you pass, is a URL, and it will handle the URL translation for\nrelative URLs. The title optional and a way for you, to provide some information\nabout the content of, but LiaScript will ignore this at the moment.\n\n```` markdown\n@[AFRAME.model](model/Stein_scan.glb \"simply a model of a stone\")\n\nsimilar to\n\n@AFRAME.model(model/Stein_scan.glb)\n\nor\n\n``` html @AFRAME.model\nmodel/Stein_scan.glb\n```\n````\n\n**Result:**\n\n@[AFRAME.model](model/Stein_scan.glb \"simply a model of a stone\")\n\n\n### `@AFRAME.modelWithStyle`\n\n                         --{{0}}--\nSimilar to the scene macros, you can also provide your own styling within this\nmacro. The first parameter passed within brackets, is again the new styling\ndefinition, whereby the URL of the model is passed as the second one. LiaScript\nagain, will handle the appropriate URL translation of relative paths.\n\n```\n@[AFRAME.modelWithStyle(`width: 50%`)](model/Stein_scan.glb \"a model of a stone\")\n\n```\n\n**Result:**\n\n@[AFRAME.modelWithStyle(`width: 50%`)](model/Stein_scan.glb \"a model of a stone\")\n\n\n### `@AFRAME.image360`\n\n                         --{{0}}--\nThis macro will load an image as a 360 degree image and display it.\n\n``` markdown\n@[AFRAME.image360](model/puydesancy.jpg \"360 Degree image of Puy de Sancy, France\")\n\n```\n\n**Result:**\n\n@[AFRAME.image360](model/puydesancy.jpg \"360 Degree image of Puy de Sancy, France\")\n\n### `@AFRAME.image360WithStyle`\n\n                         --{{0}}--\nSimilar to all previous elements, load a 360 Degree image with custom styling.\n\n``` markdown\n@[AFRAME.image360WithStyle(width: 350px; height: 350px)](model/puydesancy.jpg)\n```\n\n**Result:**\n\n@[AFRAME.image360WithStyle(width: 350px; height: 350px)](model/puydesancy.jpg)\n\n### `@AFRAME.style`\n\u003c!--\n@AFRAME.style: width:100%; height:60vh; border: 3px dashed red;\n--\u003e\n\n                         --{{0}}--\nThe basic `@AFRAME.style` macro defines the default styling properties, which\nare used as long as you do not use a `macroWithStyle`. You can still overwrite\nthis macro and define your own default style, such that it is not required to\ncome up with the custom styling again, again, and again.\n\n```` markdown\n\u003c!--\nimport: https://raw.githubusercontent.com/liaTemplates/aframe/master/README.md\n\n@AFRAME.style: width:100%; height:60vh; border: 3px dashed red;\n--\u003e\n\n# Title\n\n...\n\n## Section\n\u003c!--\n@AFRAME.style: width:100%; height:60vh; border: 3px dashed red;\n--\u003e\n````\n\n                         --{{1}}--\nThis can be done either globally, within the main definitions or per slide,\nsimply by adding an HTML macro directly to the title of the section.\n\n\n                           {{1}}\n@[AFRAME.model](model/Stein_scan.glb \"simply a model of a stone\")\n\n### Define your own\n\u003c!--\n@custom_sphere\n``` html @AFRAME.scene\n\u003ca-scene\u003e\n  \u003ca-sphere position=\"0 1.25 -5\" radius=\"@0\" color=\"#EF2D5E\"\u003e\u003c/a-sphere\u003e\n  \u003ca-plane position=\"0 0 -4\" rotation=\"-90 0 0\" width=\"4\" height=\"4\" color=\"#7BC8A4\"\u003e\u003c/a-plane\u003e\n  \u003ca-sky color=\"#ECECEC\"\u003e\u003c/a-sky\u003e\n\u003c/a-scene\u003e\n```\n@end\n--\u003e\n\n                         --{{0}}--\nOf course, it is also possible to define other custom macros, which are based on\nthe macro set, that you have loaded. The example below shows, how a new macro\n`@custom_sphere` is defined. Everything within the body, which ranges from\n`@custom_sphere` to `@end` will be injected, wherever it appears within the\ndocument. The only thing that is parameterized here, is the radius of the\nsphere. The position of the internal parameters is marked via `@0` to `@9`.\nThese markers will be replaced by the user defined parameters, before injection.\n\n\n```` markdown\n### Define your own\n\u003c!--\n@custom_sphere\n``` html @AFRAME.scene\n\u003ca-scene\u003e\n  \u003ca-sphere position=\"0 1.25 -5\" radius=\"@0\" color=\"#EF2D5E\"\u003e\u003c/a-sphere\u003e\n  \u003ca-plane position=\"0 0 -4\" rotation=\"-90 0 0\" width=\"4\" height=\"4\" color=\"#7BC8A4\"\u003e\u003c/a-plane\u003e\n  \u003ca-sky color=\"#ECECEC\"\u003e\u003c/a-sky\u003e\n\u003c/a-scene\u003e\n```\n@end\n--\u003e\n\n@custom_sphere(1.5)\n---\n@custom_sphere(3.141592)\n````\n\n@custom_sphere(1.5)\n\n---\n\n@custom_sphere(3.141592)\n\n\n                         --{{1}}--\nYou can also have a look at the next slide, to see how the other macros were\ndefined.\n\n\n## Implementation\n\n                         --{{0}}--\nAll defined macros are basically extensions of the most general\n`@AFRAME.sceneWithStyle`. This macro only loads an `iframe` and adds some user\ndefined code to the body.\n\n```` html\n@AFRAME.style: width:100%; height:500px; border: 0px\n\n@AFRAME.model\n``` html @AFRAME.scene\n\u003ca-scene renderer=\"colorManagement: true;\"\u003e\n  \u003ca-assets\u003e\n    \u003ca-asset-item id=\"glbtestmodel\" src=\"@0\"\u003e\u003c/a-asset-item\u003e\n  \u003c/a-assets\u003e\n  \u003ca-entity id=\"glbtest\" gltf-model=\"#glbtestmodel\" position=\"0 1 -2\"\u003e\u003c/a-entity\u003e\n\u003c/a-scene\u003e\n```\n@end\n\n@AFRAME.modelWithStyle\n``` html @AFRAME.sceneWithStyle(@0)\n\u003ca-scene renderer=\"colorManagement: true;\"\u003e\n  \u003ca-assets\u003e\n    \u003ca-asset-item id=\"glbtestmodel\" src=\"@1\"\u003e\u003c/a-asset-item\u003e\n  \u003c/a-assets\u003e\n  \u003ca-entity id=\"glbtest\" gltf-model=\"#glbtestmodel\" position=\"0 1 -2\"\u003e\u003c/a-entity\u003e\n\u003c/a-scene\u003e\n```\n@end\n\n@AFRAME.image360\n``` html @AFRAME.scene\n\u003ca-scene\u003e\n  \u003ca-sky src=\"@0\" rotation=\"0 -130 0\"\u003e\u003c/a-sky\u003e\n\u003c/a-scene\u003e\n```\n@end\n\n@AFRAME.image360WithStyle\n``` html @AFRAME.sceneWithStyle(@0)\n\u003ca-scene renderer=\"colorManagement: true;\"\u003e\n  \u003ca-sky src=\"@1\" rotation=\"0 -130 0\"\u003e\u003c/a-sky\u003e\n\u003c/a-scene\u003e\n```\n@end\n\n@AFRAME.scene: @AFRAME.sceneWithStyle(@AFRAME.style,```@0```)\n\n@AFRAME.sceneWithStyle\n\u003clia-keep\u003e\n\u003ciframe style=\"@0\" srcdoc='\u003c!DOCTYPE html\u003e\n\u003chtml\u003e\n  \u003chead\u003e\n    \u003cscript src=\"https://aframe.io/releases/1.2.0/aframe.min.js\"\u003e\u003c/script\u003e\n    \u003cscript src=\"https://unpkg.com/aframe-extras@3.3.0/dist/aframe-extras.min.js\"\u003e\u003c/script\u003e\n    \u003cscript src=\"https://unpkg.com/aframe-orbit-controls@1.3.0/dist/aframe-orbit-controls.min.js\"\u003e\u003c/script\u003e\n  \u003c/head\u003e\n  \u003cbody\u003e\n  @1\n  \u003c/body\u003e\n\u003c/html\u003e'\u003e\u003c/iframe\u003e\n\u003c/lia-keep\u003e\n@end\n````\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fliatemplates%2Faframe","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fliatemplates%2Faframe","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fliatemplates%2Faframe/lists"}