Skip to content

This repository provides a generator for a 3D scene in AFrame with primitives like cubes, planes, spheres or general boxes. Color, position, and size can be controlled, loaded and saved as JSON and exported to AFrame and AR.js

Switch branches/tags
Go to file

Latest commit


Git stats


Failed to load latest commit information.
Latest commit message
Commit time

JSON3D4Aframe 2.0.5

The abbreviation stands for JSON editor for 3D objects generate FOR (4) Aframe. Furthermore JSON3D4Aframe is able to export the 3D model in JSON format to ÀR.js, which is a library created by Jermome Etienne and the GeoAR capabilities are added by Nicolo Carpignoli Without their great work this small tool for the Wikiversity learning resource about 3D Modelling would not exist.

This repository provides a generator for a 3D scene in AFrame with primitives like cubes, planes, spheres or general boxes. Color, position, and size can be controlled, loaded and saved as JSON and exported to AFrame and AR.js

Online Demo

Table of Contents generated with DocToc

Demo Files

Demo 3D files are provided to you in the folder json3d/. The files can be loaded with JSON3D4Aframe and you can use them for a quick start, modifiy the 3D models and export them to

Location based AR

JSON3D4Aframe is able to generate a location based AR, i.e. you can place the generated 3D model a specific geolocation (e.g. the school yard or at a Real World Lab. The exported GeoAR files (e.g. snowman_argeo.html) can be placed on a web server with https:// and then you display the website with your browser on you mobile device e.g. with the URL For testing you can store your 3D models on GitHub pages or GitLab repository and host your files there for testing purpose.

Main Library for Large Arrays

Main library to handle large arrays is docs/js/editor4json.js

Screenshots Examples

AFrame Example AR.js Kanji Marker Example

Example 3D Output of JSON3D4Aframe

AFrame 3D - Standard

AFrame 3D - with Sky and 360 Degree Image

AR Geolocation 3D - Examples

Copy the source code of the files and replace the geolocation for latitude and longitude to your geolocation where you want to place the snowman.

Marker Print Out

For the following examples you need a printout of markers that are place in front of your webcam of your laptop, tablet or smartphone camera. You can print out the PDF document. Instead holding the marker in the web camera image you can place the marker on the table and view the selected marker in the camera image of your tablet or smartphone. You can also use a VR headset with the following examples:

Hiro Marker

Pattern Source: Hiro Pattern from AR-Toolkit

Kanji Marker

Pattern Source: Kanji Pattern from AR-Toolkit

Molecule Models

Molecule Models can be turn and viewed from all sides. With AR.js you need to place the specified marker in the camera image

Images for the AFrame Sky

The following equirectangular images are used as 360 degree sky background:

Lesson Result of 3D Geometry

This tool was developed as support tool for a learning resource about 3D modelling in Wikiversity. Think of using 3D models in a seasonal context:

  • Snowman AFrame no markers required - direct display
  • The mathematical learning objective is to plan and organize geometric primitives like spheres, boxes, cones, planes, triangle in a 3D coordinate system and see how a special target 3D model evolves.
  • start with an initialize model and explore the Save 3D export options for the pre-loaded 3D models. You can also press Examples 3D to explore the basic concept of using AFrame models and AR.js in JSON3D4Aframe

See also

Rapid prototype

This is an rapid prototype as proof of concept for a learning resource. Some information about the code:


The Javascript class Editor4JSON is a JSON editor for large arrays. 3D models can have a large number of 3D primitives. The JSON editor create by Jeremy Dorn is great library, but the browsers will run out of memory if the JSON is too large.

Editor4JSON is specially design for large arrays.

Generation of HTML code for Aframe is created by a method of the JSON Editor Editor4JSON and only the editing of a single Object will be performed in the underlying JSON editor. The function of the library is defined with method generateHTML() in the file docs/js/editor4json.js.

UML Diagram of Editor4JSON Class

UML Diagram of JS Class Editor4JSON

JSON to Schema Generator

Used the following tool that creates a JSON schema for a provided JSON file. Used the given JSON file to create the JSON Schema with JSON2schema.html.

Python Web-Server for Testing from shell

Some Aframe 3D-objects are visisible if the aframe 3D scene was loaded from a web server (due to cross-site scripting security feature). E.g. text elements with fonts will not be displayed. To check the Aframe 3D scene with all feature start a webserver with python from shell. the current directory is used as root directory for the web server.

  • Linux/Mac: python -m SimpleHTTPServer 8000
  • Windows (install python): python -m http.server 8000
  • Check Aframe scene with: http://localhost:8000


Special thanks to the following individual developers and teams of OpenSource JavaScript projects:

  • AFrame is the WebVR framework that renders the geometric primitives on HTML canvas handles the 3D operations in the space for the defined 3D elements in the Aframe scene.
  • JSON-Editor by Jeremy Dorn. The JSON Editor takes a JSON Schema and uses it to generate an HTML form. The JSON-Editor is partially used to edit JSON file of the Javascript Project in JSCC . The schemes of the JSON subtree are stored in the folder /tpl of the JavascriptClassCreator. The full potential of the JSON-Editor was not used in JSCC . This can be approved in the future. The JSON-Editor of Jeremy Dorn has full support for JSON Schema version 3 and 4 and can integrate with several popular CSS frameworks (bootstrap, foundation, and jQueryUI). This would lead to major code reduction of JSCC . Refactoring of JSCC would make more use of the JSON-Editor features. Check out an interactive demo (demo.html):
  • Developer Mihai Bazon create UglifyJS, a great tool to handle and parse Javascript Code and minify the Javascript code (see Source Code of UglifyJS).
  • The wrapper for UglifyJS is written Dan Wolff. His UglifyJS-Online example is used to minify/compress the exported Javascript code of generated JS Classes (For Online Example of the UglifyJS-Wrapper see source code on for the Online-Version of the Wrapper.
  • Developers of ACE Code Editor (Javascript Editing uses the Editor in iFrames)
  • FileSaver.js Developer Eli Grey provided the FileSaver.js that is used to store created JSCC files to the local filesystem. JSCC uses the same mechanism of browsers, that allows a Save as... in the context menu of a web pages or image. So not uncontrolled write access to your file system is implemented, because users have to select the locations in which the user whats to store the file (e.g. JSON, Javascript or HTML).
  • JointJS JointJS is a JavaScript diagramming library. It can be used to create either static diagrams. JointJS is used in this project to create UML-diagrams, that are interactive diagramming in conjunction and application builder in Javascript.
  • Inheritage for JavaScript with protoypes by Gavin Kistner
  • 3 ways to define a JavaScript class by Stoyan Stefanov
  • JQuery is used for the theme and standard operations in the Document Object Model (DOM) of HTML-pages. The JQuery-Themeroller was used to create a JQuery theme for JSCC.
  • FontAwesome by Dave Gandy used for the icons in HTML buttons


This repository provides a generator for a 3D scene in AFrame with primitives like cubes, planes, spheres or general boxes. Color, position, and size can be controlled, loaded and saved as JSON and exported to AFrame and AR.js




No packages published