13 年之前 · b3fa47ad34
--- a/build/three.js
+++ b/build/three.js
--- a/examples/canvas_geometry_shapes_2d.html
+++ b/examples/canvas_geometry_shapes_2d.html
@@ -0,0 +1,147 @@
 
				+<!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;
			
 
				+      }
			
 
				+      body {
			
 
				+        overflow: hidden;
			
 
				+        color: #808080;
			
 
				+        font-family: Monospace;
			
 
				+        font-size: 13px;
			
 
				+      }
			
 
				+      #debug {
			
 
				+        display: block;
			
 
				+        position: relative;
			
 
				+        margin: 50px auto;
			
 
				+      }
			
 
				+      #info {
			
 
				+        position: absolute;
			
 
				+        top: 0px; width: 100%;
			
 
				+        padding: 5px;
			
 
				+        text-align: center;
			
 
				+      }
			
 
				+    </style>
			
 
				+  </head>
			
 
				+
			
 
				+  <body>
			
 
				+    <div id="info"><a href="http://github.com/mrdoob/three.js" target="_blank">three.js</a> webgl - 2d geometry in 3d space</div>
			
 
				+    <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();
			
 
				+      stats.domElement.style.position = 'absolute';
			
 
				+      stats.domElement.style.top = '0px';
			
 
				+      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>
			
--- a/examples/webgl_geometry_shapes_2d.html
+++ b/examples/webgl_geometry_shapes_2d.html
@@ -0,0 +1,147 @@
 
				+<!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;
			
 
				+      }
			
 
				+      body {
			
 
				+        overflow: hidden;
			
 
				+        color: #808080;
			
 
				+        font-family: Monospace;
			
 
				+        font-size: 13px;
			
 
				+      }
			
 
				+      #debug {
			
 
				+        display: block;
			
 
				+        position: relative;
			
 
				+        margin: 50px auto;
			
 
				+      }
			
 
				+      #info {
			
 
				+        position: absolute;
			
 
				+        top: 0px; width: 100%;
			
 
				+        padding: 5px;
			
 
				+        text-align: center;
			
 
				+      }
			
 
				+    </style>
			
 
				+  </head>
			
 
				+
			
 
				+  <body>
			
 
				+    <div id="info"><a href="http://github.com/mrdoob/three.js" target="_blank">three.js</a> webgl - 2d geometry in 3d space</div>
			
 
				+    <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();
			
 
				+      stats.domElement.style.position = 'absolute';
			
 
				+      stats.domElement.style.top = '0px';
			
 
				+      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>
			
--- a/src/extras/core/Shape.js
+++ b/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 ) {
			
--- a/src/extras/geometries/ShapeGeometry.js
+++ b/src/extras/geometries/ShapeGeometry.js
@@ -0,0 +1,182 @@
 
				+/**
			
 
				+ * @author jonobr1 / http://jonobr1.com
			
 
				+ *
			
 
				+ * Creates a one-sided polygonal geometry from a path shape. Similar to
			
 
				+ * ExtrudeGeometry.
			
 
				+ *
			
 
				+ * parameters = {
			
 
				+ *
			
 
				+ *  curveSegments: <int>, // number of points on the curves. NOT USED AT THE MOMENT.
			
 
				+ *
			
 
				+ *  material: <int> // material index for front and back faces
			
 
				+ *  uvGenerator: <Object> // object that provides UV generator functions
			
 
				+ *
			
 
				+ * }
			
 
				+ **/
			
 
				+
			
 
				+(function() {
			
 
				+
			
 
				+  THREE.ShapeGeometry = function( _shapes, options ) {
			
 
				+
			
 
				+    THREE.Geometry.call( this );
			
 
				+
			
 
				+    var shapes = _shapes instanceof Array ? _shapes : [ _shapes ];
			
 
				+
			
 
				+    this.shapebb = shapes[ shapes.length - 1 ].getBoundingBox();
			
 
				+
			
 
				+    this.addShapeList( shapes, options );
			
 
				+
			
 
				+    this.computeCentroids();
			
 
				+    this.computeFaceNormals();
			
 
				+
			
 
				+  };
			
 
				+
			
 
				+  /**
			
 
				+   * Extends THREE.Geometry
			
 
				+   */
			
 
				+  THREE.ShapeGeometry.prototype = Object.create( THREE.Geometry.prototype );
			
 
				+
			
 
				+  /**
			
 
				+   * 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++ ) {
			
 
				+
			
 
				+      var shape = shapes[ i ];
			
 
				+      this.addShape( shape, options );
			
 
				+
			
 
				+    }
			
 
				+
			
 
				+    return this;
			
 
				+
			
 
				+  };
			
 
				+
			
 
				+  /**
			
 
				+   * Adds a shape to THREE.ShapeGeometry, based on THREE.ExtrudeGeometry.
			
 
				+   */
			
 
				+  THREE.ShapeGeometry.prototype.addShape = function( shape, _options ) {
			
 
				+
			
 
				+    var options = isUndefined( _options ) ? {} : _options;
			
 
				+
			
 
				+    // TODO: This exists in THREE.ExtrudeGeometry, but not really used.
			
 
				+    // var curveSegments = isNumber( options.curveSegments ) ? options.curveSegments : 12;
			
 
				+
			
 
				+    var material = options.material;
			
 
				+    var uvgen = isUndefined( options.UVGenerator ) ? THREE.ExtrudeGeometry.WorldUVGenerator : options.UVGenerator;
			
 
				+
			
 
				+    var shapebb = this.shapebb;
			
 
				+
			
 
				+    // Variable initialization
			
 
				+
			
 
				+    var scope = this,
			
 
				+      i, l, hole, s; // Iterable variables
			
 
				+
			
 
				+    var shapesOffset = this.vertices.length;
			
 
				+    var shapePoints = shape.extractPoints();
			
 
				+
			
 
				+    var vertices = shapePoints.shape;
			
 
				+    var holes = shapePoints.holes;
			
 
				+
			
 
				+    var reverse = !THREE.Shape.Utils.isClockWise( vertices );
			
 
				+
			
 
				+    if ( reverse ) {
			
 
				+
			
 
				+      vertices = vertices.reverse();
			
 
				+
			
 
				+      // Maybe we should also check if holes are in the opposite direction, just to be safe...
			
 
				+
			
 
				+      for ( i = 0, l = holes.length; i < l; i++ ) {
			
 
				+
			
 
				+        hole = holes[ i ];
			
 
				+
			
 
				+        if ( THREE.Shape.Utils.isClockWise( hole ) ) {
			
 
				+
			
 
				+          holes[ i ] = hole.reverse();
			
 
				+
			
 
				+        }
			
 
				+
			
 
				+      }
			
 
				+
			
 
				+      reverse = false;
			
 
				+
			
 
				+    }
			
 
				+
			
 
				+    var faces = THREE.Shape.Utils.triangulateShape( vertices, holes );
			
 
				+
			
 
				+    // Vertices
			
 
				+
			
 
				+    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 );
			
 
				+
			
 
				+    }
			
 
				+
			
 
				+  };
			
 
				+
			
 
				+  /**
			
 
				+   * A few utility functions.
			
 
				+   */
			
 
				+
			
 
				+  function isNumber(o) {
			
 
				+    return toString.call(o) == '[object Number]';
			
 
				+  }
			
 
				+
			
 
				+  function isUndefined(o) {
			
 
				+    return o === void 0;
			
 
				+  }
			
 
				+
			
 
				+})();
			
--- a/utils/includes/extras.json
+++ b/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",