Skip to content

Instantly share code, notes, and snippets.

@jonathanlurie

jonathanlurie/index.html

Last active October 17, 2017 19:39
Show Gist options
  • Save jonathanlurie/75b4436c9d991110535a65367b0dca35 to your computer and use it in GitHub Desktop.
Save jonathanlurie/75b4436c9d991110535a65367b0dca35 to your computer and use it in GitHub Desktop.
Download ZIP
This is to show the brain 0 coord when using a Image3DAlt.getMetadata("transformations")["v2w"], shown with axis
Raw
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>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment