--{{0}}--
This library implements some macros for AFrame, which allow loading 3D scenes, models or videos into LiaScript.
Try it on LiaScript:
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}}
-
Load the macros via
import: https://raw.githubusercontent.com/LiaTemplates/aframe/0.0.6/README.md -
Copy the definitions into your Project
-
Clone this repository on GitHub
--{{0}}--
This chapter describes a couple of macros, which can be used to embed 3D-scenes, load models, etc.
--{{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.
```html @AFRAME.scene
<a-scene>
<a-box position="-1 0.5 -3" rotation="0 45 0" color="#4CC3D9"></a-box>
<a-sphere position="0 1.25 -5" radius="1.25" color="#EF2D5E"></a-sphere>
<a-cylinder position="1 0.75 -3" radius="0.5" height="1.5" color="#FFC65D"></a-cylinder>
<a-plane position="0 0 -4" rotation="-90 0 0" width="4" height="4" color="#7BC8A4"></a-plane>
<a-sky color="#ECECEC"></a-sky>
</a-scene>
```Result:
<a-scene>
<a-box position="-1 0.5 -3" rotation="0 45 0" color="#4CC3D9"></a-box>
<a-sphere position="0 1.25 -5" radius="1.25" color="#EF2D5E"></a-sphere>
<a-cylinder position="1 0.75 -3" radius="0.5" height="1.5" color="#FFC65D"></a-cylinder>
<a-plane position="0 0 -4" rotation="-90 0 0" width="4" height="4" color="#7BC8A4"></a-plane>
<a-sky color="#ECECEC"></a-sky>
</a-scene> --{{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.
```html @AFRAME.sceneWithStyle(`width: 100%; height: 70vh`)
<a-scene>
<a-sky src="https://raw.githubusercontent.com/aframevr/aframe/v0.9.0/examples/boilerplate/panorama/puydesancy.jpg" rotation="0 -130 0"></a-sky>
<a-text font="kelsonsans" value="Puy de Sancy, France" width="6" position="-2.5 0.25 -1.5"
rotation="0 15 0"></a-text>
</a-scene>
```<a-scene>
<a-sky src="https://raw.githubusercontent.com/aframevr/aframe/v0.9.0/examples/boilerplate/panorama/puydesancy.jpg" rotation="0 -130 0"></a-sky>
<a-text font="kelsonsans" value="Puy de Sancy, France" width="6" position="-2.5 0.25 -1.5"
rotation="0 15 0"></a-text>
</a-scene> --{{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.
@[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:
--{{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%)
--{{0}}--
This macro will load an image as a 360 degree image and display it.
@[AFRAME.image360](model/puydesancy.jpg "360 Degree image of Puy de Sancy, France")
Result:
--{{0}}--
Similar to all previous elements, load a 360 Degree image with custom styling.
@[AFRAME.image360WithStyle(width: 350px; height: 350px)](model/puydesancy.jpg)Result:
@AFRAME.image360WithStyle(width: 350px; height: 350px)
--{{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.
<!--
import: https://raw.githubusercontent.com/liaTemplates/aframe/master/README.md
@AFRAME.style: width:100%; height:60vh; border: 3px dashed red;
-->
# Title
...
## Section
<!--
@AFRAME.style: width:100%; height:60vh; border: 3px dashed red;
--> --{{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}}
--{{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.
### Define your own
<!--
@custom_sphere
``` html @AFRAME.scene
<a-scene>
<a-sphere position="0 1.25 -5" radius="@0" color="#EF2D5E"></a-sphere>
<a-plane position="0 0 -4" rotation="-90 0 0" width="4" height="4" color="#7BC8A4"></a-plane>
<a-sky color="#ECECEC"></a-sky>
</a-scene>
```
@end
-->
@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.
--{{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.
@AFRAME.style: width:100%; height:500px; border: 0px
@AFRAME.model
``` html @AFRAME.scene
<a-scene renderer="colorManagement: true;">
<a-assets>
<a-asset-item id="glbtestmodel" src="@0"></a-asset-item>
</a-assets>
<a-entity id="glbtest" gltf-model="#glbtestmodel" position="0 1 -2"></a-entity>
</a-scene>
```
@end
@AFRAME.modelWithStyle
``` html @AFRAME.sceneWithStyle(@0)
<a-scene renderer="colorManagement: true;">
<a-assets>
<a-asset-item id="glbtestmodel" src="@1"></a-asset-item>
</a-assets>
<a-entity id="glbtest" gltf-model="#glbtestmodel" position="0 1 -2"></a-entity>
</a-scene>
```
@end
@AFRAME.image360
``` html @AFRAME.scene
<a-scene>
<a-sky src="@0" rotation="0 -130 0"></a-sky>
</a-scene>
```
@end
@AFRAME.image360WithStyle
``` html @AFRAME.sceneWithStyle(@0)
<a-scene renderer="colorManagement: true;">
<a-sky src="@1" rotation="0 -130 0"></a-sky>
</a-scene>
```
@end
@AFRAME.scene: @AFRAME.sceneWithStyle(@AFRAME.style,```@0```)
@AFRAME.sceneWithStyle
<lia-keep>
<iframe style="@0" srcdoc='<!DOCTYPE html>
<html>
<head>
<script src="https://aframe.io/releases/1.2.0/aframe.min.js"></script>
<script src="https://unpkg.com/[email protected]/dist/aframe-extras.min.js"></script>
<script src="https://unpkg.com/[email protected]/dist/aframe-orbit-controls.min.js"></script>
</head>
<body>
@1
</body>
</html>'></iframe>
</lia-keep>
@end