AMI - Lesson 02

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

HTML

<div id="my-gui-container"></div>
<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/r83/three.min.js"></script>


<!-- AMI CDN -->
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/ami.js//0.0.14/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;
}

#my-gui-container {
  position: fixed;
  top: 10px;
  right: 10px;
  z-index: 1;
}

JavaScript

/* globals 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);
// configuration to work with clip CAP
renderer.autoClear = false;
renderer.localClippingEnabled = true;

container.appendChild(renderer.domElement);

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

// Setup clip scene
var sceneClip = new THREE.Scene();
var clipPlane = new THREE.Plane(new THREE.Vector3(0, 0, 0), 0); // The plane to do clip!

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

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

/**
 * Handle window 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...