javascript
/
three.js
mirror of https://github.com/tazdij/three.js.git


			
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362
							
<!doctype html>
<html lang="en">
  <head>
    <title>three.js webgl - geometry - extrude splines</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>
    <canvas id="debug" style="position:absolute; left:100px"></canvas>

    <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/geometries/ExtrudeGeometry.js"></script>
    <script src="js/Stats.js"></script>


    <script>

      var container, stats;

      var camera, scene, renderer;

      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;

      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 = 'Simple procedurally generated 3D shapes example by <a href="http://www.lab4games.net/zz85/blog">zz85</a><br/>Drag to spin';
        container.appendChild( info );

        scene = new THREE.Scene();

        camera = new THREE.PerspectiveCamera( 50, window.innerWidth / window.innerHeight, 1, 1000 );
        camera.position.set( 0, 150, 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 = 50;
        scene.add( parent );

        function addGeometry( geometry, points, spacedPoints, color, x, y, z, rx, ry, rz, s ) {

          // 3d shape

          var mesh = THREE.SceneUtils.createMultiMaterialObject( geometry, [ new THREE.MeshLambertMaterial( { color: color } ), new THREE.MeshBasicMaterial( { color: 0x000000, wireframe: true, transparent: true } ) ] );
          mesh.position.set( x, y, z - 75 );
          mesh.rotation.set( rx, ry, rz );
          mesh.scale.set( s, s, s );
          parent.add( mesh );

          // solid line

          var line = new THREE.Line( points, new THREE.LineBasicMaterial( { color: color, linewidth: 2 } ) );
          line.position.set( x, y, z + 25 );
          line.rotation.set( rx, ry, rz );
          line.scale.set( s, s, s );
          parent.add( line );

          // transparent line from real points

          var line = new THREE.Line( points, new THREE.LineBasicMaterial( { color: color, opacity: 0.5 } ) );
          line.position.set( x, y, z + 75 );
          line.rotation.set( rx, ry, rz );
          line.scale.set( s, s, s );
          parent.add( line );

          // vertices from real points

          var pgeo = THREE.GeometryUtils.clone( points );
          var particles = new THREE.ParticleSystem( pgeo, new THREE.ParticleBasicMaterial( { color: color, size: 2, opacity: 0.75 } ) );
          particles.position.set( x, y, z + 75 );
          particles.rotation.set( rx, ry, rz );
          particles.scale.set( s, s, s );
          parent.add( particles );

          // transparent line from equidistance sampled points

          var line = new THREE.Line( spacedPoints, new THREE.LineBasicMaterial( { color: color, opacity: 0.2 } ) );
          line.position.set( x, y, z + 100 );
          line.rotation.set( rx, ry, rz );
          line.scale.set( s, s, s );
          parent.add( line );

          // equidistance sampled points

          var pgeo = THREE.GeometryUtils.clone( spacedPoints );
          var particles2 = new THREE.ParticleSystem( pgeo, new THREE.ParticleBasicMaterial( { color: color, size: 2, opacity: 0.5 } ) );
          particles2.position.set( x, y, z + 100 );
          particles2.rotation.set( rx, ry, rz );
          particles2.scale.set( s, s, s );
          parent.add( particles2 );

        }

        var extrudeSettings = { amount: 200,  bevelEnabled: true, bevelSegments: 2, steps: 150 }; // bevelSegments: 2, steps: 2 , bevelSegments: 5, bevelSize: 8, bevelThickness:5,

        // var extrudePath = new THREE.Path();

        // extrudePath.moveTo( 0, 0 );
        // extrudePath.lineTo( 10, 10 );
        // extrudePath.quadraticCurveTo( 80, 60, 160, 10 );
        // extrudePath.quadraticCurveTo( 240, -40, 320, 10 );

        
        extrudeSettings.bevelEnabled = false;

        var extrudeBend = new THREE.SplineCurve3( //Closed
        [

          new THREE.Vector3( 30, 12, 83),
          new THREE.Vector3( 40, 20, 67),
          new THREE.Vector3( 60, 40, 99),
          new THREE.Vector3( 10, 60, 49),
          new THREE.Vector3( 25, 80, 40)

          // new THREE.Vector3( 0, 12, 83),
          // new THREE.Vector3( 0, 20, 67),
          // new THREE.Vector3( 0, 40, 99),
          // new THREE.Vector3( 0, 60, 49),
          // new THREE.Vector3( 0, 80, 40)

          // new THREE.Vector3( 12, 83, 0 ),
          // new THREE.Vector3( 20, 67, 0 ),
          // new THREE.Vector3( 40, 99, 0 ),
          // new THREE.Vector3( 60, 49, 0 ),
          // new THREE.Vector3( 80, 40, 0 )
          ]);

            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 randomPoints = [];

        for (var i=0; i<10;i++) {
          randomPoints.push(
            new THREE.Vector3(Math.random() * 200,Math.random() * 200,Math.random() * 200 )
            );
        }

        var randomSpline =  new THREE.SplineCurve3(randomPoints);

        extrudeSettings.extrudePath = randomSpline; // extrudeBend sampleClosedSpline pipeSpline

        // Circle

        var circleRadius = 4;
        var circleShape = new THREE.Shape();
        circleShape.moveTo( 0, circleRadius );
        circleShape.quadraticCurveTo( circleRadius, circleRadius, circleRadius, 0 );
        circleShape.quadraticCurveTo( circleRadius, -circleRadius, 0, -circleRadius );
        circleShape.quadraticCurveTo( -circleRadius, -circleRadius, -circleRadius, 0 );
        circleShape.quadraticCurveTo( -circleRadius, circleRadius, 0, circleRadius);

        var rectLength = 12, rectWidth = 4;

        var rectShape = new THREE.Shape();
        // rectShape.moveTo( 0,0 );
        // rectShape.lineTo( 0, rectWidth );
        // rectShape.lineTo( rectLength, rectWidth );
        // rectShape.lineTo( rectLength, 0 );
        // rectShape.lineTo( 0, 0 );

        rectShape.moveTo( -rectLength/2, -rectWidth/2 );
        rectShape.lineTo( -rectLength/2, rectWidth/2 );
        rectShape.lineTo( rectLength/2, rectWidth/2 );
        rectShape.lineTo( rectLength/2, -rectLength/2 );
        rectShape.lineTo( -rectLength/2, -rectLength/2 );


        // Smiley

        var smileyShape = new THREE.Shape();
        smileyShape.moveTo( 80, 40 );
        smileyShape.arc( 40, 40, 40, 0, Math.PI*2, false );

        var smileyEye1Path = new THREE.Path();
        smileyEye1Path.moveTo( 35, 20 );
        smileyEye1Path.arc( 25, 20, 10, 0, Math.PI*2, true );
        smileyShape.holes.push( smileyEye1Path );

        var smileyEye2Path = new THREE.Path();
        smileyEye2Path.moveTo( 65, 20 );
        smileyEye2Path.arc( 55, 20, 10, 0, Math.PI*2, true );
        smileyShape.holes.push( smileyEye2Path );

        var smileyMouthPath = new THREE.Path();
        // ugly box mouth
        // smileyMouthPath.moveTo( 20, 40 );
        // smileyMouthPath.lineTo( 60, 40 );
        // smileyMouthPath.lineTo( 60, 60 );
        // smileyMouthPath.lineTo( 20, 60 );
        // smileyMouthPath.lineTo( 20, 40 );

        smileyMouthPath.moveTo( 20, 40 );
        smileyMouthPath.quadraticCurveTo( 40, 60, 60, 40 );
        smileyMouthPath.bezierCurveTo( 70, 45, 70, 50, 60, 60 );
        smileyMouthPath.quadraticCurveTo( 40, 80, 20, 60 );
        smileyMouthPath.quadraticCurveTo( 5, 50, 20, 40 );

        smileyShape.holes.push( smileyMouthPath );


        var circle3d = rectShape.extrude( extrudeSettings ); //circleShape rectShape smileyShape
        // var circle3d = new THREE.ExtrudeGeometry(circleShape, extrudeBend, extrudeSettings );
        
        var circlePoints = circleShape.createPointsGeometry();
        var circleSpacedPoints = circleShape.createSpacedPointsGeometry();


        addGeometry( circle3d, circlePoints, circleSpacedPoints,        0x00ff11,  0,  0, 0,     0, 0, 0, 1 );


        //

        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 );

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

      }

      //

      function onDocumentMouseDown( event ) {

        event.preventDefault();

        document.addEventListener( 'mousemove', onDocumentMouseMove, false );
        document.addEventListener( 'mouseup', onDocumentMouseUp, false );
        document.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 ) {

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

      }

      function onDocumentMouseOut( event ) {

        document.removeEventListener( 'mousemove', onDocumentMouseMove, false );
        document.removeEventListener( 'mouseup', onDocumentMouseUp, false );
        document.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() {

        parent.rotation.y += ( targetRotation - parent.rotation.y ) * 0.05;
        renderer.render( scene, camera );

      }

    </script>

  </body>
</html>