jonathanlurie/index.html

## index.html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1" />
  <meta name=keywords  content="coma, separated, keywords" />
  <meta name=description  content="This is the description" />
  <meta  property=og:title content="Page Title" />
  <meta  property=og:description content="This is the description" />
  <meta  property=og:image content="http://me.jonathanlurie.fr/images/bg.jpg" />

  <title>Three cube</title>

  <!-- <link rel="stylesheet" href="style.css" type="text/css" /> -->

  <style>


  body {
    margin:0;
    font-family: 'monospace';
    font-size: 15px;
    line-height: 18px;
    overflow: hidden;
  }

  a {
    text-decoration: none;
    color: #03a9f4;
    transition: all 0.2s;
  }

  a:hover {
    color: #f17878;
  }

  #info {
    text-align: center;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    margin: auto;
    padding: 5px;
  }

  .logoCorner{
    position: absolute;
    bottom: 0;
    left: 0;
    width: 60px;
    margin: 10px;

    border-color: rgba(0, 0, 0, 0);
    border-style: dashed;
    border-radius: 50%;
    transition: all 0.2s;
  }

  .logoCorner:hover{
    border-color: #03a9f4;
  }


  </style>
  <script src="https://threejs.org/build/three.min.js"></script>
  <script src='https://threejs.org/examples/js/libs/dat.gui.min.js'></script>
  <script src='https://threejs.org/examples/js/libs/stats.min.js'></script>
  <script src="https://threejs.org/examples/js/controls/OrbitControls.js"></script>


</head>
<body>

  <div id="info">
    This is a Three JS sample, <a href="https://github.com/jonathanlurie/starters" target="_blank">fork it on Github!</a>
  </div>

  <a href="https://github.com/jonathanlurie/starter" target="_blank">
    <img class="logoCorner" src="http://me.jonathanlurie.fr/starter/images/githublogo.png"/>
  </a>


  <script>

  var gui = null;
  var guiParam = {};
  var stats = null;
  var renderer = null;
  var scene = null;
  var camera = null;
  var container = null;
  var cameraControls = null;
  var cube = null;
  var transfoCube = null;
  var sizeInVoxel = {i: 36, j: 64, k: 64};

  // in real life, it's actually the transposee of this one
  var v2wArray = [
    -3.9960771014145404, 0.04266053565688257, 0.171894962834382, 0,
    0.04268376743964406, 3.9997722377512037, -0.0003769773078892613, 0,
    0.17188921604281912, -0.00145767373123319, 3.996305267030157, 0,
    127.16735076904297, -104.70928955078125, -74.57984924316406, 1
  ]


  function initGui(){

    stats = new Stats();
    document.body.appendChild(stats.dom);

    gui = new dat.GUI();

    // a button to change the color
    guiParam.changeColor = function(){
      container.children[0].material.color.r = Math.random();
      container.children[0].material.color.g = Math.random();
      container.children[0].material.color.b = Math.random();
     }
     gui.add(guiParam, 'changeColor').name('Change color');
  }


  function init(){

    renderer = new THREE.WebGLRenderer( { antialias: true } );
    scene = new THREE.Scene();
    camera = new THREE.PerspectiveCamera( 75, window.innerWidth / window.innerHeight, 0.1, 5000 );
    container = new THREE.Object3D();

    camera.position.z = 200;

    renderer.setPixelRatio( window.devicePixelRatio );
    renderer.setSize( window.innerWidth, window.innerHeight );
    renderer.setClearColor( 0xEEEEEE, 1 );
    document.body.appendChild( renderer.domElement );

    var axisHelper = new THREE.AxisHelper( 100 );
    scene.add( axisHelper );


    var orbit = new THREE.OrbitControls( camera, renderer.domElement );

    /*
    var geometry = new THREE.BoxGeometry( sizeInVoxel.k, sizeInVoxel.j, sizeInVoxel.i );
    //var material = new THREE.MeshPhongMaterial({ color: 0xffaaff, vertexColors: THREE.VertexColors, shininess: 0, opacity: 0.5, transparent: true	} );
    var material = new THREE.MeshBasicMaterial({
      color: 0x7E2FB4,
      wireframe: true,

  });
    cube = new THREE.Mesh( geometry, material );
    //cube.translateX( sizeInVoxel.k/2 );
    //cube.translateY( sizeInVoxel.j/2 );
    //cube.translateZ( sizeInVoxel.i/2 );
    */
    //container.add( cube );

    var geometry = new THREE.BoxBufferGeometry( sizeInVoxel.k, sizeInVoxel.j, sizeInVoxel.i );
    var edges = new THREE.EdgesGeometry( geometry );
    cube = new THREE.LineSegments( edges, new THREE.LineBasicMaterial( { color: 0xff0000 } ) );
    cube.translateX( sizeInVoxel.k/2 );
    cube.translateY( sizeInVoxel.j/2 );
    cube.translateZ( sizeInVoxel.i/2 );
    scene.add( cube );

    transfoCube = cube.clone();
    transfoCube.add( new THREE.AxisHelper( 1 ) );
    scene.add( transfoCube );


    var v2w = new THREE.Matrix4();
    v2w.set(...v2wArray);
    v2w.transpose();


    var translate = new THREE.Matrix4();
    translate.makeTranslation( sizeInVoxel.k/2, sizeInVoxel.j/2, sizeInVoxel.i/2  );

    //var transfo = new THREE.Matrix4().multiplyMatrices( translate, v2w );
    var transfo = new THREE.Matrix4().multiplyMatrices( v2w , translate);
    transfoCube.applyMatrix( transfo )

    var v2wQuat = new THREE.Quaternion();
    var v2wScale = new THREE.Vector3();
    var v2wPosition = new THREE.Vector3();
    v2w.decompose ( v2wPosition , v2wQuat, v2wScale );
    var brainCenter = new THREE.Vector3(0, 0, 0);
    brainCenter.applyMatrix4( v2w );
    var brainCenterHelper = new THREE.AxisHelper( 1000 );
    brainCenterHelper.name = "brainCenterHelper";
    brainCenterHelper.applyQuaternion( v2wQuat )
    scene.add( brainCenterHelper )

    initGui();
  }


  function render() {
    requestAnimationFrame( render );
    stats.update();
    renderer.render( scene, camera );
  };


  window.addEventListener( 'resize', function () {
    camera.aspect = window.innerWidth / window.innerHeight;
    camera.updateProjectionMatrix();
    renderer.setSize( window.innerWidth, window.innerHeight );
  }, false );


  init();
  render();
/*
  var controller = Leap.loop(function(frame){

    if( !frame.hands.length )
      return;

    var hand = frame.hands[0]

    var translation = hand.translation( controller.frame(2) );
    console.log( translation );
    camera.position.z += translation[2] / 5;
  });
*/
  </script>
</body>
</html>

	<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta charset="UTF-8" />
	<meta name="viewport" content="width=device-width, initial-scale=1" />
	<meta name=keywords content="coma, separated, keywords" />
	<meta name=description content="This is the description" />
	<meta property=og:title content="Page Title" />
	<meta property=og:description content="This is the description" />
	<meta property=og:image content="http://me.jonathanlurie.fr/images/bg.jpg" />

	<title>Three cube</title>

	<!-- <link rel="stylesheet" href="style.css" type="text/css" /> -->

	<style>


	body {
	margin:0;
	font-family: 'monospace';
	font-size: 15px;
	line-height: 18px;
	overflow: hidden;
	}

	a {
	text-decoration: none;
	color: #03a9f4;
	transition: all 0.2s;
	}

	a:hover {
	color: #f17878;
	}

	#info {
	text-align: center;
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	margin: auto;
	padding: 5px;
	}

	.logoCorner{
	position: absolute;
	bottom: 0;
	left: 0;
	width: 60px;
	margin: 10px;

	border-color: rgba(0, 0, 0, 0);
	border-style: dashed;
	border-radius: 50%;
	transition: all 0.2s;
	}

	.logoCorner:hover{
	border-color: #03a9f4;
	}


	</style>
	<script src="https://threejs.org/build/three.min.js"></script>
	<script src='https://threejs.org/examples/js/libs/dat.gui.min.js'></script>
	<script src='https://threejs.org/examples/js/libs/stats.min.js'></script>
	<script src="https://threejs.org/examples/js/controls/OrbitControls.js"></script>


	</head>
	<body>

	<div id="info">
	This is a Three JS sample, <a href="https://github.com/jonathanlurie/starters" target="_blank">fork it on Github!</a>
	</div>

	<a href="https://github.com/jonathanlurie/starter" target="_blank">
	<img class="logoCorner" src="http://me.jonathanlurie.fr/starter/images/githublogo.png"/>
	</a>


	<script>

	var gui = null;
	var guiParam = {};
	var stats = null;
	var renderer = null;
	var scene = null;
	var camera = null;
	var container = null;
	var cameraControls = null;
	var cube = null;
	var transfoCube = null;
	var sizeInVoxel = {i: 36, j: 64, k: 64};

	// in real life, it's actually the transposee of this one
	var v2wArray = [
	-3.9960771014145404, 0.04266053565688257, 0.171894962834382, 0,
	0.04268376743964406, 3.9997722377512037, -0.0003769773078892613, 0,
	0.17188921604281912, -0.00145767373123319, 3.996305267030157, 0,
	127.16735076904297, -104.70928955078125, -74.57984924316406, 1
	]


	function initGui(){

	stats = new Stats();
	document.body.appendChild(stats.dom);

	gui = new dat.GUI();

	// a button to change the color
	guiParam.changeColor = function(){
	container.children[0].material.color.r = Math.random();
	container.children[0].material.color.g = Math.random();
	container.children[0].material.color.b = Math.random();
	}
	gui.add(guiParam, 'changeColor').name('Change color');
	}


	function init(){

	renderer = new THREE.WebGLRenderer( { antialias: true } );
	scene = new THREE.Scene();
	camera = new THREE.PerspectiveCamera( 75, window.innerWidth / window.innerHeight, 0.1, 5000 );
	container = new THREE.Object3D();

	camera.position.z = 200;

	renderer.setPixelRatio( window.devicePixelRatio );
	renderer.setSize( window.innerWidth, window.innerHeight );
	renderer.setClearColor( 0xEEEEEE, 1 );
	document.body.appendChild( renderer.domElement );

	var axisHelper = new THREE.AxisHelper( 100 );
	scene.add( axisHelper );


	var orbit = new THREE.OrbitControls( camera, renderer.domElement );

	/*
	var geometry = new THREE.BoxGeometry( sizeInVoxel.k, sizeInVoxel.j, sizeInVoxel.i );
	//var material = new THREE.MeshPhongMaterial({ color: 0xffaaff, vertexColors: THREE.VertexColors, shininess: 0, opacity: 0.5, transparent: true } );
	var material = new THREE.MeshBasicMaterial({
	color: 0x7E2FB4,
	wireframe: true,

	});
	cube = new THREE.Mesh( geometry, material );
	//cube.translateX( sizeInVoxel.k/2 );
	//cube.translateY( sizeInVoxel.j/2 );
	//cube.translateZ( sizeInVoxel.i/2 );
	*/
	//container.add( cube );

	var geometry = new THREE.BoxBufferGeometry( sizeInVoxel.k, sizeInVoxel.j, sizeInVoxel.i );
	var edges = new THREE.EdgesGeometry( geometry );
	cube = new THREE.LineSegments( edges, new THREE.LineBasicMaterial( { color: 0xff0000 } ) );
	cube.translateX( sizeInVoxel.k/2 );
	cube.translateY( sizeInVoxel.j/2 );
	cube.translateZ( sizeInVoxel.i/2 );
	scene.add( cube );

	transfoCube = cube.clone();
	transfoCube.add( new THREE.AxisHelper( 1 ) );
	scene.add( transfoCube );


	var v2w = new THREE.Matrix4();
	v2w.set(...v2wArray);
	v2w.transpose();



	var translate = new THREE.Matrix4();
	translate.makeTranslation( sizeInVoxel.k/2, sizeInVoxel.j/2, sizeInVoxel.i/2 );

	//var transfo = new THREE.Matrix4().multiplyMatrices( translate, v2w );
	var transfo = new THREE.Matrix4().multiplyMatrices( v2w , translate);
	transfoCube.applyMatrix( transfo )

	var v2wQuat = new THREE.Quaternion();
	var v2wScale = new THREE.Vector3();
	var v2wPosition = new THREE.Vector3();
	v2w.decompose ( v2wPosition , v2wQuat, v2wScale );
	var brainCenter = new THREE.Vector3(0, 0, 0);
	brainCenter.applyMatrix4( v2w );
	var brainCenterHelper = new THREE.AxisHelper( 1000 );
	brainCenterHelper.name = "brainCenterHelper";
	brainCenterHelper.applyQuaternion( v2wQuat )
	scene.add( brainCenterHelper )

	initGui();
	}


	function render() {
	requestAnimationFrame( render );
	stats.update();
	renderer.render( scene, camera );
	};


	window.addEventListener( 'resize', function () {
	camera.aspect = window.innerWidth / window.innerHeight;
	camera.updateProjectionMatrix();
	renderer.setSize( window.innerWidth, window.innerHeight );
	}, false );



	init();
	render();
	/*
	var controller = Leap.loop(function(frame){

	if( !frame.hands.length )
	return;

	var hand = frame.hands[0]

	var translation = hand.translation( controller.frame(2) );
	console.log( translation );
	camera.position.z += translation[2] / 5;
	});
	*/
	</script>
	</body>
	</html>