A-Frame for LiaScript: 3D and VR Scenes in Your Course

3D visualization transforms abstract concepts in mathematics, science, and engineering into something students can explore spatially. The aframe template integrates A-Frame — Mozilla’s WebXR/WebGL framework — into LiaScript.

Write A-Frame HTML in a code block and get an interactive 3D scene (or VR environment with a headset) embedded directly in the course.

Quick Start

<!--
import: https://raw.githubusercontent.com/LiaTemplates/aframe/0.0.6/README.md
-->

Macro 1: @AFRAME.scene — Render an A-Frame Scene

Place @AFRAME.scene in the header of an HTML code block containing A-Frame markup.

```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>
```

Try it live — drag to orbit, scroll to zoom:

Macro 2: @AFRAME.sceneWithStyle(style) — Custom Container Size

Control width, height, or border of the scene container:

```html @AFRAME.sceneWithStyle("height: 400px; width: 100%;")
<a-scene>
  <a-box position="0 1 -3" color="#4CC3D9"></a-box>
  <a-sky color="#ECECEC"></a-sky>
</a-scene>
```

Macro 3: @[AFRAME.model](url) — Load a .glb 3D Model

Load an external .glb model file as a scene:

@[AFRAME.model](https://cdn.jsdelivr.net/gh/KhronosGroup/glTF-Sample-Models/2.0/Duck/glTF-Binary/Duck.glb)

For a custom container style:

@[AFRAME.modelWithStyle("height: 500px;")](https://example.com/model.glb)

Macro 4: @[AFRAME.image360](url) — 360° Panorama

Load an equirectangular panorama image as a 360° scene:

@[AFRAME.image360](https://example.com/panorama.jpg)

A-Frame HTML Reference

Common Attributes

Example: Coordinate Axes Visualization

```html @AFRAME.scene
<a-scene>
  <!-- X axis (red) -->
  <a-box position="1 0 0" scale="2 0.05 0.05" color="red"></a-box>
  <!-- Y axis (green) -->
  <a-box position="0 1 0" scale="0.05 2 0.05" color="green"></a-box>
  <!-- Z axis (blue) -->
  <a-box position="0 0 1" scale="0.05 0.05 2" color="blue"></a-box>
  <a-sky color="#222"></a-sky>
</a-scene>
```

See the RGB axes rendered in 3D — drag to inspect from any angle:

Full Template Demo

Use Cases

3D geometry education — Visualize polyhedra, coordinate systems, and spatial transformations in interactive 3D.

Architecture and design courses — Load .glb models of buildings or structures for interactive inspection.

Virtual lab environments — Create 3D representations of lab setups with labeled components for pre-lab orientation.

360° virtual field trips — Embed panoramic images of locations (geological sites, historical places, biology habitats) for immersive virtual tours.

VR-ready learning — Students with VR headsets can enter the scene in full VR directly from the course page.

Technical Facts

Try It

Related Templates

• Pannellum — 360° panoramas with hotspot annotations
• jscad — parametric 3D CAD modeling with JSCAD
• VTK — scientific 3D visualization (meshes, volumes, isosurfaces)
• BeforeAndAfter — image slider for before/after comparisons