JSON3D4Aframe 3.0.15

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 AFrame and AR.js

Online Demo

https://niebert.github.io/JSON3D4Aframe

Table of Contents generated with DocToc

• Main Library for Large Arrays
• Screenshots Examples
• Example 3D Output of JSON3D4Aframe
  • AFrame 3D - Standard
  • AFrame 3D - with Sky and 360 Degree Image
  • Marker Print Out
  • Hiro Marker
  • Kanji Marker
• Molecule Models
• Images for the AFrame Sky
• Lesson Result of 3D Geometry
  • See also
• UML Diagram of Editor4JSON Class
• JSON to Schema Generator
• Python Web-Server for Testing from shell
• Acknowledgement

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

• Aframe,
• Marker based AR or
• Location based AR

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 docs/js/editor4json.js https://github.com/niebert/JSON3D4Aframe/tree/master/docs

Screenshots Examples

Example 3D Output of JSON3D4Aframe

AFrame 3D - Standard

• Water Molecule - AFrame
• Cristal Lattice - AFrame
• Snow Man - AFrame

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

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

Print out the PDF with markers and use the Hiro marker in your webcam to display the 3D model. Pattern Source: Hiro Pattern from AR-Toolkit

• Water Molecule - Hiro Marker - Marker: PDF
• Cristal Lattice - Hiro Marker - Marker: PDF
• Planet System - Hiro Marker - Marker: PDF - by Ina Shashkova (2021) - see Wikiversity
• Snow Man - Hiro Marker - Marker: PDF

Kanji Marker

Print out the PDF with markers and use the Kanji marker in your webcam to display the 3D model. Pattern Source: Kanji Pattern from AR-Toolkit

• Water Molecule - Kanji Marker - Marker: PDF
• Cristal Lattice - Kanji Marker - Marker: PDF
• Snow Man - Kanji Marker - Marker: PDF

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

• 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

Equirectangular Scene in AFrame

Equirectangular images can be used in AFrame for a 360-degree panorama view.

• AFrame Example - Puy de Sancy
• Durlach - Saumarkt - Karlsruhe, Germany - Equirectangular Image - image is licensed under the Creative Commons Attribution-Share Alike 4.0 International license
• Rieselfelder Münster - Equirectangular Image - image is licensed under the Creative Commons Attribution-Share Alike 4.0 International license.
• Rheinauen - Cologne 1 - Equirectangular Image - image is licensed under the Creative Commons Attribution-Share Alike 4.0 International license.
• Rheinauen - Cologne 2 - Equirectangular Image - image is licensed under the Creative Commons Attribution-Share Alike 4.0 International license.
• Rheinauen - Cologne 3 - Equirectangular Image - image is licensed under the Creative Commons Attribution-Share Alike 4.0 International license.
• Rheinauen - Cologne 4 - Equirectangular Image - image is licensed under the Creative Commons Attribution-Share Alike 4.0 International license.
• Foschungsanlage Eusserthal
• Jelgava Palace - WikiCommons Source File - Uldins Bardins (2011) - image is licensed under the Creative Commons Attribution-Share Alike 4.0 International license. GeoLoc
• Aldara Park - WikiCommons Source File - Uldins Bardins (2011) image is licensed under the Creative Commons Attribution-Share Alike 4.0 International license. GeoLoc

Images for Planet Surface

• Earth Surface equirectangular Creative Commons on WikiCommons
• Moon Surface - equirectangular

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

• HuginSample for example of 360 degree images that can be used as sky a-sky in AFrame.
• 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

Rapid prototype

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

Editor4JSON

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

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

See also

• HuginSample - for examples to create your own 360-degree equirectangular images for sky-tag in Aframe.
• AR-Examples - Fork of Lee Stemkoskis repositories for AR.js and three.js examples (GitHub-Repo)

Acknowledgement

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): http://jeremydorn.com/json-editor/
• 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 https://github.com/Skalman/UglifyJS-online for the Online-Version of the Wrapper.
• Developers of ACE Code Editor https://ace.c9.io (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
• Jquery Plugin for CSV to load and save CSV files for interoperability
• 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