appendices/joint.html

<!DOCTYPE html>
<html>
 <head> 
  <title>Appendix A - Joint</title> 
  <style>
    body {
      margin: 0;
      overflow: hidden;
    }

    #stats {  /* Align stats top-left */
      position: absolute;
      left: 0px;
      top: 0px;
    }
  </style> 
  </head> 
  <body>
    <!-- JavaScript libraries -->
    <script src="http://cdnjs.cloudflare.com/ajax/libs/three.js/r67/three.min.js"></script> 
    <script src="http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
    <script src="http://cdnjs.cloudflare.com/ajax/libs/stats.js/r11/Stats.min.js"></script>
    <script src="http://cdnjs.cloudflare.com/ajax/libs/dat-gui/0.5/dat.gui.min.js"></script>
    <script src="assets/libs/TrackballControls.js"></script>
    <script>
      // once everything is loaded, we run our Three.js stuff.
      $(function () {
        var stats = initStats();
       
        var scene = new THREE.Scene();
        var camera = new THREE.PerspectiveCamera(45, window.innerWidth/window.innerHeight, 0.1, 1000);
        var renderer = new THREE.WebGLRenderer();
        // var trackballControls = new THREE.TrackballControls(camera);

        renderer.setClearColor(new THREE.Color(0xEEEEEE,1.0));
        renderer.setSize(window.innerWidth,window.innerHeight);
        renderer.shadowMapEnabled = true;

        // position and point the camera to the center of the scene
        camera.position.set(0, 20, 20);
        camera.up = new THREE.Vector3(0,1,0);
        camera.lookAt(scene.position);

          // add subtle ambient lighting
        var ambiColor = "#0c0c0c";
        var ambientLight = new THREE.AmbientLight(ambiColor);
        scene.add(ambientLight);

        var lightColor = "#ffffff";
        var directionalLight = new THREE.DirectionalLight(lightColor);
        directionalLight.position.set(0, 100, 0);
        directionalLight.intensity = 1;
        scene.add(directionalLight);

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

        function mkJoint (radius, height) {
          var joint = new THREE.Object3D();
          var sphereGeometry = new THREE.SphereGeometry(radius, 8, 8);
          var sphereMaterial = new THREE.MeshLambertMaterial({color: 0xdddd33, shading: THREE.FlatShading});
          var sphere = new THREE.Mesh(sphereGeometry, sphereMaterial);
          sphere.position.set(0, 0, 0);
          joint.add(sphere);

          var cylinderGeometry = new THREE.CylinderGeometry(radius, radius, height, 8, 8, false);
          var cylinderMaterial = new THREE.MeshLambertMaterial({color: 0xcccccc, shading: THREE.FlatShading});
          var cylinder = new THREE.Mesh(cylinderGeometry, cylinderMaterial);
          cylinder.position.set(0, height / 2 + radius, 0);
          sphere.add(cylinder);

          var hook = new THREE.Object3D();
          hook.position.set(0, height/2+radius, 0);
          cylinder.add(hook);

          joint.sphere = sphere;
          joint.cylinder = cylinder;
          joint.hook = hook;

          return joint;
        }

        var height = 6;
        var radius = 1;
        var joint1 = mkJoint(radius, height);
        scene.add(joint1);

        var joint2 = mkJoint(radius, height);
        joint1.hook.add(joint2);

        // add the output of the renderer to the html element
        $('body').append(renderer.domElement);

        var controls = new function () {
          this.alpha_1 = 0.0;
          this.beta_1 = 0.0;
          this.alpha_2 = 0.0;
          this.beta_2 = 0.0;
        };

        var gui = new dat.GUI();
        gui.add(controls, 'alpha_1', 0.0, 2*Math.PI).onChange(function (value) {
          joint1.rotation.y = value; 
        });
        gui.add(controls, 'beta_1', 0.0, Math.PI/2).onChange(function (value) {
          joint1.sphere.rotation.x = value; 
        });

        gui.add(controls, 'alpha_2', 0.0, 2*Math.PI).onChange(function (value) {
          joint2.rotation.y = value; 
        });
        gui.add(controls, 'beta_2', 0.0, Math.PI/2).onChange(function (value) {
          joint2.sphere.rotation.x = value; 
        });

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

        function initStats() {
          var stats = new Stats();
          stats.setMode(0); // 0: fps, 1: ms
          $('body').append(stats.domElement);
          return stats;
        }

        render();
      });
    </script>
 </body>
</html>