topical media & game development

talk show tell print

mobile-query-three-plugins-rollercoster-examples-webgl-geometry-extrude-shapes.htm / htm



  
  <!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 = 'Shapes Extrusion via Spline path<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, color, x, y, z, rx, ry, rz, s ) {
  
            // 3d shape
  
            var mesh = THREE.SceneUtils.createMultiMaterialObject( geometry, [ new THREE.MeshLambertMaterial( { color: color, opacity: 0.2, transparent: true } ), new THREE.MeshBasicMaterial( { color: 0x000000, wireframe: true,  opacity: 0.3 } ) ] );
  
         
  
            mesh.position.set( x, y, z - 75 );
            // mesh.rotation.set( rx, ry, rz );
            mesh.scale.set( s, s, s );
  
            if (geometry.debug) mesh.add(geometry.debug);
  
            parent.add( mesh );
  
          }
  
          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)
  
          ]);
  
          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 randomSpline
  
          // 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( -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 );
  
         
          
          var pts = [], starPoints = 5, l;
          for (i=0; i<starPoints*2;i++) {
            if (i%2==1) {
              l = 5;
            } else {
              l = 10;
            }
  
            var a = i / starPoints * Math.PI;
            pts.push(new THREE.Vector2(Math.cos(a) * l,Math.sin(a) * l ));
          }
        var starShape = new THREE.Shape(pts);
  
          // 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();
  
          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 = starShape.extrude( extrudeSettings ); //circleShape rectShape smileyShape starShape
          // var circle3d = new THREE.ExtrudeGeometry(circleShape, extrudeBend, extrudeSettings );
          
          var tube = new THREE.TubeGeometry(extrudeSettings.extrudePath, 150, 4, 5, false, true);
          // new THREE.TubeGeometry(extrudePath, segments, 2, radiusSegments, closed2, debug);
        
  
          addGeometry( circle3d, 0xff1111,  -100,  0, 0,     0, 0, 0, 1 );
          addGeometry( tube, 0x00ff11,  0,  0, 0,     0, 0, 0, 1 );  
          console.log(tube);
  
          //
  
          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>


(C) Æliens 04/09/2009

You may not copy or print any of this material without explicit permission of the author or the publisher. In case of other copyright issues, contact the author.