javascript
/
three.js
의 미러 https://github.com/tazdij/three.js.git


			
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701702703704705
							
<!doctype html>
<html lang="en">
  <head>
    <title>three.js webgl - geometry - shapes</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
    <style>
      body {
        font-family: Monospace;
        background-color: #f0f0f0;
        margin: 0px;
        overflow: hidden;
      }
    </style>
  </head>
  <body>
  
    <script src="../build/Three.js"></script>
    <script src="../src/extras/core/Curve.js"></script>
    <script src="../src/extras/geometries/TubeGeometry.js"></script>
    <script src="../src/extras/helpers/CameraHelper.js"></script>
    <script src="js/Stats.js"></script>


    <script>

    // Lets define some curves
    THREE.Curves = {};

    // Formula from http://mathworld.wolfram.com/HeartCurve.html

    THREE.Curves.HeartCurve = THREE.Curve.create(

      function ( s ) {

        this.scale = (s === undefined) ? 5 : s;

      },

      function ( t ) {

          t *= 2 * Math.PI;

          var tx = 16 * Math.pow(Math.sin(t), 3);
              ty = 13 * Math.cos(t)
                - 5 * Math.cos(2 * t)
                - 2 * Math.cos(3 * t)
                - Math.cos(4 * t ),
              tz = 0;

          return new THREE.Vector3(tx, ty, tz).multiplyScalar(this.scale);

      }

    );


    // Viviani's Curve
    // http://en.wikipedia.org/wiki/Viviani%27s_curve

    THREE.Curves.VivianiCurve = THREE.Curve.create(

      function( radius ) {

          this.radius = radius;
      },

      function( t ) {

          t = t * 4 * Math.PI; // Normalized to 0..1
          var a = this.radius / 2;
          var tx = a * (1 + Math.cos(t)),
              ty = a * Math.sin(t),
              tz = 2 * a * Math.sin(t / 2);

          return new THREE.Vector3(tx, ty, tz);

      }

    );


    THREE.Curves.KnotCurve = THREE.Curve.create(

    function() {

    },

    function(t) {

        t *= 2 * Math.PI;

        var R = 10;
        var s = 50;
        var tx = s * Math.sin(t),
            ty = Math.cos(t) * (R + s * Math.cos(t)),
            tz = Math.sin(t) * (R + s * Math.cos(t));

        return new THREE.Vector3(tx, ty, tz);

    }

    );

    THREE.Curves.HelixCurve = THREE.Curve.create(

    function() {

    },

    function(t) {

        var a = 30; // radius
        var b = 150; //height
        var t2 = 2 * Math.PI * t * b / 30;
        var tx = Math.cos(t2) * a,
            ty = Math.sin(t2) * a,
            tz = b * t;

        return new THREE.Vector3(tx, ty, tz);

    }

    );

    // Replacement for TorusKnotGeometry?

    THREE.Curves.TrefoilKnot = THREE.Curve.create(

    function(s) {

      this.scale = (s === undefined) ? 10 : s;

    },

    function(t) {

        t *= Math.PI * 2;
        var tx = (2 + Math.cos(3 * t)) * Math.cos(2 * t),
        ty = (2 + Math.cos(3* t)) * Math.sin(2 * t),
        tz = Math.sin(3 * t);

        return new THREE.Vector3(tx, ty, tz).multiplyScalar(this.scale);

    }

    );

    // Formulas from http://mathdl.maa.org/images/upload_library/23/stemkoski/knots/page6.html

    THREE.Curves.TorusKnot = THREE.Curve.create(

    function(s) {

      this.scale = (s === undefined) ? 10 : s;

    },

    function(t) {

      var p = 3, q = 4;
        t *= Math.PI * 2;
        var tx = (2 + Math.cos(q * t)) * Math.cos(p * t),
        ty = (2 + Math.cos(q* t)) * Math.sin(p * t),
        tz = Math.sin(q * t);

        return new THREE.Vector3(tx, ty, tz).multiplyScalar(this.scale);

    }

    );


    THREE.Curves.CinquefoilKnot = THREE.Curve.create(

    function(s) {

      this.scale = (s === undefined) ? 10 : s;

    },

    function(t) {

      var p = 2, q = 5;
        t *= Math.PI * 2;
        var tx = (2 + Math.cos(q * t)) * Math.cos(p * t),
        ty = (2 + Math.cos(q* t)) * Math.sin(p * t),
        tz = Math.sin(q * t);

        return new THREE.Vector3(tx, ty, tz).multiplyScalar(this.scale);

    }

    );


    THREE.Curves.TrefoilPolynomialKnot = THREE.Curve.create(

    function(s) {

      this.scale = (s === undefined) ? 10 : s;

    },

    function(t) {

        t = t * 4 - 2;
        var tx = Math.pow(t, 3) - 3 * t,
        ty = Math.pow(t, 4) - 4 * t * t,
        tz = 1/ 5 * Math.pow(t, 5) - 2 * t;

        return new THREE.Vector3(tx, ty, tz).multiplyScalar(this.scale);

    }

    );

    var sin = Math.sin, pow = Math.pow, cos = Math.cos;
    // var scaleTo = function(x, y) {
    //   var r = y - x;
    //   return function(t) {
    //     t * r + x;
    //   };
    // }

    var scaleTo = function(x, y, t) {

      var r = y - x;
      return t * r + x;

    }

    THREE.Curves.FigureEightPolynomialKnot = THREE.Curve.create(

    function(s) {

      this.scale = (s === undefined) ? 1 : s;

    },

    function(t) {

        t = scaleTo(-4,4, t);
        var tx = 2 / 5 * t * (t * t - 7) * (t * t - 10),
        ty = pow(t, 4) - 13 * t * t,
        tz = 1/10 * t * (t * t - 4) * (t * t - 9) * (t * t - 12);

        return new THREE.Vector3(tx, ty, tz).multiplyScalar(this.scale);

    }

    );

    // When there's time, try more formulas at http://mathdl.maa.org/images/upload_library/23/stemkoski/knots/page4.html


    //http://www.mi.sanu.ac.rs/vismath/taylorapril2011/Taylor.pdf

    THREE.Curves.DecoratedTorusKnot4a = THREE.Curve.create(

    function(s) {

      this.scale = (s === undefined) ? 40 : s;

    },

    function(t) {

        t *= Math.PI * 2;
        var
        x = cos(2*t) * (1+0.6*(cos(5*t) + 0.75*cos(10*t))),
         y = sin(2*t) * (1+0.6*(cos(5*t) + 0.75*cos(10*t))),
          z = 0.35*sin(5*t);

        return new THREE.Vector3(x, y, z).multiplyScalar(this.scale);

    }

    );


    THREE.Curves.DecoratedTorusKnot4b = THREE.Curve.create(

    function(s) {

      this.scale = (s === undefined) ? 40 : s;

    },

    function(t) {
        var fi = t  * Math.PI * 2;
        var	x = cos(2*fi) * (1 + 0.45*cos(3*fi) + 0.4*cos(9*fi)),
			y = sin(2*fi) * (1 + 0.45*cos(3*fi) + 0.4*cos(9*fi)),
			z = 0.2*sin(9*fi);

        return new THREE.Vector3(x, y, z).multiplyScalar(this.scale);

    }

    );


    THREE.Curves.DecoratedTorusKnot5a = THREE.Curve.create(

    function(s) {

      this.scale = (s === undefined) ? 40 : s;

    },

    function(t) {

        var fi = t  * Math.PI * 2;
        var x = cos(3*fi) * (1 + 0.3*cos(5*fi) + 0.5*cos(10*fi)),
			y = sin(3*fi) * (1 + 0.3*cos(5*fi) + 0.5*cos(10*fi)),
			z = 0.2*sin(20*fi);

        return new THREE.Vector3(x, y, z).multiplyScalar(this.scale);

    }

    );

    THREE.Curves.DecoratedTorusKnot5c = THREE.Curve.create(

    function(s) {

      this.scale = (s === undefined) ? 40 : s;

    },

    function(t) {

        var fi = t  * Math.PI * 2;
        var x = cos(4*fi) * (1 + 0.5*(cos(5*fi) + 0.4*cos(20*fi))),
			y = sin(4*fi) * (1 + 0.5*(cos(5*fi) + 0.4*cos(20*fi))),
			z = 0.35*sin(15*fi);

        return new THREE.Vector3(x, y, z).multiplyScalar(this.scale);

    }

    );


    var container, stats;

    var camera, scene, renderer, splineCamera, cameraHelper, cameraPos;

    var text, plane;

    var targetRotation = 0;
    var targetRotationOnMouseDown = 0;

    var mouseX = 0;
    var mouseXOnMouseDown = 0;

    var windowHalfX = window.innerWidth / 2;
    var windowHalfY = window.innerHeight / 2;

    var binormal = new THREE.Vector3();
    var normal = new THREE.Vector3();


    var pipeSpline = new THREE.SplineCurve3([
        new THREE.Vector3(0, 10, -10), new THREE.Vector3(10, 0, -10), new THREE.Vector3(20, 0, 0), new THREE.Vector3(30, 0, 10), new THREE.Vector3(30, 0, 20), new THREE.Vector3(20, 0, 30), new THREE.Vector3(10, 0, 30), new THREE.Vector3(0, 0, 30), new THREE.Vector3(-10, 10, 30), new THREE.Vector3(-10, 20, 30), new THREE.Vector3(0, 30, 30), new THREE.Vector3(10, 30, 30), new THREE.Vector3(20, 30, 15), new THREE.Vector3(10, 30, 10), new THREE.Vector3(0, 30, 10), new THREE.Vector3(-10, 20, 10), new THREE.Vector3(-10, 10, 10), new THREE.Vector3(0, 0, 10), new THREE.Vector3(10, -10, 10), new THREE.Vector3(20, -15, 10), new THREE.Vector3(30, -15, 10), new THREE.Vector3(40, -15, 10), new THREE.Vector3(50, -15, 10), new THREE.Vector3(60, 0, 10), new THREE.Vector3(70, 0, 0), new THREE.Vector3(80, 0, 0), new THREE.Vector3(90, 0, 0), new THREE.Vector3(100, 0, 0)]);

    var sampleClosedSpline = new THREE.ClosedSplineCurve3([
      new THREE.Vector3(0, -40, -40),
      new THREE.Vector3(0, 40, -40),
      new THREE.Vector3(0, 140, -40),
      new THREE.Vector3(0, 40, 40),
      new THREE.Vector3(0, -40, 40),
    ]);

    var splines = {
      HeartCurve: new THREE.Curves.HeartCurve(3.5),
      VivianiCurve: new THREE.Curves.VivianiCurve(70),
      KnotCurve: new THREE.Curves.KnotCurve(),
      HelixCurve: new THREE.Curves.HelixCurve(),
      TrefoilKnot: new THREE.Curves.TrefoilKnot(),
      TorusKnot: new THREE.Curves.TorusKnot(20),
      CinquefoilKnot: new THREE.Curves.CinquefoilKnot(20),
      TrefoilPolynomialKnot: new THREE.Curves.TrefoilPolynomialKnot(14),
      FigureEightPolynomialKnot: new THREE.Curves.FigureEightPolynomialKnot(),
      DecoratedTorusKnot4a: new THREE.Curves.DecoratedTorusKnot4a(),
      DecoratedTorusKnot4b: new THREE.Curves.DecoratedTorusKnot4b(),
      DecoratedTorusKnot5a: new THREE.Curves.DecoratedTorusKnot5a(),
      DecoratedTorusKnot5c: new THREE.Curves.DecoratedTorusKnot5c(),
      PipeSpline: pipeSpline,
      SampleClosedSpline: sampleClosedSpline
    };


    extrudePath = new THREE.Curves.TrefoilKnot();

    var dropdown = '<select id="dropdown" onchange="addTube(this.value)">';

    var s;
    for ( s in splines ) {
      dropdown += '<option value="' + s + '"';

      // dropdown += (geometryIndex == i)  ? ' selected' : '';

      dropdown += '>' + s + '</option>';
    }

    dropdown += '</select>';


    var closed2 = true;
    var debug = true;
    var parent;
    var tube, tubeMesh;
    var animation = false, lookAhead = false;
    var scale;

    function addTube() {

      var value = document.getElementById('dropdown').value;
      
      var segments = parseInt(document.getElementById('segments').value);
      closed2 = document.getElementById('closed').checked;
      debug = document.getElementById('debug').checked;

      var radiusSegments = parseInt(document.getElementById('radiusSegments').value);

      console.log('adding tube', value, closed2, debug, radiusSegments);
      if (tubeMesh) parent.remove(tubeMesh);

      extrudePath = splines[value];
      
      tube = new THREE.TubeGeometry(extrudePath, segments, 2, radiusSegments, closed2, debug);

      addGeometry(tube, 0xff00ff);
      setScale();
    
    }

    function setScale() {

      scale = parseInt(document.getElementById('scale').value);
      tubeMesh.scale.set(scale, scale, scale);

    }


    function addGeometry(geometry, color) {

        // 3d shape
        tubeMesh = THREE.SceneUtils.createMultiMaterialObject(geometry, [
          new THREE.MeshLambertMaterial({
              color: color,
              opacity: 0.2,
              transparent: true
          }),
         new THREE.MeshBasicMaterial({
            color: 0x000000,
            opacity: 0.3,
            wireframe: true
        })]);

        if (geometry.debug) tubeMesh.add(geometry.debug);

        // tubeMesh.position.set(x, y, z);
        // tubeMesh.rotation.set(rx, ry, rz);
        //mesh.children[0].doubleSided = true;
        parent.add(tubeMesh);

    }

    function animateCamera() {
      animation = document.getElementById('animation').checked;
      lookAhead = document.getElementById('lookAhead').checked;
    }


    init();
    animate();

    function init() {

      container = document.createElement('div');
      document.body.appendChild(container);

      var info = document.createElement('div');
      info.style.position = 'absolute';
      info.style.top = '10px';
      info.style.width = '100%';
      info.style.textAlign = 'center';
      info.innerHTML = 'Spline Extrusion Examples by <a href="http://www.lab4games.net/zz85/blog">zz85</a><br/>Select spline:';

      info.innerHTML += dropdown;

      info.innerHTML += '<br/>Scale: <select id="scale" onchange="setScale()"><option>1</option><option>2</option><option selected>4</option><option>6</option><option>10</option></select>';
      info.innerHTML += '<br/>Extrusion Segments: <select onchange="addTube()" id="segments"><option>50</option><option selected>100</option><option>200</option><option>400</option></select>';
      info.innerHTML += '<br/>Debug: <input id="debug" type="checkbox" onchange="addTube()" checked /> Closed:<input id="closed" onchange="addTube()" type="checkbox" checked />';

      info.innerHTML += '<br/>Radius Segments: <select id="radiusSegments" onchange="addTube()"><option>1</option><option>2</option><option selected>3</option><option>4</option><option>5</option><option>6</option><option>8</option><option>12</option></select>';

      info.innerHTML += '<br/>Camera Spline Animation: <input id="animation" type="checkbox" onchange="animateCamera()" /> Look Ahead <input id="lookAhead" type="checkbox" onchange="animateCamera()" />'; //checkbox button

      container.appendChild(info);

      scene = new THREE.Scene();

      // 
      camera = new THREE.PerspectiveCamera(50, window.innerWidth / window.innerHeight, 0.01, 1000);
      splineCamera = new THREE.PerspectiveCamera(84, window.innerWidth / window.innerHeight, 0.01, 1000);
      cameraHelper = new THREE.CameraHelper(splineCamera);

      camera.position.set(0, 50, 500);
      
      scene.add(camera);

      
      var light = new THREE.DirectionalLight(0xffffff);
      light.position.set(0, 0, 1);
      scene.add(light);

      parent = new THREE.Object3D();
      parent.position.y = 100;
      scene.add(parent);

      addTube();

      // Debug point
      cameraPos = new THREE.Mesh(new THREE.SphereGeometry(5), new THREE.MeshBasicMaterial({
            color: 0xdddddd
        }));

      parent.add(cameraPos);

      cameraHelper.scale.multiplyScalar(0.1);
      splineCamera.add(cameraHelper);
      parent.add(splineCamera);

      //
      renderer = new THREE.WebGLRenderer({
          antialias: true
      });
      renderer.setSize(window.innerWidth, window.innerHeight);

      container.appendChild(renderer.domElement);

      stats = new Stats();
      stats.domElement.style.position = 'absolute';
      stats.domElement.style.top = '0px';
      container.appendChild(stats.domElement);

      renderer.domElement.addEventListener('mousedown', onDocumentMouseDown, false);
      renderer.domElement.addEventListener('touchstart', onDocumentTouchStart, false);
      renderer.domElement.addEventListener('touchmove', onDocumentTouchMove, false);

    }

    //

    function onDocumentMouseDown(event) {

      event.preventDefault();

      renderer.domElement.addEventListener('mousemove', onDocumentMouseMove, false);
      renderer.domElement.addEventListener('mouseup', onDocumentMouseUp, false);
      renderer.domElement.addEventListener('mouseout', onDocumentMouseOut, false);

      mouseXOnMouseDown = event.clientX - windowHalfX;
      targetRotationOnMouseDown = targetRotation;

    }

    function onDocumentMouseMove(event) {

      mouseX = event.clientX - windowHalfX;

      targetRotation = targetRotationOnMouseDown + (mouseX - mouseXOnMouseDown) * 0.02;

    }

    function onDocumentMouseUp(event) {

      renderer.domElement.removeEventListener('mousemove', onDocumentMouseMove, false);
      renderer.domElement.removeEventListener('mouseup', onDocumentMouseUp, false);
      renderer.domElement.removeEventListener('mouseout', onDocumentMouseOut, false);

    }

    function onDocumentMouseOut(event) {

      renderer.domElement.removeEventListener('mousemove', onDocumentMouseMove, false);
      renderer.domElement.removeEventListener('mouseup', onDocumentMouseUp, false);
      renderer.domElement.removeEventListener('mouseout', onDocumentMouseOut, false);

    }

    function onDocumentTouchStart(event) {

      if (event.touches.length == 1) {

          event.preventDefault();

          mouseXOnMouseDown = event.touches[0].pageX - windowHalfX;
          targetRotationOnMouseDown = targetRotation;

      }

    }

    function onDocumentTouchMove(event) {

      if (event.touches.length == 1) {

          event.preventDefault();

          mouseX = event.touches[0].pageX - windowHalfX;
          targetRotation = targetRotationOnMouseDown + (mouseX - mouseXOnMouseDown) * 0.05;

      }

    }

    //

    function animate() {

      requestAnimationFrame(animate);

      render();
      stats.update();

    }

    function render() {

      // Try Animate Camera Along Spline
      var time = Date.now();
      var looptime = 20 * 1000;
      var t = (time % looptime) / looptime;

      var pos = tube.path.getPointAt(t);
      pos.multiplyScalar(scale);


      // interpolation
      var segments = tube.tangents.length;
      var pickt = t * segments;
      var pick = Math.floor(pickt);
      var pickNext = (pick + 1) % segments;

      binormal.sub(tube.binormals[pickNext], tube.binormals[pick]);
      binormal.multiplyScalar(pickt - pick).addSelf(tube.binormals[pick]);


      var dir = tube.path.getTangentAt(t);

      var offset = 15;

      normal.copy(binormal).crossSelf(dir);

      // We move on a offset on its binormal
      pos.addSelf(normal.clone().multiplyScalar(offset));

      splineCamera.position = pos;
      cameraPos.position = pos;


      // Camera Orientation 1 - default look at
      var lookAt = tube.path.getPointAt((t + 0.101) % 1).multiplyScalar(scale);
      // splineCamera.lookAt(lookAt);

      // Camera Orientation 2 - up orientation via normal
      if (!lookAhead)
      lookAt.copy(pos).addSelf(dir);
      splineCamera.matrix.lookAt(splineCamera.position, lookAt, normal);
      splineCamera.rotation.getRotationFromMatrix(splineCamera.matrix);

      cameraHelper.update();

      parent.rotation.y += (targetRotation - parent.rotation.y) * 0.05;

      if (animation) {

        renderer.render(scene, splineCamera);

      } else {

        renderer.render(scene, camera);

      }

      
    }
	</script>

  </body>
</html>