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
Shell
Branch: master
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
docs
LICENSE
README.md
create_repo_folder.sh
update_libs.sh

README.md

JSON3D4Aframe

The abbreviation stands for JSON editor for 3D objects generate FOR (4) Aframe.

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

Main Library for Large Arrays

Main library to handle large arrays is docs/js/editor4json.js https://github.com/niebert/JSON3D4Aframe/tree/master/docs

Screenshot Examples

AFrame Example AR.js Kanji Marker Example

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

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 (duer 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

Acknowledgement

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

  • 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
  • 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
You can’t perform that action at this time.