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>
Commentaires