<!DOCTYPE html> <meta name='viewport' content='width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0'> <!-- three.js library --> <script src='vendor/three.js/build/three.js'></script> <script src='vendor/three.js/examples/js/libs/stats.min.js'></script> <!-- ar.js --> <script src="../build/ar-threex.js"></script> <script>THREEx.ArToolkitContext.baseURL = '../'</script> <!-- Bind window error for error handling --> <script> window.addEventListener('error', function(event) { alert("ERROR: " + event.message + " at " + event.filename + " : " + event.lineno + " : " + event.colno); }); </script> <body style='margin : 0px; overflow: hidden; font-family: Monospace;'><div style='position: absolute; top: 10px; width:100%; text-align: center;z-index:1';> <a href='https://github.com/AR-js-org/AR.js/' target='_blank'>AR.js</a> - use a ar.js marker with pattRatio 0.9 <br/> Contact me any time at <a href='https://twitter.com/nicolocarp' target='_blank'>@nicolocarp</a> </div><script> ////////////////////////////////////////////////////////////////////////////////// // Init ////////////////////////////////////////////////////////////////////////////////// // init renderer var renderer = new THREE.WebGLRenderer({ // antialias : true, alpha: true }); renderer.setClearColor(new THREE.Color('lightgrey'), 0) // renderer.setPixelRatio( 2 ); renderer.setSize( window.innerWidth, window.innerHeight ); renderer.domElement.style.position = 'absolute' renderer.domElement.style.top = '0px' renderer.domElement.style.left = '0px' document.body.appendChild( renderer.domElement ); // array of functions for the rendering loop var onRenderFcts= []; // init scene and camera var scene = new THREE.Scene(); ////////////////////////////////////////////////////////////////////////////////// // Initialize a basic camera ////////////////////////////////////////////////////////////////////////////////// // Create a camera var camera = new THREE.Camera(); scene.add(camera); //////////////////////////////////////////////////////////////////////////////// // handle arToolkitSource //////////////////////////////////////////////////////////////////////////////// var artoolkitProfile = new THREEx.ArToolkitProfile() // artoolkitProfile.sourceWebcam() artoolkitProfile.sourceImage(THREEx.ArToolkitContext.baseURL + '../test/data/images/marker-artoolkit-pattern-pattratio-09.png') var arToolkitSource = new THREEx.ArToolkitSource(artoolkitProfile.sourceParameters) arToolkitSource.init(function onReady(){ onResize() }) // handle resize window.addEventListener('resize', function(){ onResize() }) function onResize(){ arToolkitSource.onResizeElement() arToolkitSource.copyElementSizeTo(renderer.domElement) if( arToolkitContext.arController !== null ){ arToolkitSource.copyElementSizeTo(arToolkitContext.arController.canvas) } } //////////////////////////////////////////////////////////////////////////////// // initialize arToolkitContext //////////////////////////////////////////////////////////////////////////////// // set patternRatio artoolkitProfile.contextParameters.patternRatio = 0.9 // create atToolkitContext var arToolkitContext = new THREEx.ArToolkitContext(artoolkitProfile.contextParameters) // initialize it arToolkitContext.init(function onCompleted(){ // copy projection matrix to camera camera.projectionMatrix.copy( arToolkitContext.getProjectionMatrix() ); }) // update artoolkit on every frame onRenderFcts.push(function(){ if( arToolkitSource.ready === false ) return arToolkitContext.update( arToolkitSource.domElement ) }) //////////////////////////////////////////////////////////////////////////////// // Create a ArMarkerControls //////////////////////////////////////////////////////////////////////////////// var markerGroup = new THREE.Group scene.add(markerGroup) var markerControls = new THREEx.ArMarkerControls(arToolkitContext, markerGroup, { type : 'pattern', // patternUrl : THREEx.ArToolkitContext.baseURL + '../data/data/patt.hiro', patternUrl : THREEx.ArToolkitContext.baseURL + 'examples/marker-training/examples/pattern-files/pattern-arjs.patt', }) // build a smoothedControls var smoothedGroup = new THREE.Group() scene.add(smoothedGroup) var smoothedControls = new THREEx.ArSmoothedControls(smoothedGroup) onRenderFcts.push(function(delta){ smoothedControls.update(markerGroup) }) ////////////////////////////////////////////////////////////////////////////////// // add an object in the scene ////////////////////////////////////////////////////////////////////////////////// var markerScene = new THREE.Scene() smoothedGroup.add(markerScene) var mesh = new THREE.AxesHelper() markerScene.add(mesh) // add a torus knot var geometry = new THREE.BoxGeometry(1,1,1); var material = new THREE.MeshNormalMaterial({ transparent : true, opacity: 0.5, side: THREE.DoubleSide }); var mesh = new THREE.Mesh( geometry, material ); mesh.position.y = geometry.parameters.height/2 markerScene.add(mesh) var geometry = new THREE.TorusKnotGeometry(0.3,0.1,64,16); var material = new THREE.MeshNormalMaterial(); var mesh = new THREE.Mesh( geometry, material ); mesh.position.y = 0.5 markerScene.add( mesh ); onRenderFcts.push(function(delta){ mesh.rotation.y += delta * Math.PI }) ////////////////////////////////////////////////////////////////////////////////// // render the whole thing on the page ////////////////////////////////////////////////////////////////////////////////// // render the scene onRenderFcts.push(function(){ renderer.render( scene, camera ); }) // run the rendering loop var lastTimeMsec= null requestAnimationFrame(function animate(nowMsec){ // keep looping requestAnimationFrame( animate ); // measure time lastTimeMsec = lastTimeMsec || nowMsec-1000/60 var deltaMsec = Math.min(200, nowMsec - lastTimeMsec) lastTimeMsec = nowMsec // call each update function onRenderFcts.forEach(function(onRenderFct){ onRenderFct(deltaMsec/1000, nowMsec/1000) }) }) </script></body>