techb · June 22, 2021 14:12
diff --git a/ar-demo.php b/ar-demo.php
 <?php
 /*
 	Template Name: AR Example

 	Don't use get_header() or get_footer()
 	this page needs to be 'blank' so the cam/ar view takes the whole
 	screen/canvas and no styles are applied except the ones we define here.

 	Some info and docs:
 		General
 		- https://github.com/jeromeetienne/AR.js/blob/master/README.md
 		- https://medium.com/chialab-open-source/how-to-handle-click-events-on-ar-js-58fcacb77c4
 		- https://marmelab.com/blog/2017/06/19/augmented-reality-html5.html
 		- AFRAME COMPONENTS WE COULD USE
 			- https://aframe.io/aframe-registry/

 		Markers
 		- https://jeromeetienne.github.io/AR.js/three.js/examples/marker-training/examples/generator.html
 			^^ to generate markers
 		- https://github.com/artoolkit/artoolkit-docs/blob/master/3_Marker_Training/marker_about.md
 		- https://medium.com/chialab-open-source/ar-js-the-simpliest-way-to-get-cross-browser-ar-on-the-web-8f670dd45462
 */
 ?>

 <!DOCTYPE html>
 <html>
 	<head>
 		<meta charset="UTF-8">
 		<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
 		<meta name="apple-mobile-web-app-capable" content="yes">
 		<title>AR Demo</title>

 		<!-- jQuery -->
 		<script src="//ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js" type="text/javascript"></script>

 		<!-- Slick Image slider/gallery -->
 		<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/[email protected]/slick/slick.css"/>
 		<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/[email protected]/slick/slick.min.js"></script>

 		<!-- include A-Frame, 0.9.0 is out, but 0.8.0 is the only one I found working with a-video in iOS and Android -->
 		<script src="https://aframe.io/releases/0.9.2/aframe.min.js"></script>

 		<!-- We need a-frame-extras for the .gltf animations to work -->
 		<script src="//cdn.rawgit.com/donmccurdy/aframe-extras/v5.1.0/dist/aframe-extras.min.js"></script>

 		<!-- This is the AR.js dev build -->
 		<script src="https://cdn.rawgit.com/jeromeetienne/AR.js/dev/aframe/build/aframe-ar.js"></script>

 	</head>

 	<script>
 		/*
 			TODO:
 				Add checks for webrtc and media access (for the camera)
 				Add loading spinner
 		*/
 	</script>


 	<script>
 		/*
 			It is important that these AFRAME components are above the <body>
 		*/


 		/*
 			To play the video only when the marker is visable
 		*/
 		AFRAME.registerComponent('detect-video', {
 			init: function() {
 				this.marker = document.querySelector("#leaf")
 				this.markerVisible = false

 				this.marker.addEventListener("markerFound", function(e){
 					document.querySelector("#wvsp-video").play();
 				});
 				this.marker.addEventListener("markerLost", function(e){
 					document.querySelector("#wvsp-video").pause();
 				});
 			}
 		});

 		/*
 			To play the audio when the marker is visable
 		*/
 		var seen = false;
 		AFRAME.registerComponent('detect-audio', {
 			init: function() {
 				this.marker = document.querySelector("#leaf")
 				this.markerVisible = false

 				this.marker.addEventListener("markerFound", function(e){
 					// we pause, then set the timeline to the begining
 					// this audio clip fades in, is why.
 					document.querySelector("#waterfall_sound").pause()
 					document.querySelector("#waterfall_sound").currentTime = 0;
 					document.querySelector("#waterfall_sound").play();
 					seen = true;
 				});
 				this.marker.addEventListener("markerLost", function(e){
 					// when the marker is lost, we have to manually fade out
 					jQuery("#waterfall_sound").animate({volume: 0.0}, 500);
 					seen = false;
 				});
 			}
 		});


 		AFRAME.registerComponent('volume-distance', {
 			init: function() {

 			},

 			tick: function() {
 				var s = document.querySelector("#leaf");
 				var pos = s.getAttribute('position');
 				// math?... I bascially played with numbers till is sounded okay
 				// also abs everything, can't set volume to a negitave number
 				var delta = 1 - Math.abs( Math.abs(pos.z) * .1 * .4 );

 				var clip = document.querySelector("#waterfall_sound");
 				// only when seen, else it glitches out pretty hard
 				if( seen ){
 					clip.volume = Math.abs( delta );
 				}
 			}
 		});

 	</script>

 	<!-- Muh styles -->
 	<style>
 		.hide-me{
 			display: none;
 		}
 		.gallery{
 			position: fixed;
 			top: 70%;
 			left: 1%;
 		}
 		.gallery{
 			width: 100%;
 			z-index: 100;
 		}
 		.gallery div img {
 			width: 150px;
 			height: auto;
 		}
 	</style>

 	<body>
 		<!--
 			Any html that we want to display should go above the <a-scene> and use fixed pos
 			to get it into view. I'm going to guess that % based posistions might be better
 			or help with different screen sizes.
 		-->

 		<!-- I need  the pattern ratio number found on the marker maker website -->
 		<a-scene  embedded
 				arjs='trackingMethod: best;
 					debugUIEnabled: false;
 					patternRatio: 0.5;'
 				vr-mode-ui="enabled: false;">

 			<!-- Load the assets, the waterfall is 52mb, it will take a sec to load -->
 			<a-assets>
 				<video id="wvsp-video"
 						autoplay
 						muted
 						playsinline
 						webkit-playsinline
 						loop="true"
 						src="/wp-content/uploads/wvsp_video.mp4"
 						controls>
 				</video>

 				<a-asset-item id="monster" src="/wp-content/uploads/fish/scene.gltf"></a-asset-item>
 				<a-asset-item id="waterfall" src="/wp-content/uploads/waterfall_mountain_river/scene.gltf"></a-asset-item>
 				<audio id="waterfall_sound" src="/wp-content/uploads/waterfall_daniel_simon.mp3"></audio>
 			</a-assets>

 			<!-- Our camera object.
 				We can also use a cursor object.
 				The cursor object is required if you want to interact with the AR objects like models. -->
 			<a-entity camera id="camera">
 				<!--
 					<a-entity cursor
 							position="0 0 -1"
 							geometry="primitive: ring; radiusInner: 0.02; radiusOuter: 0.03"
 							material="color: black; shader: flat">

 						<a-animation begin="fusing"
 								easing="ease-in"
 								attribute="scale"
 								fill="backwards"
 								from="1 1 1"
 								to="0.2 0.2 0.2"
 								dur="1500">
 						</a-animation>
 					</a-entity>
 				-->
 			</a-entity>

 			<!-- Autoplay doesn't really work on videos and audio on mobile.
 				So we play and pause the video in the "detect-video" and "detect-audio" component we made in the script above

 				volume-distance
 				detect-audio -->
 			<a-marker id="leaf"
 					detect-video
 					smooth="true"
 					smoothCount="10"
 					smoothTolerance="0.01"
 					smoothThreshold="5"
 					type='pattern'
 					url='/wp-content/uploads/pattern-marker-2.patt'>

 				<!-- You have to play with the scale, each one is different depending on the model.
 				For the video, we can set the aspect ration too. -->

 				<a-entity
 					gltf-model="#waterfall"
 					position="-5 -9 -3"
 					scale=".6 .6 .6"
 					rotation="0 90 0"
 					shadow="receive: true; cast: true">
 				</a-entity>

 				<!-- Only has one animation clip, so we use a wildcard. -->
 				<a-entity
 					id="monster-entity"
 					gltf-model="#monster"
 					position="0 0 0"
 					scale=".006 .006 .006"
 					rotation="0 90 -90"
 					animation-mixer="clip: *;"
 					shadow="receive: true; cast: true">
 				</a-entity>

 				<a-video src="#wvsp-video"
 						width="2"
 						height="1.5"
 						position="3.6 0 -2.8"
 						rotation="-40 -30 10"
 						scale="1.4 1.4 1.4">
 				</a-video>

 				<a-entity sound="src: #waterfall_sound"
 						position="1 1 1"
 						autoplay="true">
 				</a-entity>
 			</a-marker>

 			<!-- We can use other light sources, but this one seems okay for now. -->
 			<a-light
 				type="ambient"
 				intensity="2"
 				color="#FFF">
 			</a-light>

 		</a-scene>
 	</body>
 </html>
	<?php
	/*
	Template Name: AR Example

	Don't use get_header() or get_footer()
	this page needs to be 'blank' so the cam/ar view takes the whole
	screen/canvas and no styles are applied except the ones we define here.

	Some info and docs:
	General
	- https://github.com/jeromeetienne/AR.js/blob/master/README.md
	- https://medium.com/chialab-open-source/how-to-handle-click-events-on-ar-js-58fcacb77c4
	- https://marmelab.com/blog/2017/06/19/augmented-reality-html5.html
	- AFRAME COMPONENTS WE COULD USE
	- https://aframe.io/aframe-registry/

	Markers
	- https://jeromeetienne.github.io/AR.js/three.js/examples/marker-training/examples/generator.html
	^^ to generate markers
	- https://github.com/artoolkit/artoolkit-docs/blob/master/3_Marker_Training/marker_about.md
	- https://medium.com/chialab-open-source/ar-js-the-simpliest-way-to-get-cross-browser-ar-on-the-web-8f670dd45462
	*/
	?>

	<!DOCTYPE html>
	<html>
	<head>
	<meta charset="UTF-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
	<meta name="apple-mobile-web-app-capable" content="yes">
	<title>AR Demo</title>

	<!-- jQuery -->
	<script src="//ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js" type="text/javascript"></script>

	<!-- Slick Image slider/gallery -->
	<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/[email protected]/slick/slick.css"/>
	<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/[email protected]/slick/slick.min.js"></script>

	<!-- include A-Frame, 0.9.0 is out, but 0.8.0 is the only one I found working with a-video in iOS and Android -->
	<script src="https://aframe.io/releases/0.9.2/aframe.min.js"></script>

	<!-- We need a-frame-extras for the .gltf animations to work -->
	<script src="//cdn.rawgit.com/donmccurdy/aframe-extras/v5.1.0/dist/aframe-extras.min.js"></script>

	<!-- This is the AR.js dev build -->
	<script src="https://cdn.rawgit.com/jeromeetienne/AR.js/dev/aframe/build/aframe-ar.js"></script>

	</head>

	<script>
	/*
	TODO:
	Add checks for webrtc and media access (for the camera)
	Add loading spinner
	*/
	</script>


	<script>
	/*
	It is important that these AFRAME components are above the <body>
	*/


	/*
	To play the video only when the marker is visable
	*/
	AFRAME.registerComponent('detect-video', {
	init: function() {
	this.marker = document.querySelector("#leaf")
	this.markerVisible = false

	this.marker.addEventListener("markerFound", function(e){
	document.querySelector("#wvsp-video").play();
	});
	this.marker.addEventListener("markerLost", function(e){
	document.querySelector("#wvsp-video").pause();
	});
	}
	});

	/*
	To play the audio when the marker is visable
	*/
	var seen = false;
	AFRAME.registerComponent('detect-audio', {
	init: function() {
	this.marker = document.querySelector("#leaf")
	this.markerVisible = false

	this.marker.addEventListener("markerFound", function(e){
	// we pause, then set the timeline to the begining
	// this audio clip fades in, is why.
	document.querySelector("#waterfall_sound").pause()
	document.querySelector("#waterfall_sound").currentTime = 0;
	document.querySelector("#waterfall_sound").play();
	seen = true;
	});
	this.marker.addEventListener("markerLost", function(e){
	// when the marker is lost, we have to manually fade out
	jQuery("#waterfall_sound").animate({volume: 0.0}, 500);
	seen = false;
	});
	}
	});


	AFRAME.registerComponent('volume-distance', {
	init: function() {

	},

	tick: function() {
	var s = document.querySelector("#leaf");
	var pos = s.getAttribute('position');
	// math?... I bascially played with numbers till is sounded okay
	// also abs everything, can't set volume to a negitave number
	var delta = 1 - Math.abs( Math.abs(pos.z) * .1 * .4 );

	var clip = document.querySelector("#waterfall_sound");
	// only when seen, else it glitches out pretty hard
	if( seen ){
	clip.volume = Math.abs( delta );
	}
	}
	});

	</script>

	<!-- Muh styles -->
	<style>
	.hide-me{
	display: none;
	}
	.gallery{
	position: fixed;
	top: 70%;
	left: 1%;
	}
	.gallery{
	width: 100%;
	z-index: 100;
	}
	.gallery div img {
	width: 150px;
	height: auto;
	}
	</style>

	<body>
	<!--
	Any html that we want to display should go above the <a-scene> and use fixed pos
	to get it into view. I'm going to guess that % based posistions might be better
	or help with different screen sizes.
	-->

	<!-- I need the pattern ratio number found on the marker maker website -->
	<a-scene embedded
	arjs='trackingMethod: best;
	debugUIEnabled: false;
	patternRatio: 0.5;'
	vr-mode-ui="enabled: false;">

	<!-- Load the assets, the waterfall is 52mb, it will take a sec to load -->
	<a-assets>
	<video id="wvsp-video"
	autoplay
	muted
	playsinline
	webkit-playsinline
	loop="true"
	src="/wp-content/uploads/wvsp_video.mp4"
	controls>
	</video>

	<a-asset-item id="monster" src="/wp-content/uploads/fish/scene.gltf"></a-asset-item>
	<a-asset-item id="waterfall" src="/wp-content/uploads/waterfall_mountain_river/scene.gltf"></a-asset-item>
	<audio id="waterfall_sound" src="/wp-content/uploads/waterfall_daniel_simon.mp3"></audio>
	</a-assets>

	<!-- Our camera object.
	We can also use a cursor object.
	The cursor object is required if you want to interact with the AR objects like models. -->
	<a-entity camera id="camera">
	<!--
	<a-entity cursor
	position="0 0 -1"
	geometry="primitive: ring; radiusInner: 0.02; radiusOuter: 0.03"
	material="color: black; shader: flat">

	<a-animation begin="fusing"
	easing="ease-in"
	attribute="scale"
	fill="backwards"
	from="1 1 1"
	to="0.2 0.2 0.2"
	dur="1500">
	</a-animation>
	</a-entity>
	-->
	</a-entity>

	<!-- Autoplay doesn't really work on videos and audio on mobile.
	So we play and pause the video in the "detect-video" and "detect-audio" component we made in the script above

	volume-distance
	detect-audio -->
	<a-marker id="leaf"
	detect-video
	smooth="true"
	smoothCount="10"
	smoothTolerance="0.01"
	smoothThreshold="5"
	type='pattern'
	url='/wp-content/uploads/pattern-marker-2.patt'>

	<!-- You have to play with the scale, each one is different depending on the model.
	For the video, we can set the aspect ration too. -->

	<a-entity
	gltf-model="#waterfall"
	position="-5 -9 -3"
	scale=".6 .6 .6"
	rotation="0 90 0"
	shadow="receive: true; cast: true">
	</a-entity>

	<!-- Only has one animation clip, so we use a wildcard. -->
	<a-entity
	id="monster-entity"
	gltf-model="#monster"
	position="0 0 0"
	scale=".006 .006 .006"
	rotation="0 90 -90"
	animation-mixer="clip: *;"
	shadow="receive: true; cast: true">
	</a-entity>

	<a-video src="#wvsp-video"
	width="2"
	height="1.5"
	position="3.6 0 -2.8"
	rotation="-40 -30 10"
	scale="1.4 1.4 1.4">
	</a-video>

	<a-entity sound="src: #waterfall_sound"
	position="1 1 1"
	autoplay="true">
	</a-entity>
	</a-marker>

	<!-- We can use other light sources, but this one seems okay for now. -->
	<a-light
	type="ambient"
	intensity="2"
	color="#FFF">
	</a-light>

	</a-scene>
	</body>
	</html>