AMI - Lesson 02

Mesh. author(s): Nicolas Rannou (github)

by nicolasrannou

HTML

<div id="container"></div>

<script>
  // create THREE Namespace
  var THREE = THREE || {};
</script>

<script type="text/javascript"  src="https://cdn.rawgit.com/mrdoob/three.js/master/examples/js/loaders/STLLoader.js"></script>


<!-- Tools -->
<script src="https://use.edgefonts.net/source-code-pro.js"></script>
<script type="text/javascript" src="https://cdn.rawgit.com/dataarts/dat.gui/master/build/dat.gui.min.js"></script>
<script type="text/javascript" src="https://cdn.rawgit.com/mrdoob/stats.js/master/build/stats.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/babel-polyfill/6.16.0/polyfill.min.js"></script>

<!-- THREEJS -->
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r81/three.min.js"></script>


<!-- AMI CDN -->
<script type="text/javascript" src="https://cdn.rawgit.com/fnndsc/ami/master/build/ami.min.js"></script>
        
      

<!-- ANALYTICS -->
<script>
  (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
  (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
  m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
  })(window,document,'script','https://www.google-analytics.com/analytics.js','ga');

  ga('create', 'UA-39303022-3', 'auto');
  var page = '/ami/lessons/02';
  ga('send', 'pageview', page);

</script>

CSS

body{
  font-family: source-code-pro, sans-serif;
  color:#F9F9F9;
  background-color: #212121
}

#container {
  background-color: #000;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  position: absolute;
  width: 100%;
  height: 100%;
  overflow:hidden;
}

JavaScript

/* globals Stats, dat, AMI*/

// VJS classes we will be using in this lesson
var LoadersVolume     = AMI.default.Loaders.Volume;
var ControlsTrackball = AMI.default.Controls.Trackball;
var HelpersStack      = AMI.default.Helpers.Stack;

// Setup renderer
var container = document.getElementById('container');
var renderer = new THREE.WebGLRenderer({
    antialias: true
  });
renderer.setSize(container.offsetWidth, container.offsetHeight);
renderer.setClearColor(0x353535, 1);
renderer.setPixelRatio(window.devicePixelRatio);
container.appendChild(renderer.domElement);

// Setup scene
var scene = new THREE.Scene();

// Setup camera
var  camera = new THREE.PerspectiveCamera(45, container.offsetWidth / container.offsetHeight, 0.01, 10000000);
camera.position.x = 150;
camera.position.y = 150;
camera.position.z = 100;

// Setup controls
var controls = new ControlsTrackball(camera, container);

// handle resize
function onWindowResize() {

  camera.aspect = container.offsetWidth / container.offsetHeight;
  camera.updateProjectionMatrix();

  renderer.setSize(container.offsetWidth, container.offsetHeight);

}
window.addEventListener('resize', onWindowResize, false);

// Setup lights
var particleLight = new THREE.Mesh( new THREE.SphereBufferGeometry( 4, 8, 8 ), new THREE.MeshBasicMaterial( { color: 0xffffff } ) );
scene.add( particleLight );

scene.add( new THREE.AmbientLight( 0x222222 ) );
var directionalLight = new THREE.DirectionalLight( 0xffffff, 1 );
directionalLight.position.set( 1, 1, 1 ).normalize();
scene.add( directionalLight );
var pointLight = new THREE.PointLight( 0xffffff, 2, 800 );
particleLight.add( pointLight );

// Load STL model
var loaderSTL = new THREE.STLLoader();
loaderSTL.load( 'https://cdn.rawgit.com/FNNDSC/data/master/stl/adi_brain/WM.stl', function ( geometry ) {
  var material = new THREE.LineBasicMaterial( { color: 0xF44336 } );
  var WMSTL = new THREE.Mesh( geometry, material );
  // to LPS space
  var RASToLPS = new THREE.Matrix4();
 ...