3D Modelling/Create 3D Models/JSON3D4Aframe

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

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

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

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

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

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

• (Attributes of 3D Elements) Explore the geometric purpose of the attributes and play around with these attributes in JSON3D4Aframe

Explore Models

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

• 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 installed in Blender.

See also

• AppLSAC
• JSON3D4Aframe Tool
• AR.js