3D Modelling/Create 3D Models/JSON3D4Aframe

From Wikiversity
Jump to navigation Jump to search
Init JSON3D4Aframe with a water molecule example and to Aframe or AR.js format

JSON3D4Aframe is an AppLSAC to create 3D models for AFrame or AR.js. The OpenSource tool was created as support for the 3D modelling learning resource about 3D modelling.

Learning Tasks[edit | edit source]

3D models can be create as Aframe model or AR.js model. The Aframe model is used for 3D models e.g. on a mobile device where the object can be explored by moving around in the 3D space, while AR.js is used for placing the 3D object in a video stream or VR headset.

AFrame[edit | edit source]

Start to explore the JSON3D4Aframe and create your first 3D model in AFrame. Select a pre-defined 3D model with the "Init 3D" button and check the model in the preview modes:

  • Aframe 3D
  • AR Marker 3D
  • (optional) AR Geolocation - export makes sense if and only if you preview the model with a mobile device (smartphone) with sensor for a globlal satellite navigation system and if you preview the model at the geolocation which close the latitude and longitude where the 3D model is placed.

AR.js[edit | edit source]

3D models are displayed in the video stream of the webcam with a marker as a 3D reference point.

Hiro Marker[edit | edit source]

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

Kanji Marker[edit | edit source]

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


Start to explore the JSON3D4Aframe and create your first 3D model in AR.js.

Explore Models[edit | edit source]

JSON3D4Aframe ("JSON 3D files fo(u)r AFrame") is a tool created for the Wikiversity learning resource about 3D models on marker.

  • Select a pre-defined model with the red "Init 3D" button (see screenshot above).
  • Check the preview of the 3D model in different output format.
  • choose a sky in the Aframe settings and preview the 3D model with sky. Please wait a bit until the sky images (equirectangular images) are loaded in the background.

Create Models[edit | edit source]

  • JSON3D4Aframe was created for the Wikiversity learning resource for compose a basic 3D scene with geometric primitive.
  • For more advanced realistic 3D scenes you may want to check out the open source software Blender and export the 3D models there with the Blender2Aframe exporter[1] installed in Blender.

See also[edit | edit source]

References[edit | edit source]

  1. ↑ Alessandro Schillaci (2021) Blender to Aframe exporter - plugin for OpenSource 3D modelling software Blender - URL: https://github.com/silverslade/aframe_blender_exporter
Retrieved from "https://en.wikiversity.org/w/index.php?title=3D_Modelling/Create_3D_Models/JSON3D4Aframe&oldid=2471172"