# AFrame - Template --{{0}}-- This library implements some macros for [AFrame](https://aframe.io), which allow loading 3D scenes, models or videos into [LiaScript](https://LiaScript.github.io). __Try it on LiaScript:__ https://liascript.github.io/course/?https://raw.githubusercontent.com/LiaTemplates/aframe/0.0.6/README.md __See the project on GitHub:__ https://github.com/liaTemplates/aframe --{{1}}-- There are three ways to use this template. The easiest way is to use the `import` statement and the URL of the raw text-file of this course or any other branch or version. But you can also copy the required functionality directly into the header of your Markdown document, see therefor the Implementation. And of course, you could also clone this project and change it, as you wish. {{1}} 1. Load the macros via `import: https://raw.githubusercontent.com/LiaTemplates/aframe/0.0.6/README.md` 2. Copy the definitions into your Project 3. Clone this repository on GitHub ## Macros --{{0}}-- This chapter describes a couple of macros, which can be used to embed 3D-scenes, load models, etc.

### `@AFRAME.scene` --{{0}}-- The most basic macro is `@AFRAME.scene`. Add this to the head of your Markdown code-block in order to indicate to LiaScript, that this code-snippet should be interpreted as an entire scene and rendered appropriately. ```` markdown ```html @AFRAME.scene

``` ```` **Result:** ```html @AFRAME.scene

``` ### `@AFRAME.sceneWithStyle` --{{0}}-- However, the previous example used the default styling method, which is defined by the macro `@AFRAME.style`. By using this macro, it is possible to overwrite these settings, change the width and height properties or to add a border. Note, the backticks around the style-definition are optional, as long as there is no comma within your definition, this will work. But if you have commas within your parameters, LiaScript will separate them by commas, to prevent this use backticks. ```` markdown ```html @AFRAME.sceneWithStyle(`width: 100%; height: 70vh`)

``` ```` ```html @AFRAME.sceneWithStyle(width: 100%; height: 55vh)

``` ### `@AFRAME.model` --{{0}}-- Sometimes it might be convenient to load only a model, for this purpose you can make use of a reference-macro. All the last two macro-calls are identical and would work perfectly for absolute URLs. However, if you use the first type, which looks like a Markdown-reference, your resource will still be treated as a link by other Markdown-interpreters. And most importantly, LiaScript knows that the parameter you pass, is a URL, and it will handle the URL translation for relative URLs. The title optional and a way for you, to provide some information about the content of, but LiaScript will ignore this at the moment. ```` markdown @[AFRAME.model](model/Stein_scan.glb "simply a model of a stone") similar to @AFRAME.model(model/Stein_scan.glb) or ``` html @AFRAME.model model/Stein_scan.glb ``` ```` **Result:** @[AFRAME.model](model/Stein_scan.glb "simply a model of a stone") ### `@AFRAME.modelWithStyle` --{{0}}-- Similar to the scene macros, you can also provide your own styling within this macro. The first parameter passed within brackets, is again the new styling definition, whereby the URL of the model is passed as the second one. LiaScript again, will handle the appropriate URL translation of relative paths. ``` @[AFRAME.modelWithStyle(`width: 50%`)](model/Stein_scan.glb "a model of a stone") ``` **Result:** @[AFRAME.modelWithStyle(`width: 50%`)](model/Stein_scan.glb "a model of a stone") ### `@AFRAME.image360` --{{0}}-- This macro will load an image as a 360 degree image and display it. ``` markdown @[AFRAME.image360](model/puydesancy.jpg "360 Degree image of Puy de Sancy, France") ``` **Result:** @[AFRAME.image360](model/puydesancy.jpg "360 Degree image of Puy de Sancy, France") ### `@AFRAME.image360WithStyle` --{{0}}-- Similar to all previous elements, load a 360 Degree image with custom styling. ``` markdown @[AFRAME.image360WithStyle(width: 350px; height: 350px)](model/puydesancy.jpg) ``` **Result:** @[AFRAME.image360WithStyle(width: 350px; height: 350px)](model/puydesancy.jpg) ### `@AFRAME.style` --{{0}}-- The basic `@AFRAME.style` macro defines the default styling properties, which are used as long as you do not use a `macroWithStyle`. You can still overwrite this macro and define your own default style, such that it is not required to come up with the custom styling again, again, and again. ```` markdown # Title ... ## Section ```` --{{1}}-- This can be done either globally, within the main definitions or per slide, simply by adding an HTML macro directly to the title of the section. {{1}} @[AFRAME.model](model/Stein_scan.glb "simply a model of a stone") ### Define your own --{{0}}-- Of course, it is also possible to define other custom macros, which are based on the macro set, that you have loaded. The example below shows, how a new macro `@custom_sphere` is defined. Everything within the body, which ranges from `@custom_sphere` to `@end` will be injected, wherever it appears within the document. The only thing that is parameterized here, is the radius of the sphere. The position of the internal parameters is marked via `@0` to `@9`. These markers will be replaced by the user defined parameters, before injection. ```` markdown ### Define your own @custom_sphere(1.5) --- @custom_sphere(3.141592) ```` @custom_sphere(1.5) --- @custom_sphere(3.141592) --{{1}}-- You can also have a look at the next slide, to see how the other macros were defined. ## Implementation --{{0}}-- All defined macros are basically extensions of the most general `@AFRAME.sceneWithStyle`. This macro only loads an `iframe` and adds some user defined code to the body. ```` html @AFRAME.style: width:100%; height:500px; border: 0px @AFRAME.model ``` html @AFRAME.scene

``` @end @AFRAME.modelWithStyle ``` html @AFRAME.sceneWithStyle(@0)

``` @end @AFRAME.image360 ``` html @AFRAME.scene

``` @end @AFRAME.image360WithStyle ``` html @AFRAME.sceneWithStyle(@0)

``` @end @AFRAME.scene: @AFRAME.sceneWithStyle(@AFRAME.style,```@0```) @AFRAME.sceneWithStyle @end ````