dev.html

<!DOCTYPE html>
<meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
<!-- include babylon.js -->
<script src="vendor/babylon.max.js"></script> 
<!-- include three.js -->
<script src='../../three.js/examples/vendor/three.js/build/three.js'></script>
<!-- include ar.js -->
<script src="../../three.js/build/ar.js"></script>
<script>THREEx.ArToolkitContext.baseURL = '../../three.js/'</script> 

<script src="../src/babylon-ar.js"></script>


<body style='margin : 0px; overflow: hidden; font-family: Monospace;'>
<script>
window.addEventListener('DOMContentLoaded', function(){
	//////////////////////////////////////////////////////////////////////////////
	//		create canvasElement
	//////////////////////////////////////////////////////////////////////////////
	var canvasElement = document.createElement('canvas')
	canvasElement.style.width = '100%'
	canvasElement.style.height = '100%'
	canvasElement.style.position = 'absolute'
	canvasElement.style.zIndex = -1
	document.body.appendChild(canvasElement)
	var engine = new BABYLON.Engine(canvasElement, true)
	var babylonCamera;

	
	/******************************CREATE-MOON*****************************/
	var createMoon = function(){
		var material = new BABYLON.StandardMaterial("proutMaterial", scene)
		material.diffuseTexture = new BABYLON.Texture("images/UV_Grid_Sm.jpg", scene)
		
		var mesh = BABYLON.Mesh.CreateSphere("mesh", 12, 1, scene)

		// mesh.position.y = 60;
		mesh.material = material;
		mesh.position = new BABYLON.Vector3(0,0, 0)
	}
	
	var displayMeshAxis = function (mesh) {
		mesh.computeWorldMatrix()
		var matrix = mesh.getWorldMatrix()
		var origin = mesh.position;
		// find existing axis for this box and dispose
		var xAxis = scene.getMeshByName("xAxis"+mesh.name)
		var yAxis = scene.getMeshByName("yAxis"+mesh.name)
		var zAxis = scene.getMeshByName("zAxis"+mesh.name)
		if (xAxis!=null){ xAxis.dispose()}
		if (yAxis!=null){ yAxis.dispose()}
		if (zAxis!=null){ zAxis.dispose()}
		// calculate new normals for this mesh in world coordinate system
		var xNormal=BABYLON.Vector3.TransformCoordinates(new BABYLON.Vector3(100,0,0),matrix)
		var yNormal=BABYLON.Vector3.TransformCoordinates(new BABYLON.Vector3(0,100,0),matrix)
		var zNormal=BABYLON.Vector3.TransformCoordinates(new BABYLON.Vector3(0,0,100),matrix)
		// create axis lines
		xAxis = BABYLON.Mesh.CreateDashedLines("xAxis"+mesh.name, [origin, xNormal],3,10,200, scene, false)
		xAxis.color = BABYLON.Color3.Red()
		yAxis = BABYLON.Mesh.CreateDashedLines("yAxis"+mesh.name, [origin, yNormal],3,10,200, scene, false)
		yAxis.color = BABYLON.Color3.Green()
		zAxis = BABYLON.Mesh.CreateDashedLines("zAxis"+mesh.name, [origin, zNormal],3,10,200, scene, false)
		zAxis.color = BABYLON.Color3.Blue()
	}
	
	/****************************CREATE-SYMPHONY*******************************/
	var createImagePlane = function(){
		var mesh = BABYLON.MeshBuilder.CreatePlane("plane1", {
			size: 2,
			sideOrientation: BABYLON.Mesh.DOUBLESIDE
		}, scene)
		mesh.position = new BABYLON.Vector3(0,0, 0)
		mesh.rotation.y = Math.PI

		var material = new BABYLON.StandardMaterial("texturePlane", scene)
		material.twoSidedLighting = true
		material.diffuseTexture = new BABYLON.Texture("images/UV_Grid_Sm.jpg", scene)
		material.specularColor = new BABYLON.Color3(1, 1, 1)
		mesh.material = material		
	}
	
	/******************************Initialization******************************/
	var scene = new BABYLON.Scene(engine)
	scene.useRightHandedSystem = true
	scene.clearColor = new BABYLON.Color4(0, 0, 0, 0)

	var babylonCamera = ARjs.Babylon.createCamera(scene)

	// add ligts
	var light = new BABYLON.HemisphericLight('light1', new BABYLON.Vector3(0,10,0), scene)
	light.intensity = 0.4
	var light = new BABYLON.DirectionalLight("dir01", new BABYLON.Vector3(-1, -2, -1), scene)
	light.position = new BABYLON.Vector3(20, 39, 20)
	light.intensity = 0.5
	
	createMoon()
	createImagePlane()
	
	engine.runRenderLoop(function(){
		ARjs.Babylon.updateObjectPose(babylonCamera, camera)

		scene.render()
	})
	
	window.addEventListener('resize', function(){
		engine.resize()
	})
})
 </script>

<script>
// ;(function(){
// 	
// })()
	//////////////////////////////////////////////////////////////////////////////////
	//		Init
	//////////////////////////////////////////////////////////////////////////////////

	// init renderer
	var 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'

	// array of functions for the rendering loop
	var onRenderFcts= [];

	// init scene and camera
	var scene	= new THREE.Scene()

	var trackingMethod = 'area-artoolkit'

	//////////////////////////////////////////////////////////////////////////////////
	//		Initialize the camera
	//////////////////////////////////////////////////////////////////////////////////

	var camera = ARjs.Utils.createDefaultCamera(trackingMethod)
	scene.add(camera)

	
	////////////////////////////////////////////////////////////////////////////////
	//          	Set up Arjs.Profile
	////////////////////////////////////////////////////////////////////////////////

	var arProfile = new ARjs.Profile()
		.sourceWebcam()
		.trackingMethod(trackingMethod)
		// .changeMatrixMode('modelViewMatrix')
		.changeMatrixMode('cameraTransformMatrix')
		.defaultMarker()
		.checkIfValid()


	if( arProfile.contextParameters.trackingBackend === 'tango' ){
		arProfile.changeMatrixMode('cameraTransformMatrix')
	}

	//////////////////////////////////////////////////////////////////////////////
	//		build ARjs.Session
	//////////////////////////////////////////////////////////////////////////////

	var arSession = new ARjs.Session({
		scene: scene,
		renderer: renderer,
		camera: camera,
		sourceParameters: arProfile.sourceParameters,
		contextParameters: arProfile.contextParameters		
	})
	onRenderFcts.push(function(){
		arSession.update()
	})
	
	////////////////////////////////////////////////////////////////////////////////
	//          Create a ARjs.Anchor
	////////////////////////////////////////////////////////////////////////////////

	var arAnchor = new ARjs.Anchor(arSession, arProfile.defaultMarkerParameters)
	onRenderFcts.push(function(){
		arAnchor.update()
	})

	//////////////////////////////////////////////////////////////////////////////////
	//		add an object in the scene
	//////////////////////////////////////////////////////////////////////////////////

	var arWorldRoot = arAnchor.object3d

	// 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(){
		// update all matrixWorld
		scene.updateMatrixWorld()
	})

	if( true ){
		document.body.appendChild( renderer.domElement )
		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>

</html>