Wikiversity

3D Modelling/Create 3D Models/JSON3D4Aframe

< 3D Modelling‎ | Create 3D Models
(Redirected from JSON3D4Aframe)

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.

Init JSON3D4Aframe with a water molecule example and to Aframe or AR.js format

Learning Tasks edit

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

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

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

Hiro Marker edit

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

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

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

  • 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

References edit

  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"