Skip to content

Instantly share code, notes, and snippets.

@jniac

jniac/index.html

Created January 12, 2020 19:30
Show Gist options
  • Save jniac/7adb0046ecd0acbb65a9ea14f3ab6d89 to your computer and use it in GitHub Desktop.
Save jniac/7adb0046ecd0acbb65a9ea14f3ab6d89 to your computer and use it in GitHub Desktop.
Download ZIP
étienne ensaama ar demo 1
Raw
index.html
<!DOCTYPE html>
<html>
<head>
<meta charset='utf-8'>
<meta http-equiv='X-UA-Compatible' content='IE=edge'>
<title>ar demo</title>
<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;'>
<!-- <a-entity
gltf-model="./assets/BoxTextured.gltf"
rotation="0 180 0"
scale="0.15 0.15 0.15"
gps-entity-place="longitude: 2.425044017956962; latitude: 48.85313350273631;"
animation-mixer/>
<a-entity
gltf-model="./assets/BoxTextured.gltf"
rotation="0 180 0"
scale="0.15 0.15 0.15"
gps-entity-place="longitude: 2.424212; latitude: 48.85306;"
animation-mixer/> -->
<a-camera gps-camera rotation-reader></a-camera>
</a-scene>
<script src="main.js" charset="utf-8"></script>
</body>
Raw
main.js
let somePlaces = [
{
name: 'Square Republique Montreuil',
location: [48.853061, 2.424212],
scale: 3,
},
{
name: 'Joseph Home',
location: [48.853178, 2.425162],
scale: 3,
},
{
name: 'Etienne Veranda',
location: [48.860812, 2.373893],
scale: 3,
},
{
name: 'ENSAAMA DSACOM',
location: [48.833733, 2.295264],
scale: 3,
},
{
name: 'ENSAAMA cour centrale',
location: [48.833342, 2.295328],
scale: 3,
},
]
const renderPlaces = places => {
let scene = document.querySelector('a-scene')
for (let place of places) {
let { name, location, scale } = place
let [latitude, longitude] = location
let model = document.createElement('a-entity')
model.setAttribute('scale', `${scale} ${scale} ${scale}`)
model.setAttribute('name', name)
// model.setAttribute('text', `value: ${name}`)
model.setAttribute('gps-entity-place', `latitude: ${latitude}; longitude: ${longitude};`)
model.setAttribute('gltf-model', './assets/BoxTextured.gltf')
model.setAttribute('animation-mixer', '')
scene.appendChild(model)
}
}
renderPlaces(somePlaces)
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment