1. <!DOCTYPE html>
  2. <html lang="en">
  3. 	<head>
  4. 		<title>fMRI suprathreshold regions web rendered</title>
  5. 		<meta charset="utf-8">
  6. 		<meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
  7. 		<style>
  8. 			body {
  9. 				font-family: Monospace;
  10. 				background-color: #000;
  11. 				color: #fff;
  12. 				margin: 0px;
  13. 				overflow: hidden;
  14. 			}
  15. 			#info {
  16. 				color: #fff;
  17. 				position: absolute;
  18. 				top: 10px;
  19. 				width: 100%;
  20. 				text-align: center;
  21. 				z-index: 100;
  22. 				display:block;
  23. 			}
  24. 			#info a, .button { color: #f00; font-weight: bold; text-decoration: underline; cursor: pointer }
  25. 		</style>
  26. 	</head>
  27.  
  28. 	<body>
  29. 		<div id="info">
  30. 		web rendering using <a href="http://threejs.org" target="_blank">three.js</a> -
  31. 		suprathreshold regions rendered on brain model from Kochunov 2002</a>,
  32. 		</div>
  33.  
  34. 		<script src="build/three.min.js"></script>
  35.  
  36. 		<script src="js/controls/TrackballControls.js"></script>
  37.  
  38. 		<script src="js/loaders/VTKLoader.js"></script>
  39.  
  40. 		<script src="js/Detector.js"></script>
  41. 		<script src="js/libs/stats.min.js"></script>
  42.  
  43. 		<script>
  44.  
  45. 			if ( ! Detector.webgl ) Detector.addGetWebGLMessage();
  46.  
  47. 			var container, stats;
  48.  
  49. 			var camera, controls, scene, renderer;
  50.  
  51. 			var cross;
  52.  
  53. 			init();
  54. 			animate();
  55.  
  56. 			function init() {
  57.  
  58. 				camera = new THREE.PerspectiveCamera( 60, window.innerWidth / window.innerHeight, 0.05, 1e10 );
  59. 				//camera.position.z = 0.2;
  60. 				//camera.position.x = 0.3;
  61. 				//camera.position.y = 0.3;
  62. 				camera.position.set(0,0,250)
  63.  
  64. 				controls = new THREE.TrackballControls( camera );
  65.  
  66. 				controls.rotateSpeed = 5.0;
  67. 				controls.zoomSpeed = 5;
  68. 				controls.panSpeed = 2;
  69.  
  70. 				controls.noZoom = false;
  71. 				controls.noPan = false;
  72.  
  73. 				controls.staticMoving = true;
  74. 				controls.dynamicDampingFactor = 0.3;
  75.  
  76. 				scene = new THREE.Scene();
  77.  
  78. 				scene.add( camera );
  79.  
  80. 				// light
  81.  
  82. 				var dirLight = new THREE.DirectionalLight( 0xffffff );
  83. 				dirLight.position.set( 200, 200, 1000 ).normalize();
  84.  
  85. 				camera.add( dirLight );
  86. 				camera.add( dirLight.target );
  87.  
  88. 				var material = new THREE.MeshLambertMaterial( { color:0xffffff, side: THREE.DoubleSide,  transparent: true, opacity: 0.5 } );
  89.  
  90. 				var material2 = new THREE.MeshLambertMaterial( { color:0xff0000, side: THREE.DoubleSide } );
  91.  
  92. 				var loader = new THREE.VTKLoader();
  93. 				loader.addEventListener( "load", function ( event ) {
  94.  
  95. 					var geometry = event.content;
  96.  
  97. 					var mesh = new THREE.Mesh( geometry, material );
  98. 					mesh.position.set(.05, -0.19, 0 );
  99. 					scene.add( mesh );
  100.  
  101. 				} );
  102.  
  103. 				var loader2 = new THREE.VTKLoader();
  104. 				loader2.addEventListener( "load", function ( event ) {
  105.  
  106. 					var geometry2 = event.content;
  107.  
  108.  
  109. 					var mesh = new THREE.Mesh( geometry2, material2 );
  110. 					mesh.position.set(0.5, -0.19, 0 );
  111. 					scene.add( mesh );
  112.  
  113. 				} );
  114.  
  115.  
  116. 				loader.load( "models/glass_brain.vtk" );
  117. 				loader2.load( "models/overlay.vtk" );
  118.  
  119. 				// renderer
  120.  
  121. 				renderer = new THREE.WebGLRenderer( { antialias: false } );
  122. 				renderer.setSize( window.innerWidth, window.innerHeight );
  123.  
  124. 				container = document.createElement( "div" );
  125. 				document.body.appendChild( container );
  126. 				container.appendChild( renderer.domElement );
  127.  
  128. 				stats = new Stats();
  129. 				stats.domElement.style.position = "absolute";
  130. 				stats.domElement.style.top = "0px";
  131. 				container.appendChild( stats.domElement );
  132.  
  133. 				//
  134.  
  135. 				window.addEventListener( "resize", onWindowResize, false );
  136.  
  137. 			}
  138.  
  139. 			function onWindowResize() {
  140.  
  141. 				camera.aspect = window.innerWidth / window.innerHeight;
  142. 				camera.updateProjectionMatrix();
  143.  
  144. 				renderer.setSize( window.innerWidth, window.innerHeight );
  145.  
  146. 				controls.handleResize();
  147.  
  148. 			}
  149.  
  150. 			function animate() {
  151.  
  152. 				requestAnimationFrame( animate );
  153.  
  154. 				controls.update();
  155. 				renderer.render( scene, camera );
  156.  
  157. 				stats.update();
  158.  
  159. 			}
  160.  
  161. 		</script>
  162.  
  163. 	</body>
  164. </html>
  165.