more work

aa9d201e · Jerome Etienne · 741932ff · aa9d201e · 741932ff · 741932ff
隐藏空白更改
内联并排

Showing with 3 addition and 318 deletion

README.md README.md +3 -3

three.js/examples/markercache.html three.js/examples/markercache.html +0 -211

three.js/threex-armarkercache.js three.js/threex-armarkercache.js +0 -104

未找到文件。
--- a/README.md
+++ b/README.md
@@ -105,9 +105,9 @@ Three.js Examples:
 - [refraction](https://jeromeetienne.github.io/AR.js/three.js/examples/refraction.html) : 
  three.js example for refraction
  ([source](https://github.com/jeromeetienne/AR.js/blob/master/three.js/examples/refraction.html))
- [markercache](https://jeromeetienne.github.io/AR.js/three.js/examples/markercache.html) : 
+- [markercloak](https://jeromeetienne.github.io/AR.js/three.js/examples/markercloak.html) : 
-  three.js example for markercache
+  three.js example for markercloak
-  ([source](https://github.com/jeromeetienne/AR.js/blob/master/three.js/examples/markercache.html))
+  ([source](https://github.com/jeromeetienne/AR.js/blob/master/three.js/examples/markercloak.html))
 a-frame Examples: 

--- a/three.js/examples/markercache.html
+++ b/three.js/examples/markercache.html
-<!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>
-<!-- jsartookit -->
-<script src="../vendor/jsartoolkit5/build/artoolkit.min.js"></script>
-<script src="../vendor/jsartoolkit5/js/artoolkit.api.js"></script>
-<!-- include threex.artoolkit -->
-<script src="../threex-artoolkitsource.js"></script>
-<script src="../threex-artoolkitcontext.js"></script>
-<script src="../threex-artoolkitprofile.js"></script>
-<script src="../threex-armarkercontrols.js"></script>
-<script src="../threex-armarkercache.js"></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> - developement playground
-	<br/>
-	Contact me any time at <a href='https://twitter.com/jerome_etienne' target='_blank'>@jerome_etienne</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 );
-	renderer.autoClear = false;
-	// array of functions for the rendering loop
-	var onRenderFcts= [];
-	// init scene and camera
-	var scene	= new THREE.Scene();
-	var ambient = new THREE.AmbientLight( 0x666666 );
-	scene.add( ambient );
-	var directionalLight = new THREE.DirectionalLight( 0x887766 );
-	directionalLight.position.set( -1, 1, 1 ).normalize();
-	scene.add( directionalLight );
-	//////////////////////////////////////////////////////////////////////////////////
-	//		Initialize a basic camera
-	//////////////////////////////////////////////////////////////////////////////////
-	// Create a camera
-	var camera = new THREE.Camera();
-	scene.add(camera);
-	//////////////////////////////////////////////////////////////////////////////
-	//		Code Separator
-	//////////////////////////////////////////////////////////////////////////////
-        var orthoCamera = new THREE.OrthographicCamera(-1, 1, 1, -1, -100, +100);
-        var orthoScene = new THREE.Scene();
-	////////////////////////////////////////////////////////////////////////////////
-	//          handle arToolkitSource
-	////////////////////////////////////////////////////////////////////////////////
-	var arToolkitSource = new THREEx.ArToolkitSource({
-		// to read from the webcam 
-		sourceType : 'webcam',
-		// to read from an image
-		// sourceType : 'image',
-		// sourceUrl : '../../data/images/img.jpg',		
-		// to read from a video
-		// sourceType : 'video',
-		// sourceUrl : '../../data/videos/headtracking.mp4',		
-		sourceWidth: 80*3,
-		sourceHeight: 60*3,
-	})
-	arToolkitSource.init(function onReady(){
-		console.log('source is ready')
-		// handle resize of renderer
-		arToolkitSource.onResize(renderer.domElement)		
-	})
-	// handle resize
-	window.addEventListener('resize', function(){
-		// handle arToolkitSource resize
-		arToolkitSource.onResize(renderer.domElement)		
-	})
-	////////////////////////////////////////////////////////////////////////////////
-	//          initialize arToolkitContext
-	////////////////////////////////////////////////////////////////////////////////	
-	// create atToolkitContext
-	var arToolkitContext = new THREEx.ArToolkitContext({
-		cameraParametersUrl: '../../data/data/camera_para.dat',
-		detectionMode: 'mono',
-		sourceWidth: arToolkitSource.parameters.sourceWidth,
-		sourceHeight: arToolkitSource.parameters.sourceHeight,
-	})
-	// 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 markerRoot = new THREE.Group
-	scene.add(markerRoot)
-	var artoolkitMarker = new THREEx.ArMarkerControls(arToolkitContext, markerRoot, {
-		type : 'pattern',
-		patternUrl : '../../data/data/patt.hiro',
-		// patternUrl : '../../data/data/patt.kanji',
-	})
-	//////////////////////////////////////////////////////////////////////////////////
-	//		add an object in the scene
-	//////////////////////////////////////////////////////////////////////////////////
-	// arToolkitSource.domElement.pause()
-	var videoTexture = new THREE.VideoTexture(arToolkitSource.domElement)
-	// TODO to remove if webgl2
-	videoTexture.minFilter =  THREE.NearestFilter
-	var markerCache =  new THREEx.ArMarkerCache(videoTexture);
-	markerRoot.add(markerCache.cacheMesh)
-	orthoScene.add(markerCache.orthoMesh)
-	onRenderFcts.push(function(){
-		markerCache.update(markerRoot.matrix, camera.projectionMatrix)
-	})
-	//////////////////////////////////////////////////////////////////////////////////
-	//		add an object in the scene
-	//////////////////////////////////////////////////////////////////////////////////
-	// 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.z	= geometry.parameters.height/2
-	markerRoot.add( mesh );
-	var geometry	= new THREE.TorusKnotGeometry(0.3,0.1,32,32);
-	var material	= new THREE.MeshNormalMaterial(); 
-	var mesh	= new THREE.Mesh( geometry, material );
-	mesh.position.z	= 0.5
-	markerRoot.add( mesh );
-	onRenderFcts.push(function(){
-		mesh.rotation.x += 0.1
-	})
-	//////////////////////////////////////////////////////////////////////////////////
-	//		render the whole thing on the page
-	//////////////////////////////////////////////////////////////////////////////////
-	var stats = new Stats();
-	// document.body.appendChild( stats.dom );
-	// render the scene
-	onRenderFcts.push(function(){
-		renderer.clear();
-		renderer.render( scene, camera );
-        	renderer.render( orthoScene, orthoCamera );
-		stats.update();
-	})
-	// 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>
--- a/three.js/threex-armarkercache.js
+++ b/three.js/threex-armarkercache.js
-var THREEx = THREEx || {}
-THREEx.ArMarkerCache = function(videoTexture){
-        var material = new THREE.MeshNormalMaterial({
-		transparent : true,
-		opacity: 0.5,
-		side: THREE.DoubleSide
-	});
-        var geometry = new THREE.PlaneGeometry(1,1);
-        var orthoMesh = new THREE.Mesh(geometry, material);
-	this.orthoMesh = orthoMesh
-	var geometry	= new THREE.PlaneGeometry(1.3+0.2,1.85+0.2, 1, 8);
-	var material	= new THREE.MeshBasicMaterial({
-		transparent : true,
-		opacity: 0.5,
-		side: THREE.DoubleSide,
-		map: videoTexture,
-	}); 
-	var cacheMesh = new THREE.Mesh( geometry, material );
-	cacheMesh.position.y = -0.3
-	this.cacheMesh = cacheMesh
-	//////////////////////////////////////////////////////////////////////////////
-	//		Code Separator
-	//////////////////////////////////////////////////////////////////////////////
-	var xMin = -0.65
-	var xMax =  0.65
-	var yMin =  0.75
-	var yMax =  1.05
-	var originalUvs = []
-	originalUvs.push( new THREE.Vector3(xMin, yMax, 0))
-	originalUvs.push( new THREE.Vector3(xMax, yMax, 0))
-	originalUvs.push( new THREE.Vector3(xMin, yMin, 0))
-	originalUvs.push( new THREE.Vector3(xMax, yMin, 0))
-	this.update = function(modelViewMatrix, cameraProjectionMatrix){
-		var transformedUvs = []
-		originalUvs.forEach(function(originalUvs, index){
-			var transformedUv = originalUvs.clone()
-			// apply modelViewMatrix and projectionMatrix
-			transformedUv.applyMatrix4( modelViewMatrix )
-			transformedUv.applyMatrix4( cameraProjectionMatrix )
-			// apply perspective
-			transformedUv.x /= transformedUv.z
-			transformedUv.y /= transformedUv.z
-			// store it
-			transformedUvs.push(transformedUv)
-		})
-		// change orthoMesh vertices
-		for(var i = 0; i < transformedUvs.length; i++){
-			orthoMesh.geometry.vertices[i].copy(transformedUvs[i])
-		}
-		orthoMesh.geometry.computeBoundingSphere()
-		orthoMesh.geometry.verticesNeedUpdate = true
-		// change cacheMesh UVs
-		for(var i = 0; i < cacheMesh.geometry.parameters.heightSegments/2; i ++ ){
-			// normale orientation
-			cacheMesh.geometry.faceVertexUvs[0][i*4+0][0].copy( convertUvs(0, 1) )
-			cacheMesh.geometry.faceVertexUvs[0][i*4+0][1].copy( convertUvs(0, 0) )
-			cacheMesh.geometry.faceVertexUvs[0][i*4+0][2].copy( convertUvs(1, 1) )
-			cacheMesh.geometry.faceVertexUvs[0][i*4+1][0].copy( convertUvs(0, 0) )
-			cacheMesh.geometry.faceVertexUvs[0][i*4+1][1].copy( convertUvs(1, 0) )
-			cacheMesh.geometry.faceVertexUvs[0][i*4+1][2].copy( convertUvs(1, 1) )
-			// swapy orientation
-			cacheMesh.geometry.faceVertexUvs[0][i*4+2][0].copy( convertUvs(0, 0) )
-			cacheMesh.geometry.faceVertexUvs[0][i*4+2][1].copy( convertUvs(0, 1) )
-			cacheMesh.geometry.faceVertexUvs[0][i*4+2][2].copy( convertUvs(1, 0) )
-			cacheMesh.geometry.faceVertexUvs[0][i*4+3][0].copy( convertUvs(0, 1) )
-			cacheMesh.geometry.faceVertexUvs[0][i*4+3][1].copy( convertUvs(1, 1) )
-			cacheMesh.geometry.faceVertexUvs[0][i*4+3][2].copy( convertUvs(1, 0) )
-		}
-		cacheMesh.geometry.uvsNeedUpdate = true
-		function convertUvs(x, y){
-			if( x === 0 && y === 0 ){
-				var transformedUv = transformedUvs[2]
-			}else if( x === 0 && y === 1 ){
-				var transformedUv = transformedUvs[0]
-			}else if( x === 1 && y === 1 ){
-				var transformedUv = transformedUvs[1]
-			}else if( x === 1 && y === 0 ){
-				var transformedUv = transformedUvs[3]
-			}else {
-				console.assert(false)
-			}
-			var Uv = new THREE.Vector2()
-			Uv.x = transformedUv.x / 2 + 0.5
-			Uv.y = transformedUv.y / 2 + 0.5
-			return Uv
-		}
-	}
-}