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 et.al.. 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
Table of Contents generated with DocToc
- Main Library for Large Arrays
- Screenshots Examples
- Example 3D Output of JSON3D4Aframe
- Molecule Models
- Images for the AFrame Sky
- Lesson Result of 3D Geometry
- UML Diagram of Editor4JSON Class
- JSON to Schema Generator
- Python Web-Server for Testing from shell
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
https://www.example.com/snowman_argeo.html. 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
Example 3D Output of JSON3D4Aframe
AFrame 3D - Standard
AFrame 3D - with Sky and 360 Degree Image
- Water Molecule - Sky 360 Degree - AFrame
- Cristal Lattice - Sky 360 Degree - AFrame
- Snow Man - Sky 360 Degree - AFrame
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.
- Snow Man - AR Geolocation - Durlach Saumarkt
- Snow Man - AR Geolocation - MB1
- Snow Man - AR Geolocation - MB2
- Snow Man - AR Geolocation - MWS
- Snow Man - AR Geolocation - IP1
- Snow Man - AR Geolocation - HL1
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:
Pattern Source: Hiro Pattern from AR-Toolkit
Pattern Source: Kanji Pattern from AR-Toolkit
Molecule Models can be turn and viewed from all sides. With AR.js you need to place the specified marker in the camera image
- Molecule Model Water - AFrame 3D Model create with JSON3D4Aframe this 3D-Model does not need mobile phone camera or marker to viewing the 3D model.
- Molecule Model Water - Kanji-Marker place a printed paper version of the Kanji-Marker in front of you mobile phone camera or webcam. Size of print-out 6cm x 6cm of black box.
- Created with JSON3D4Aframe
Images for the AFrame Sky
The following equirectangular images are used as 360 degree sky background:
- Cloud/Grass - Part of the HuginSample GitHub-Repository
- Aldara Park - WikiCommons - WikiCommon Info: Aldara Park
- Amphiteater im Mauerpark - Berlin - Wiki Commons - WikiCommons Info: Amphiteater - Berlin
- Magpupungko Beach 1 - WikiCommons - WikiCommons Info:
- Magpupungko Beach 2 - WikiCommons Info: (https://commons.wikimedia.org/wiki/File:Magpupungko_beach_area_02_spherical_360-degree_08-23-2017.jpg)
- River Rhine 1 - Cologne - GitHub Repository HuginSample
- River Rhine 2 - Cologne - GitHub Repository HuginSample
- River Rhine 3 - Cologne - GitHub Repository HuginSample
- River Rhine 4 - Cologne - GitHub Repository HuginSample
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
- HuginSample for example of 360 degree images that can be used as sky
- See WikiCommons2AFrame for generating 360 degree image views for a geo location.
- This repository was created for the Wikiversity learning resource about 3D Modelling.
- See also [Link Traversal Example in Aframe]Repository on GitHub
This is an rapid prototype as proof of concept for a learning resource. Some information about the code:
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
UML Diagram of Editor4JSON Class
JSON to Schema Generator
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.
python -m SimpleHTTPServer 8000
- Windows (install python):
python -m http.server 8000
- Check Aframe scene with:
- 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
JSCC. The schemes of the JSON subtree are stored in the folder
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
JSCCwould make more use of the JSON-Editor features. Check out an interactive demo (demo.html): http://jeremydorn.com/json-editor/
- FileSaver.js Developer Eli Grey provided the
FileSaver.jsthat is used to store created
JSCCfiles to the local filesystem.
JSCCuses the same mechanism of browsers, that allows a
- 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