Skip to content

Commit

Permalink
Attempting barcode marker recognition
Browse files Browse the repository at this point in the history
Attempting barcode marker recognition
  • Loading branch information
stemkoski committed Jul 13, 2018
1 parent 737c073 commit 785e6f3
Showing 1 changed file with 156 additions and 0 deletions.
156 changes: 156 additions & 0 deletions barcode.html
Original file line number Diff line number Diff line change
@@ -0,0 +1,156 @@
<!DOCTYPE html>
<head>
<meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
<title>Hello, AR Cube!</title>
<!-- include three.js library -->
<script src='js/three.js'></script>
<!-- include jsartookit -->
<script src="jsartoolkit5/artoolkit.min.js"></script>
<script src="jsartoolkit5/artoolkit.api.js"></script>
<!-- include threex.artoolkit -->
<script src="threex/threex-artoolkitsource.js"></script>
<script src="threex/threex-artoolkitcontext.js"></script>
<script src="threex/threex-arbasecontrols.js"></script>
<script src="threex/threex-armarkercontrols.js"></script>
</head>

<body style='margin : 0px; overflow: hidden; font-family: Monospace;'>

<!--
Example created by Lee Stemkoski: https://github.com/stemkoski
Based on the AR.js library and examples created by Jerome Etienne: https://github.com/jeromeetienne/AR.js/
-->

<script>

var scene, camera, renderer, clock, deltaTime, totalTime;

var arToolkitSource, arToolkitContext;

var markerRoot1, markerRoot2;

var mesh1;

initialize();
animate();

function initialize()
{
scene = new THREE.Scene();

let ambientLight = new THREE.AmbientLight( 0xcccccc, 0.5 );
scene.add( ambientLight );

camera = new THREE.Camera();
scene.add(camera);

renderer = new THREE.WebGLRenderer({
antialias : true,
alpha: true
});
renderer.setClearColor(new THREE.Color('lightgrey'), 0)
renderer.setSize( 640, 480 );
renderer.domElement.style.position = 'absolute'
renderer.domElement.style.top = '0px'
renderer.domElement.style.left = '0px'
document.body.appendChild( renderer.domElement );

clock = new THREE.Clock();
deltaTime = 0;
totalTime = 0;

////////////////////////////////////////////////////////////
// setup arToolkitSource
////////////////////////////////////////////////////////////

arToolkitSource = new THREEx.ArToolkitSource({
sourceType : 'webcam',
});

function onResize()
{
arToolkitSource.onResize()
arToolkitSource.copySizeTo(renderer.domElement)
if ( arToolkitContext.arController !== null )
{
arToolkitSource.copySizeTo(arToolkitContext.arController.canvas)
}
}

arToolkitSource.init(function onReady(){
onResize()
});

// handle resize event
window.addEventListener('resize', function(){
onResize()
});

////////////////////////////////////////////////////////////
// setup arToolkitContext
////////////////////////////////////////////////////////////

// create atToolkitContext
arToolkitContext = new THREEx.ArToolkitContext({
cameraParametersUrl: 'data/camera_para.dat',
detectionMode: "mono_and_matrix",
matrixCodeType: "3x3",
});

// copy projection matrix to camera when initialization complete
arToolkitContext.init( function onCompleted(){
camera.projectionMatrix.copy( arToolkitContext.getProjectionMatrix() );
});

////////////////////////////////////////////////////////////
// setup markerRoots
////////////////////////////////////////////////////////////

// build markerControls
markerRoot1 = new THREE.Group();
scene.add(markerRoot1);
let markerControls1 = new THREEx.ArMarkerControls(arToolkitContext, markerRoot1, {
type: "barcode", barcodeValue: "5",
})

let geometry1 = new THREE.CubeGeometry(1,1,1);
let material1 = new THREE.MeshNormalMaterial({
transparent: true,
opacity: 0.5,
side: THREE.DoubleSide
});

mesh1 = new THREE.Mesh( geometry1, material1 );
mesh1.position.y = 0.5;

markerRoot1.add( mesh1 );
}


function update()
{
// update artoolkit on every frame
if ( arToolkitSource.ready !== false )
arToolkitContext.update( arToolkitSource.domElement );
}


function render()
{
renderer.render( scene, camera );
}


function animate()
{
requestAnimationFrame(animate);
deltaTime = clock.getDelta();
totalTime += deltaTime;
update();
render();
}

</script>

</body>
</html>

0 comments on commit 785e6f3

Please sign in to comment.