A-Frame AR First Try

1. 360 sketch image

<a-curvedimage >

2. 3D models:

Google poly https://developers.google.com/poly/develop/web

API application and add a-entitiy

<a-entity position="0 -5 -20" scale="0.05 0.05 0.05" gpoly="polyid:eeRl_xRkaFj; API_KEY:AIzaSyAm2jiZg11wMSbgGLxjRj3X7uhNrLZ4o1I;">

<a-animation attribute="rotation" dur="10000" to="0 360 0" repeat="indefinite"></a-animation>

</a-entity>

3. The position:

radius="2" theta-length="70" height="0.8" scale="-1.5 1 -1" position="2 0 -2">

4. The click event:

cursor event

<!-- define virtual camera and cursor -->

<a-entity camera look-controls>

<a-cursor id="cursor"

animation__click="property: scale; startEvents: click; from: 0.1 0.1 0.1; to: 1 1 1; dur: 150"

animation__fusing="property: fusing; startEvents: fusing; from: 1 1 1; to: 0.1 0.1 0.1; dur: 1500"

event-set__1="_event: mouseenter; color: springgreen"

event-set__2="_event: mouseleave; color: black"

fuse="true"

raycaster="objects: .link"></a-cursor>

</a-entity>

---

AFRAME.registerComponent('navigation', {

dependencies: ["visible"],

// schema: {

// on: {type: 'string'},

// target: {type: 'selector'},

// src: {type: 'string'},

// dur: {type: 'number', default: 300}

// },

init: function () {

document.querySelector('#search').addEventListener("click", function(evt){

var guider = document.querySelector('#guider');

var searchbox = document.querySelector('#search');

var map = document.querySelector('#map');

guider.setAttribute("visible", "true");

map.setAttribute("visible", "true");

searchbox.setAttribute("visible", "false");

//newVoxelEl.setAttribute("geometry", "height: 0.5; width: 0.5; depth: 0.5");

console.log("clicked", guider);

});

}

});

<a-entity visible="false" id="map" geometry="primitive: plane; height: 3; width: 5" position="0 -5 -7" material="shader: flat; src: #mapui" ></a-entity>

<a-entity id="guider" visible = "false" position="-5 -4 -8" scale="0.05 0.05 0.05" gpoly="polyid:eeRl_xRkaFj; API_KEY:AIzaSyAm2jiZg11wMSbgGLxjRj3X7uhNrLZ4o1I;">

<a-animation attribute="rotation" dur="10000" to="0 360 0" repeat="indefinite"></a-animation>

</a-entity>