3D Modelling/Create 3D Models/AR.js

From Wikiversity
Jump to navigation Jump to search
Crystal structure of sodium chloride (table salt) 3D Model

In this learning resource a 3D model of Crystal Lattice will be generated by a spatial allocation of spheres. It is the first learning step to arrange geometric primitives in the threedimensional space.

  • AR.js is used for Marker recognition and displacement of the AFrame 3D objects in the camera image.
  • AFrame is used to create the 3D objects.
  • 3D Modelling Software JSON3D4Aframe is used (see AppLSAC).


Test 3D Model in Aframe Place 3D Model on Marker
Coordinate System
Hiro Marker for AR.js
Kanji Marker for AR.js


Basic Test[edit]

  • print out HIRO-marker 5cm x 5cm
  • start website
  • allow camera access in webserver
  • place HIRO-marker in front of the camera and move marker

Target 3D Model[edit]

JSON3D4Aframe User Interface
  • Use WebApp JSON3D4Aframe for generation of 3D Model (stores models in browser not on server).
  • Select 2x2 cube with 8 basic spheres (4 blue and 4 green with different radius with centre of sphere on same height).
  • JSON3D4Aframe allow the set an individual name/comment for all geometric primitives. Use appropriate names for the spheres.
Blue Sphere X0-Y0-Z0
Green Sphere X1-Y0-Z0
Blue Sphere X1-Y1-Z0
Green Sphere X0-Y1-Z0

Notation: X-right/width, Y-up/height, Z-forward/backward/depth, The numbers denote the columns, rows, layers forward/backward

Learning Task[edit]

AFrame Object Inspector in Browser started with Crtl-Alt-I

Create the crystal structure of sodium chloride in JSON3D4Aframe

  • Learn about main attributes and values of JSON3D4Aframe.
  • Create at first a small violet and a large green sphere next to eachother. Use scale attribute to determine size.
    • Coordinate x,y,z for green sphere
      xyz: -4.0 1.0 0.0  scale: 0.7
    • Coordinate x,y,z for violet sphere
      xyz: -3.0 1.0 0.0  scale: 0.4
  • Then use repeat and repeatsteps to duplicate the spheres
  • Learn to use the Object Inpector in the displayed AFrame model (Crtl-Alt-I) with your browser (e.g. Firefox). This approach allows the visual modification of geometric primitives
    • move,
    • scale,
    • rotate and
    • change attributes.
Save the modified AFrame HTML with the following download arrow:
Left Menu in Aframe Inspector
Right Download Arrow (select HTML format)
Save modified Aframe Model as HTML


Coordinate System[edit]

The first main learning objective is to get used to the 3D coordinate system and learn how to place geometric primitives in the 3D space

see Calculate 3D positions of ions in the Crystal Lattice

Create HTML Output of 3D Model[edit]

The output is generated have an HTML file. By pressing on the save button the HTML file is safety in your download folder.

see Create HTML File with JSON3D4Aframe

Testing the 3D Model[edit]

Testing 3-D model before uploading on the server with the A-frame export for testing the three-dimensional structure of the model itself and augmented reality export for checking the three-dimensional structure on the AR.js marker.

see Test Model and Upload to Server

Final 3D Products[edit]

See also[edit]

Literatur[edit]