Browse Source

First official commit of ShapeGeometry with examples.

Jono Brandel 13 years ago
parent
commit
c8ae6a3de6

File diff suppressed because it is too large
+ 0 - 302
build/three.min.js


+ 133 - 0
examples/canvas_geometry_shapes_2d.html

@@ -0,0 +1,133 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <title>three.js webgl - geometry - shape 2d</title>
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
+
+    <style>
+      * {
+        margin: 0;
+        padding: 0;
+      }
+      #debug {
+        display: block;
+        position: relative;
+        margin: 50px auto;
+        border: 1px solid #ccc;
+      }
+    </style>
+  </head>
+
+  <body>
+    <canvas id="debug" width="800" height="600"></canvas>
+
+    <script src="../build/three.min.js"></script>
+    <script src="js/Stats.js"></script>
+
+    <script>
+
+      var width = 800;
+      var height = 600;
+
+      var stats = new Stats();
+      document.body.appendChild( stats.domElement );
+
+      var renderer = new THREE.CanvasRenderer({
+        canvas: document.getElementById( 'debug' )
+      });
+      renderer.sortElements = false;
+      var camera = new THREE.OrthographicCamera(0, width, 0, height, -10000);
+      var scene = new THREE.Scene();
+
+      var a = width / 4;
+      var b = height / 4;
+      var c = width / 4 + width / 2;
+      var d = height / 4 + height / 2;
+
+      renderer.setSize( width, height );
+
+      var points = [], radius = width / 4, ox = width / 2, oy = height / 2;
+
+      for ( var i = 0, l = 33; i < l; i++ ) {
+
+        var pct = ( i ) / 32;
+        var angle = pct * Math.PI + Math.PI;
+        var x = radius * Math.cos( angle );
+        var y = radius * Math.sin( angle );
+
+        points.push( new THREE.Vector2( x, y ) );
+
+      }
+
+      points.push( new THREE.Vector2(
+        radius * Math.cos( Math.PI * 1.5 + Math.PI ),
+        radius * Math.sin( Math.PI * 1.5 + Math.PI )
+      ) );
+
+      var shape = new THREE.Shape(points);
+      var geometry = shape.makeGeometry();
+
+      // Make the fill.
+
+      var material = new THREE.MeshBasicMaterial({
+        color: 0xFF7d72,
+        overdraw: true,
+        transparent: true
+      });
+      material.side = THREE.DoubleSide;
+
+      var mesh = new THREE.Mesh( geometry, material );
+      mesh.position.x = ox;
+      mesh.position.y = oy;
+
+      scene.add( camera );
+      scene.add( mesh );
+
+      // Make the outline.
+
+      geometry = new THREE.ShapeGeometry( shape );
+      material = new THREE.LineBasicMaterial({
+        linewidth: 25,
+        color: 0x333333,
+        overdraw: true,
+        transparent: true
+      });
+
+      // Close the line
+      geometry.vertices.push(geometry.vertices[0].clone());
+
+      mesh = new THREE.Line( geometry, material );
+      mesh.position.x = ox;
+      mesh.position.y = oy;
+
+      scene.add( mesh );
+
+      loop();
+
+      function loop() {
+
+        rotate();
+
+        renderer.render( scene, camera );
+        stats.update();
+
+        requestAnimationFrame( loop );
+
+      }
+
+      function rotate() {
+
+        for ( var i = 0, l = scene.__objects.length; i < l; i++ ) {
+
+          var mesh = scene.__objects[ i ];
+          mesh.rotation.y += 0.05;
+
+        }
+
+      }
+
+    </script>
+
+</body>
+</html>

+ 133 - 0
examples/webgl_geometry_shapes_2d.html

@@ -0,0 +1,133 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <title>three.js webgl - geometry - shape 2d</title>
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
+
+    <style>
+      * {
+        margin: 0;
+        padding: 0;
+      }
+      #debug {
+        display: block;
+        position: relative;
+        margin: 50px auto;
+        border: 1px solid #ccc;
+      }
+    </style>
+  </head>
+
+  <body>
+    <canvas id="debug" width="800" height="600"></canvas>
+
+    <script src="../build/three.min.js"></script>
+    <script src="js/Stats.js"></script>
+
+    <script>
+
+      var width = 800;
+      var height = 600;
+
+      var stats = new Stats();
+      document.body.appendChild( stats.domElement );
+
+      var renderer = new THREE.WebGLRenderer({
+        canvas: document.getElementById( 'debug' )
+      });
+      renderer.sortElements = false;
+      var camera = new THREE.OrthographicCamera(0, width, 0, height, -10000);
+      var scene = new THREE.Scene();
+
+      var a = width / 4;
+      var b = height / 4;
+      var c = width / 4 + width / 2;
+      var d = height / 4 + height / 2;
+
+      renderer.setSize( width, height );
+
+      var points = [], radius = width / 4, ox = width / 2, oy = height / 2;
+
+      for ( var i = 0, l = 33; i < l; i++ ) {
+
+        var pct = ( i ) / 32;
+        var angle = pct * Math.PI + Math.PI;
+        var x = radius * Math.cos( angle );
+        var y = radius * Math.sin( angle );
+
+        points.push( new THREE.Vector2( x, y ) );
+
+      }
+
+      points.push( new THREE.Vector2(
+        radius * Math.cos( Math.PI * 1.5 + Math.PI ),
+        radius * Math.sin( Math.PI * 1.5 + Math.PI )
+      ) );
+
+      var shape = new THREE.Shape(points);
+      var geometry = shape.makeGeometry();
+
+      // Make the fill.
+
+      var material = new THREE.MeshBasicMaterial({
+        color: 0xFF7d72,
+        overdraw: true,
+        transparent: true
+      });
+      material.side = THREE.DoubleSide;
+
+      var mesh = new THREE.Mesh( geometry, material );
+      mesh.position.x = ox;
+      mesh.position.y = oy;
+
+      scene.add( camera );
+      scene.add( mesh );
+
+      // Make the outline.
+
+      geometry = new THREE.ShapeGeometry( shape );
+      material = new THREE.LineBasicMaterial({
+        linewidth: 25,
+        color: 0x333333,
+        overdraw: true,
+        transparent: true
+      });
+
+      // Close the line
+      geometry.vertices.push(geometry.vertices[0].clone());
+
+      mesh = new THREE.Line( geometry, material );
+      mesh.position.x = ox;
+      mesh.position.y = oy;
+
+      scene.add( mesh );
+
+      loop();
+
+      function loop() {
+
+        rotate();
+
+        renderer.render( scene, camera );
+        stats.update();
+
+        requestAnimationFrame( loop );
+
+      }
+
+      function rotate() {
+
+        for ( var i = 0, l = scene.__objects.length; i < l; i++ ) {
+
+          var mesh = scene.__objects[ i ];
+          mesh.rotation.y += 0.05;
+
+        }
+
+      }
+
+    </script>
+
+</body>
+</html>

+ 9 - 0
src/extras/core/Shape.js

@@ -27,6 +27,15 @@ THREE.Shape.prototype.extrude = function ( options ) {
 
 };
 
+// Convenience method to return ShapeGeometry
+
+THREE.Shape.prototype.makeGeometry = function ( options ) {
+
+	var geometry = new THREE.ShapeGeometry( this, options );
+	return geometry;
+
+};
+
 // Get points of holes
 
 THREE.Shape.prototype.getPointsHoles = function ( divisions ) {

+ 104 - 64
src/extras/geometries/ShapeGeometry.js

@@ -1,27 +1,14 @@
 /**
  * @author jonobr1 / http://jonobr1.com
  *
- * Creates a one-sided polygonal geometry from a path shape. Similar to 
+ * Creates a one-sided polygonal geometry from a path shape. Similar to
  * ExtrudeGeometry.
  *
  * parameters = {
  *
- *  size: <float>, // size of the text
- *  height: <float>, // thickness to extrude text
- *  curveSegments: <int>, // number of points on the curves
- *  steps: <int>, // number of points for z-side extrusions / used for subdividing segements of extrude spline too
- *  amount: <int>, // Amount
- *
- *  bevelEnabled: <bool>, // turn on bevel
- *  bevelThickness: <float>, // how deep into text bevel goes
- *  bevelSize: <float>, // how far from text outline is bevel
- *  bevelSegments: <int>, // number of bevel layers
- *
- *  extrudePath: <THREE.CurvePath> // 3d spline path to extrude shape along. (creates Frames if .frames aren't defined)
- *  frames: <THREE.TubeGeometry.FrenetFrames> // containing arrays of tangents, normals, binormals
+ *  curveSegments: <int>, // number of points on the curves. NOT USED AT THE MOMENT.
  *
  *  material: <int> // material index for front and back faces
- *  extrudeMaterial: <int> // material index for extrusion and beveled faces
  *  uvGenerator: <Object> // object that provides UV generator functions
  *
  * }
@@ -29,99 +16,152 @@
 
 (function() {
 
-  THREE.ShapeGeometry = function( shapes, options ) {
+  THREE.ShapeGeometry = function( _shapes, options ) {
 
     THREE.Geometry.call( this );
 
-    var shapes = shapes instanceof Array ? shapes : [shapes];
+    var shapes = _shapes instanceof Array ? _shapes : [ _shapes ];
 
     this.shapebb = shapes[ shapes.length - 1 ].getBoundingBox();
 
-  	this.addShapeList( shapes, options );
+    this.addShapeList( shapes, options );
 
-  	this.computeCentroids();
-  	this.computeFaceNormals();
+    this.computeCentroids();
+    this.computeFaceNormals();
 
   };
 
   /**
    * Extends THREE.Geometry
    */
-  THREE.ExtrudeGeometry.prototype = Object.create( THREE.Geometry.prototype );
-
-  THREE.ShapeGeometry.prototype = {
+  THREE.ShapeGeometry.prototype = Object.create( THREE.Geometry.prototype );
 
-    addShapeList: function( shapes, options ) {
+  /**
+   * Add an array of shapes to THREE.ShapeGeometry.
+   */
+  THREE.ShapeGeometry.prototype.addShapeList = function( shapes, options ) {
 
-      for ( var i = 0, l = shapes.length; i < l; i++ ) {
+    for ( var i = 0, l = shapes.length; i < l; i++ ) {
 
-        var shape = shape[ i ];
-        this.addShape( shape, options );
+      var shape = shapes[ i ];
+      this.addShape( shape, options );
 
-      }
+    }
 
-      return this;
+    return this;
 
-    },
+  };
 
-    addShape: function( shape, options ) {
+  /**
+   * Adds a shape to THREE.ShapeGeometry, based on THREE.ExtrudeGeometry.
+   */
+  THREE.ShapeGeometry.prototype.addShape = function( shape, _options ) {
 
-      var curveSegments = isNumber( options.curveSegments ) ? options.curveSegments : 12;
-      var steps = isNumber( options.steps ) ? options.steps : 1;
+    var options = isUndefined( _options ) ? {} : _options;
 
-      var material = options.material;
-      var uvgen = isUndefined( options.UVGenerator ) ? options.UVGenerator : THREE.ExtrudeGeometry.WorldUVGenerator;
+    // TODO: This exists in THREE.ExtrudeGeometry, but not really used.
+    // var curveSegments = isNumber( options.curveSegments ) ? options.curveSegments : 12;
 
-      var shapebb = this.shapebb;
+    var material = options.material;
+    var uvgen = isUndefined( options.UVGenerator ) ? THREE.ExtrudeGeometry.WorldUVGenerator : options.UVGenerator;
 
-      // Variable initialization
+    var shapebb = this.shapebb;
 
-      var scope = this;
+    // Variable initialization
 
-      var shapesOffset = this.vertices.length;
-      var shapePoints = shape.extractPoints();
+    var scope = this,
+      i, l, hole, s; // Iterable variables
 
-      var vertices = shapePoints.shape;
-      var holes = shapePoints.holes;
+    var shapesOffset = this.vertices.length;
+    var shapePoints = shape.extractPoints();
 
-      var reverse = !THREE.ShapeUtils.isClockWise( vertices );
+    var vertices = shapePoints.shape;
+    var holes = shapePoints.holes;
 
-      if ( reverse ) {
+    var reverse = !THREE.Shape.Utils.isClockWise( vertices );
 
-        vertices = vertices.reverse();
+    if ( reverse ) {
 
-        // Maybe we should also check if holes are in the opposite direction, just to be safe...
+      vertices = vertices.reverse();
 
-        for ( var i = 0, l = holes.length; i < l; i++ ) {
+      // Maybe we should also check if holes are in the opposite direction, just to be safe...
 
-          var hole = holes[ i ];
+      for ( i = 0, l = holes.length; i < l; i++ ) {
 
-          if ( THREE.Shape.Utils.isClockWise( hole ) ) {
+        hole = holes[ i ];
 
-            holes[ i ] = hole.reverse();
+        if ( THREE.Shape.Utils.isClockWise( hole ) ) {
 
-          }
+          holes[ i ] = hole.reverse();
 
         }
 
-        reverse = false;
-
       }
 
-      var faces = THREE.Shape.Utils.triangulateShape( vertices, holes );
+      reverse = false;
 
-      // Vertices
+    }
 
-      var contour = vertices;
+    var faces = THREE.Shape.Utils.triangulateShape( vertices, holes );
 
-      for ( var i = 0, l = holes.length; i < l; i++ ) {
+    // Vertices
 
-        var hole = holes[ i ];
-        vertices = vertices.concat( hole );
+    var contour = vertices;
 
-      }
+    for ( i = 0, l = holes.length; i < l; i++ ) {
+
+      hole = holes[ i ];
+      vertices = vertices.concat( hole );
+
+    }
+
+    // Variable initialization round 2
+
+    var vert, vlen = vertices.length,
+        face, flen = faces.length,
+        cont, clen = contour.length;
+
+    /* Vertices */
+
+    // Make sure there is a z-depth, usually not the case
+    // when converting from THREE.Shape
+
+    for ( i = 0; i < vlen; i++ ) {
+
+      vert = vertices[ i ];
+      v( vert.x, vert.y, 0 );
+
+    }
+
+    /* Faces */
+
+    for ( i = 0; i < flen; i++ ) {
+
+      face = faces[ i ];
+      f3( face[ 2 ], face[ 1 ], face[ 0 ] );
+
+    }
+
+    /**
+     * Utility functions for addShape method
+     */
+
+    function v( x, y, z ) {
+
+      scope.vertices.push( new THREE.Vector3( x, y, z ) );
+
+    }
+
+    function f3( a, b, c ) {
+
+      a += shapesOffset;
+      b += shapesOffset;
+      c += shapesOffset;
+
+      scope.faces.push( new THREE.Face3( a, b, c, null, null, material ) );
+      var uvs = uvgen.generateBottomUV( scope, shape, options, a, b, c );
 
-      
+      scope.faceVertexUvs[ 0 ].push( uvs );
 
     }
 
@@ -132,11 +172,11 @@
    */
 
   function isNumber(o) {
-    return toString.call(o) == '[object Number]'
+    return toString.call(o) == '[object Number]';
   }
 
   function isUndefined(o) {
-    return obj === void 0;
+    return o === void 0;
   }
 
-})();
+})();

+ 1 - 0
utils/includes/extras.json

@@ -25,6 +25,7 @@
 	"../src/extras/geometries/CubeGeometry.js",
 	"../src/extras/geometries/CylinderGeometry.js",
 	"../src/extras/geometries/ExtrudeGeometry.js",
+	"../src/extras/geometries/ShapeGeometry.js",
 	"../src/extras/geometries/LatheGeometry.js",
 	"../src/extras/geometries/PlaneGeometry.js",
 	"../src/extras/geometries/SphereGeometry.js",

Some files were not shown because too many files changed in this diff