object_snapping.js

var snappableContentHash = "gett"
// https://media.npr.org/assets/img/2016/04/16/gettyimages-457299112_wide-4c214dcd4c434f5aaf370c5e948f1dd4e73af6e2-s800-c85.jpg

var snappedToWallHash = "ta16"
// caching via URL so when not uploaded from device, works well
// https://www.thedyslexiashop.co.uk/media/catalog/product/cache/1/image/9df78eab33525d08d6e5fb8d27136e95/t/a/ta162.png

if (snapping) clearInterval(snapping)
var snapping = setInterval( ifNearbySnap, 100 )

// ----------------------------------------

var snappableContentEl = getFirstElementFromHash(snappableContentHash)
var snappedToWallEl = getFirstElementFromHash(snappedToWallHash)

function snap(toSnap, snapOn){
  if ( toSnap.object3D.rotation.equals( snapOn.object3D.rotation )) return
  // should be done via NAF promise
  toSnap.object3D.rotation.copy(snapOn.object3D.rotation)
  toSnap.object3D.position.copy(snapOn.object3D.position)
  toSnap.object3D.translateZ(0.01)
  // this should be done rather in the direction of the user
  toSnap.object3D.translateX(Math.random()-0.5)
  toSnap.object3D.translateY(Math.random()-0.5)
}

function ifNearbySnap(){
if (snappableContentEl.object3D.position.distanceTo(snappedToWallEl.object3D.position) < 0.5)
	snap(snappableContentEl, snappedToWallEl)
}

function getFirstElementFromHash(hash){
	var g = AFRAME.scenes[0].querySelectorAll("[media-loader]")
	var matches = []
	for (let e of g){
		var m = e.components["media-loader"].attrValue.src.match(hash)
		if (m && m.length) matches.push(e)
	}
	return matches[0]
}