| Server IP : 162.214.74.102 / Your IP : 216.73.216.139 Web Server : Apache System : Linux dedi-4363141.lrsys.com.br 3.10.0-1160.119.1.el7.tuxcare.els25.x86_64 #1 SMP Wed Oct 1 17:37:27 UTC 2025 x86_64 User : lrsys ( 1015) PHP Version : 5.6.40 Disable Function : exec,passthru,shell_exec,system MySQL : ON | cURL : ON | WGET : ON | Perl : ON | Python : ON | Sudo : ON | Pkexec : ON Directory : /home/lrsys/www/lrsys_apps/marisol/AR/three.js/examples/ |
Upload File : |
<!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='../examples/vendor/three.js/build/three.js'></script>
<!-- include for artoolkit trackingBackend -->
<script src='../vendor/jsartoolkit5/build/artoolkit.min.js'></script>
<script src='../vendor/jsartoolkit5/js/artoolkit.api.js'></script>
<!-- include for aruco trackingBackend -->
<script src='../vendor/js-aruco/src/svd.js'></script>
<script src='../vendor/js-aruco/src/posit1.js'></script>
<script src='../vendor/js-aruco/src/cv.js'></script>
<script src='../vendor/js-aruco/src/aruco.js'></script>
<script src='../src/threex/threex-aruco/threex-arucocontext.js'></script>
<script src='../src/threex/threex-aruco/threex-arucodebug.js'></script>
<!-- include for tango trackingBackend -->
<script src='../vendor/chromium-tango/THREE.WebAR.js'></script>
<!-- include ar.js -->
<script src='../src/new-api/arjs-utils.js'></script>
<script src='../src/threex/threex-artoolkitsource.js'></script>
<script src='../src/threex/threex-artoolkitcontext.js'></script>
<script src='../src/threex/threex-artoolkitprofile.js'></script>
<script src='../src/threex/threex-arbasecontrols.js'></script>
<script src='../src/threex/threex-armarkercontrols.js'></script>
<script src='../src/threex/threex-arsmoothedcontrols.js'></script>
<script src='../src/threex/threex-arclickability.js'></script>
<script>THREEx.ArToolkitContext.baseURL = '../'</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/jeromeetienne/AR.js/' target='_blank'>AR.js</a> - switching between backend
by <a href='https://twitter.com/jerome_etienne' target='_blank'>@jerome_etienne</a>
<br/>
Marker image
<a href='../../data/images/hiro.jpg' target='_blank'>hiro for artoolkit</a>
/
<a href='../../three.js/threex/threex-aruco/examples/images/1001.png' target='_blank'>1001 for aruco</a>
<br/>
<strong>Tracking Backend:</strong> <span id='currentTracking'>unknown</span>
-
Switch to :
<a href='?artoolkit'>artoolkit</a>
/
<a href='?aruco'>aruco</a>
/
<a href='?tango'>tango</a>
</div><script>
var trackingBackend = location.search.substring(1) ? location.search.substring(1) : 'artoolkit'
document.querySelector('#currentTracking').innerHTML = trackingBackend
// if we are running on tango device, ensure trackingBackend is 'tango'
if( trackingBackend !== 'tango' && ARjs.Utils.isTango() === true ){
location.search = '#tango'
location.reload()
}
// TODO make the multi-markers too
// - aruco-area
// - artoolkit-area
// - trackingMethod=
// - trackingBackend=
//
// - thus you got the whole stack available here
// - it dramatically reduce the boilerplate
// - it is the base of the aframe ar.js, the base of webar-playground
// - maybe put all that in a class
// - this is the base of a typical AR.js application - aka support all tracking transparantly
//
// TODO is that required ?
var changeMatrixMode = 'cameraTransformMatrix'
// var changeMatrixMode = 'modelViewMatrix'
//////////////////////////////////////////////////////////////////////////////////
// Init
//////////////////////////////////////////////////////////////////////////////////
// init renderer
var renderer = new THREE.WebGLRenderer({
antialias: true,
alpha: true
});
renderer.autoClear = false;
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 );
// array of functions for the rendering loop
var onRenderFcts= [];
// init scene and camera
var scene = new THREE.Scene();
//////////////////////////////////////////////////////////////////////////////////
// Initialize the camera
//////////////////////////////////////////////////////////////////////////////////
var camera = ARjs.Utils.createDefaultCamera(trackingBackend)
scene.add(camera);
////////////////////////////////////////////////////////////////////////////////
// handle arToolkitSource
////////////////////////////////////////////////////////////////////////////////
var arProfile = new THREEx.ArToolkitProfile()
.sourceWebcam()
.trackingBackend(trackingBackend)
.defaultMarker(trackingBackend)
// FIXME temporary placeholder - to reevaluate later
if( trackingBackend === 'tango' ){
arProfile.sourceImage(THREEx.ArToolkitContext.baseURL + '../data/images/img.jpg')
}
var arToolkitSource = new THREEx.ArToolkitSource(arProfile.sourceParameters)
arToolkitSource.init(function onReady(){
arToolkitSource.onResize(arContext, renderer, camera)
})
// handle resize
window.addEventListener('resize', function(){
arToolkitSource.onResize(arContext, renderer, camera)
})
////////////////////////////////////////////////////////////////////////////////
// initialize arContext
////////////////////////////////////////////////////////////////////////////////
// create atToolkitContext
var arContext = new THREEx.ArToolkitContext(arProfile.contextParameters)
// initialize it
arContext.init()
arContext.addEventListener('initialized', function(event){
arToolkitSource.onResize(arContext, renderer, camera)
})
// update artoolkit on every frame
onRenderFcts.push(function(){
if( arToolkitSource.ready === false ) return
arContext.update( arToolkitSource.domElement )
})
////////////////////////////////////////////////////////////////////////////////
// Create a ArMarkerControls
////////////////////////////////////////////////////////////////////////////////
// honor changeMatrixMode
arProfile.defaultMarkerParameters.changeMatrixMode = changeMatrixMode
var markerRoot = new THREE.Group
scene.add(markerRoot)
if( changeMatrixMode === 'modelViewMatrix' ){
var markerControls = new THREEx.ArMarkerControls(arContext, markerRoot, arProfile.defaultMarkerParameters)
}else if( changeMatrixMode === 'cameraTransformMatrix' ){
var markerControls = new THREEx.ArMarkerControls(arContext, camera, arProfile.defaultMarkerParameters)
}else console.assert(false)
// FIXME tango - the pickability is on the marker
// - aka handle the object positioning in a special function of ArMarkerControls
// - arkitanchor is like ArMarkerControls
// - make it generic to work on plane too, if the marker is markerBased
// - rename it ArAnchorControls ?
// - thus it is clear it isnt a marker - good for arkit and tango
if( changeMatrixMode === 'cameraTransformMatrix' ){
onRenderFcts.push(function(){
// update scene.visible if the marker is seen
arWorldRoot.visible = smoothedRoot.visible
})
}
// build a smoothedControls
var smoothedRoot = new THREE.Group()
scene.add(smoothedRoot)
var smoothedControls = new THREEx.ArSmoothedControls(smoothedRoot)
onRenderFcts.push(function(delta){
smoothedControls.update(markerRoot)
})
// var arWorldRoot = smoothedRoot
var arWorldRoot = new THREE.Group()
// markerRoot.add(arWorldRoot)
smoothedRoot.add(arWorldRoot)
//////////////////////////////////////////////////////////////////////////////
// handle videoMesh for tango
//////////////////////////////////////////////////////////////////////////////
if( trackingBackend === 'tango' ){
// Create the see through camera scene and camera
var sceneVideoMesh = new THREE.Scene()
var cameraVideoMesh = new THREE.OrthographicCamera( -1, 1, 1, -1, 0, 100 )
// tango only - init cameraMesh
arContext.addEventListener('initialized', function(event){
// sanity check
console.assert( arContext.parameters.trackingBackend === 'tango' )
// variable declaration
var vrDisplay = arContext._tangoContext.vrDisplay
console.assert(vrDisplay, 'vrDisplay MUST be defined')
// if vrDisplay isnt for tango, do nothing. It may be another vrDisplay (e.g. webvr emulator in chrome)
if( vrDisplay.displayName !== "Tango VR Device" ) return
// init videoPlane
var videoMesh = THREE.WebAR.createVRSeeThroughCameraMesh(vrDisplay)
sceneVideoMesh.add(videoMesh)
onRenderFcts.push(function(){
// Make sure that the camera is correctly displayed depending on the device and camera orientations.
THREE.WebAR.updateCameraMeshOrientation(vrDisplay, videoMesh)
})
})
}
// tango only - picking to set object position
renderer.domElement.addEventListener("click", function(event) {
if( arContext.parameters.trackingBackend !== 'tango' ) return
var mousePosition = new THREE.Vector3();
mousePosition.x = event.pageX / window.innerWidth;
mousePosition.y = event.pageY / window.innerHeight;
var result = THREEx.ARClickability.tangoPickingPointCloud(arContext, mousePosition.x, mousePosition.y)
if( result === null ) return
arWorldRoot.position.copy(result.position)
arWorldRoot.quaternion.copy(result.quaternion)
arWorldRoot.scale.set(1,1,1).multiplyScalar(0.1)
})
//////////////////////////////////////////////////////////////////////////////////
// add an object in the scene
//////////////////////////////////////////////////////////////////////////////////
var mesh = new THREE.AxisHelper()
arWorldRoot.add(mesh)
// add a torus knot
var geometry = new THREE.CubeGeometry(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
arWorldRoot.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
arWorldRoot.add( mesh );
onRenderFcts.push(function(delta){
mesh.rotation.x += Math.PI*delta
})
//////////////////////////////////////////////////////////////////////////////////
// render the whole thing on the page
//////////////////////////////////////////////////////////////////////////////////
// render the scene
onRenderFcts.push(function(){
// Render the see through camera scene
renderer.clear()
// render videoMesh for tango
if( arContext.parameters.trackingBackend === 'tango'){
renderer.render( sceneVideoMesh, cameraVideoMesh )
// Render the perspective scene
renderer.clearDepth()
}
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>