examples/example27.html


<!DOCTYPE html>
<html>
 <head> 
  <title>Example 27 - Parametric geometries</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/jquery/2.1.1/jquery.min.js"></script> 
  <script src="http://cdnjs.cloudflare.com/ajax/libs/three.js/r67/three.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>
  <!-- Javascript code that runs our Three.js examples --> 
  <script>
    // once everything is loaded, we run our Three.js stuff.
    $(function () {

      var stats = initStats();

      // create a scene, that will hold all our elements such as objects, cameras and lights.
      var scene = new THREE.Scene();

      // create a camera, which defines where we're looking at.
      var camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 0.1, 1000);

      // create a render and set the size
      var webGLRenderer = new THREE.WebGLRenderer();
      webGLRenderer.setClearColor(new THREE.Color(0xEEEEEE, 1.0));
      webGLRenderer.setSize(window.innerWidth, window.innerHeight);
      webGLRenderer.shadowMapEnabled = true;

      // position and point the camera to the center of the scene
      camera.position.set(-30,50,50);
      camera.lookAt(new THREE.Vector3(10, -20, 0));

      var spotLight = new THREE.SpotLight(0xffffff);
      spotLight.position = new THREE.Vector3(-20, 250, -50);
      spotLight.target.position.x = 30;
      spotLight.target.position.y = -40;
      spotLight.target.position.z = -20;
      spotLight.intensity = 0.7;

      scene.add(spotLight);

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

      // call the render function
      var step = 0;

      var klein = function (u, v) {
        u *= Math.PI;
        v *= 2 * Math.PI;

        u = u * 2;
        var x, y, z;
        if (u < Math.PI) {
          x = 3 * Math.cos(u) * (1 + Math.sin(u)) + (2 * (1 - Math.cos(u) / 2)) * Math.cos(u) * Math.cos(v);
          z = -8 * Math.sin(u) - 2 * (1 - Math.cos(u) / 2) * Math.sin(u) * Math.cos(v);
        } else {
          x = 3 * Math.cos(u) * (1 + Math.sin(u)) + (2 * (1 - Math.cos(u) / 2)) * Math.cos(v + Math.PI);
          z = -8 * Math.sin(u);
        }

        y = -2 * (1 - Math.cos(u) / 2) * Math.sin(v);

        return new THREE.Vector3(x, y, z);
      };

      var radialWave = function (u, v) {
        var r = 50;

        var x = Math.sin(u) * r;
        var z = Math.sin(v / 2) * 2 * r;
        var y = (Math.sin(u * 4 * Math.PI) + Math.cos(v * 2 * Math.PI)) * 2.8;

        return new THREE.Vector3(x, y, z);
      }

      // var mesh = createMesh(new THREE.ParametricGeometry(klein, 20, 20));
      var mesh = createMesh(new THREE.ParametricGeometry(radialWave, 20, 20));
      scene.add(mesh);

      render();


      function createMesh(geom) {
        geom.applyMatrix(new THREE.Matrix4().makeTranslation(-25, 0, -25));
        // assign two materials
        // var meshMaterial = new THREE.MeshLambertMaterial({color: 0xff5555, shading: THREE.FlatShading});
        // var meshMaterial = new THREE.MeshNormalMaterial();
        var meshMaterial = new THREE.MeshPhongMaterial({specular: 0xffffff, color: 0x3399ff, shininess: 100, metal: true});
        meshMaterial.side = THREE.DoubleSide;
        
        var plane = new THREE.Mesh(geom, meshMaterial);

        return plane;
      }

      function render() {
        stats.update();
        mesh.rotation.y = step += 0.01;
        mesh.rotation.x = step;
        // render using requestAnimationFrame
        requestAnimationFrame(render);
        webGLRenderer.render(scene, camera);
      }

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