AR.js/aframe/examples/marker-events.html · ar/AR.js - AtomGit

Nnicolo.carpignolifix: clean
af15e61c创建于 2020年2月3日历史提交
<!DOCTYPE html>
<script src="https://cdn.jsdelivr.net/gh/aframevr/aframe@1c2407b26c61958baa93967b5412487cd94b290b/dist/aframe-master.min.js"></script>
<!-- include aframe-ar.js -->
<script src="../build/aframe-ar.js"></script>
<!-- Register an aframe component that allows reacting to marker events -->
<script>
    window.addEventListener('camera-init', (data) => {
        console.log('camera-init', data);
    })

    window.addEventListener('camera-error', (error) => {
        console.log('camera-error', error);
    })

	AFRAME.registerComponent('registerevents', {
		init: function () {
			var marker = this.el;

			marker.addEventListener('markerFound', function() {
				var markerId = marker.id;
				console.log('markerFound', markerId);
				// TODO: Add your own code here to react to the marker being found.
			});

			marker.addEventListener('markerLost', function() {
				var markerId = marker.id;
				console.log('markerLost', markerId);
				// TODO: Add your own code here to react to the marker being lost.
			});
		}
	});
</script>

<body style='margin : 0px; overflow: hidden; font-family: Monospace;'><div style='position: fixed; top: 10px; left: 5px; text-align: center; z-index: 1;'>
	<a href="https://github.com/jeromeetienne/AR.js/" target="_blank">AR.js</a> - marker events example for a-frame - look at the js console
	<br/>
	Contact me any time at <a href='https://twitter.com/jerome_etienne' target='_blank'>@jerome_etienne</a>
</div>
	<a-scene embedded arjs='sourceType: webcam; detectionMode: mono_and_matrix; matrixCodeType: 3x3; sourceWidth:1280; sourceHeight:960; displayWidth: 1280; displayHeight: 960;'>
		<!-- handle hiro marker -->
		<!-- 'registerevents' will register event listeners for the marker when it is found and lost,
		as defined in the inline script above -->
		<a-marker preset='hiro' id='marker-hiro' registerevents>
			<a-box position='0 0.5 0' material='opacity: 0.5; side: double;color:blue;'>
				<a-torus-knot radius='0.26' radius-tubular='0.05'
				animation="property: rotation; to:360 0 0; dur: 5000; easing: linear; loop: true">
				</a-torus-knot>
			</a-box>
		</a-marker>

		<!-- handle matrix marker -->
		<!-- 'emitevents' will make the marker emit events when it is found and lost
		but, since there are no registered listeners for these events, you will not see any effect.
		You can register event listeners in your own custom component, defined similarly to
		the 'registerevents' in the inline script above -->
		<a-marker type='barcode' value='5' id='marker-barcode-5'>
			<a-box position='0 0.5 0' material='opacity: 0.5; side: double;color:red;'>
				<a-torus-knot radius='0.26' radius-tubular='0.05'
				animation="property: rotation; to:360 0 0; dur: 5000; easing: linear; loop: true">
				</a-torus-knot>
			</a-box>
		</a-marker>

		<!-- add a simple camera -->
		<a-entity camera></a-entity>
	</a-scene>
</body>
</html>