<!doctype HTML> <html> <head> <meta name="createdwith" content="https://niebert.githhub.io/JSON3D4Aframe"> <script src="https://aframe.io/releases/1.1.0/aframe.min.js"></script> <script src="https://cdn.rawgit.com/jeromeetienne/AR.js/1.5.0/aframe/build/aframe-ar.js"> </script> <title> AR {{marker}} Marker - {{titlemodel}} </title> </head> <body style='margin : 0px; overflow: hidden;'> <a-scene> <a-marker id="mymarker" preset="{{marker}}"> {{{arobjects}}} </a-marker> <a-entity camera ></a-entity> </a-scene> </body> </html>
<!DOCTYPE html> <html> <head> <meta charset='utf-8'> <meta http-equiv='X-UA-Compatible' content='IE=edge'> <title>GeoAR - {{titlemodel}} </title> <meta name="createdwith" content="https://niebert.githhub.io/JSON3D4Aframe"> <script src='https://aframe.io/releases/0.9.2/aframe.min.js'></script> <script src="https://raw.githack.com/jeromeetienne/AR.js/master/aframe/build/aframe-ar.min.js"></script> <script src="https://raw.githack.com/donmccurdy/aframe-extras/master/dist/aframe-extras.loaders.min.js"></script> <script> THREEx.ArToolkitContext.baseURL = 'https://raw.githack.com/jeromeetienne/ar.js/master/three.js/' </script> </head> <body style='margin: 0; overflow: hidden;'> <a-scene vr-mode-ui="enabled: false" embedded arjs='sourceType: webcam; sourceWidth:1280; sourceHeight:960; displayWidth: 1280; displayHeight: 960; debugUIEnabled: false;'> {{{arobjects}}} <a-camera gps-camera rotation-reader></a-camera> </a-scene> </body> </html>
<!DOCTYPE html> <html> <head> <title>A-Frame - {{titlemodel}} </title> <meta name="description" content="A-Frame {{titlemodel}}"> <meta name="createdwith" content="https://niebert.githhub.io/JSON3D4Aframe"> <script src="https://aframe.io/releases/1.1.0/aframe.min.js"></script> </head> <body> <a-scene> {{{arobjects}}} {{{plane}}} {{{sky}}} {{{cameraposition}}} </a-scene> </body> </html>
<a-entity id="myCameraPosition" position="{{{camposxyz}}}"> <a-entity id="myCamera" camera look-controls look-controls wasd-controls keyboard-controls> </a-entity> </a-entity>
<a-sky src="{{{aframe_sky_file}}}" rotation="0 -130 0"></a-sky>
<a-sky color="#ECECEC"></a-sky>
<a-plane position="0 0 -4" rotation="-90 0 0" width="4" height="4" color="{{{aframe_plane_color}}}" shadow></a-plane>
<!-- Comment for {{name4type}}: {{comment}} --> <{{tagname}} position="{{position}}" material="color: {{color}};opacity:{{opacity}}" rotation="{{rotation}}" {{{attributes}}}></{{tagname}}>
<!-- Comment for {{name4type}}: {{comment}} with reference location Lat:{{ar_latitude}},Long:{{ar_longitude}} --> <{{tagname}} gps-projected-entity-place="latitude: {{latitude}}; longitude: {{longitude}}" position="{{position}}" material="color: {{color}};opacity:{{opacity}}" rotation="{{rotation}}" {{{attributes}}}></{{tagname}}>
JSON 3D Editor
for
AFrame
3.0.20
Load
JSON
CSV
Save
-
Save 3D
AFrame 3D
AR Marker 3D
AR Geolocation
Preview 3D
/
0
Add
Clone
Delete
Model
Init DB
valid or not valid
Title 3D Model:
Init 3D
-
Water Molecule
Cristal Lattice
Snowman
4 Candles on Torus
Global Scale:
Global Move:
Global Rotate:
File:
AFrame Settings
AR Marker Settings
AR Geolocation Settings
Examples 3D
Aframe Sky:
Cloud/Grass
Aldara Park
Amphiteater - Berlin
Magpupungko_beach
River Rhine 1 - Cologne
River Rhine 2 - Cologne
River Rhine 3 - Cologne
River Rhine 4 - Cologne
Durlach Saumarkt - Karlsruhe
Jelgavas Palace - WikiCommons
Display Sky:
not used
used
Aframe Default Plane:
not used
used
Color Plane:
Aframe Camera Position:
AR Marker:
hiro
kanji
PDF AR-Marker for Printing
Map Center:
Longitude:
Latitude:
Simulated GPS:
Yes
No
Zoom:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
Select Geolocation
Display Map
Latitude:
Longitude:
Location based AR Unit Length:
Degrees (Latitude) per Meter Distance
Snowman MB1
Snowman MB2
Snowman IP1
Snowman HL1
Snowman Landau
Snowman Landau
Snowman Landau
Snowman Landau
Snowman Durlach Saumarkt
Display Marker 3D
Display 3D
Examples of 3D Models - Version
3.0.20
Cristal Lattice
Cristal Lattice - AFrame Model
Cristal Lattice with 360 Degree Sky - AFrame Model
Cristal Lattice - AR.js Hiro Marker
Cristal Lattice - AR.js Kanji Marker
Water Molecule
Water Molecules - AFrame Model
Water Molecules with 360 Degree Sky - AFrame Model
Water Molecules - AR.js Hiro Marker
Water Molecules - AR.js Kanji Marker
Dinosaur - Spinosaurus
Dinosaur - Sky - AFrame Model
Dinosaur - AR.js
-
Hiro Marker
Snow Man
Snowman - AFrame Model
Snowman - AR.js
-
Hiro Marker
Snowman - AR.js - Sky
-
Hiro Marker
Snowman - AR.js
-
Kanji Marker
Snowman - AR.js - Sky
-
Kanji Marker
Snowman - GeoAR - MWS
4 Candles on Torus
4 Candles on Torus - AFrame Model
4 Candles on Torus - AR.js
-
Hiro Marker
4 Candles on Torus - AR.js - Sky
-
Hiro Marker
4 Candles on Torus - AR.js
-
Kanji Marker
4 Candles on Torus - AR.js - Sky
-
Kanji Marker
Snowman - GeoAR - MWS
Animation Demo - AR.js and Three.js Examples
Planet System Demo - AR.js
-
Hiro Marker
by Irina Shaskova
AR VR in der Grundschule
by Irina Shaskova - german
AR VR in Primary Schools
by Irina Shaskova - english
AR-Examples with Three.js and AR.js
by Lee Stemkovki
360-Degree Images as sky for 3D-models - see Aframe-settings in JSON3D4Aframe
3D Model
Export JSON
Export JSON Schema
Close
Export Editor innerHTML - Debug
View (console.log)
Wikiversity: 3D Modelling
GitHub-Repo - Version:
3.0.20
- Engelbert Niehaus - Date:
2023/01/30 12:06:26
Download GitHub (V
3.0.20
)
JSON3D4Aframe used
JSON Editor by Jeremy Dorn on GitHub
Candles4Torus UKL ArGeo