Skip to content

GitLab

Commit c8ae6a3d authored by Jono Brandel's avatar Jono Brandel
Browse files
Options

First official commit of ShapeGeometry with examples.

parent d8e2a0ad
Expand all Hide whitespace changes
Inline Side-by-side
Showing with 36625 additions and 852 deletions
build/three.min.js
View file @ c8ae6a3d
This diff is collapsed.
examples/canvas_geometry_shapes_2d.html 0 → 100644
View file @ c8ae6a3d
<!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>
examples/webgl_geometry_shapes_2d.html 0 → 100644
View file @ c8ae6a3d
<!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>
src/extras/core/Shape.js
View file @ c8ae6a3d
......@@ -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 ) {
......
src/extras/geometries/ShapeGeometry.js
View file @ c8ae6a3d
/**
* @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;
}
})();
\ No newline at end of file
})();
utils/includes/extras.json
View file @ c8ae6a3d
......@@ -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",
......
Markdown is supported
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment