Skip to content

T
three.js

Ablesons / three.js
与 Fork 源项目一致

从无法访问的项目Fork

通知 2
Star 0
Fork 0
T
three.js

体验新版 GitCode，发现更多精彩内容 >>

提交 762f58a4 编写于 作者: Z zz85
浏览文件
操作

Shape Extrusion

上级 01dac824
隐藏空白更改
内联 并排
Showing with 741 addition and 1 deletion
examples/canvas_geometry_shape.html 0 → 100644
浏览文件 @ 762f58a4
<!DOCTYPE HTML>
<html lang="en">
<head>
<title>three.js canvas/webgl - geometry - text</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0; user-scalable=0;"/>
<style type="text/css">
body {
font-family: Monospace;
background-color: #f0f0f0;
margin: 0px;
overflow: hidden;
}
</style>
</head>
<body>
<canvas id="debug" style="position:absolute; left:100px"></canvas>
<script type="text/javascript" src="../build/Three.js"></script>
<script type="text/javascript" src="js/RequestAnimationFrame.js"></script>
<script type="text/javascript" src="js/Stats.js"></script>
<!-- load the font file from canvas-text -->
<script type="text/javascript" src="../src/extras/geometries/Path.js"></script>
<script type="text/javascript">
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 Dynamic 3D Shapes Example by <a href="http://www.lab4games.net/zz85/blog">zz85</a><br/>Drag to spin the text';
container.appendChild( info );
camera = new THREE.Camera( 50, window.innerWidth / window.innerHeight, 1, 1000 );
camera.position.y = 150;
camera.position.z = 500;
camera.target.position.y = 150;
scene = new THREE.Scene();
var californiaPts=[];
californiaPts.push( new THREE.Vector2 (610, 320) );
californiaPts.push( new THREE.Vector2 (450, 300) );
californiaPts.push( new THREE.Vector2 (392, 392) );
californiaPts.push( new THREE.Vector2 (266, 438) );
californiaPts.push( new THREE.Vector2 (190, 570) );
californiaPts.push( new THREE.Vector2 (190, 600) );
californiaPts.push( new THREE.Vector2 (160, 620) );
californiaPts.push( new THREE.Vector2 (160, 650) );
californiaPts.push( new THREE.Vector2 (180, 640) );
californiaPts.push( new THREE.Vector2 (165, 680) );
californiaPts.push( new THREE.Vector2 (150, 670) );
californiaPts.push( new THREE.Vector2 (90, 737) );
californiaPts.push( new THREE.Vector2 (80, 795) );
californiaPts.push( new THREE.Vector2 (50, 835) );
californiaPts.push( new THREE.Vector2 (64, 870) );
californiaPts.push( new THREE.Vector2 (60, 945) );
californiaPts.push( new THREE.Vector2 (300, 945) );
californiaPts.push( new THREE.Vector2 (300, 743) );
californiaPts.push( new THREE.Vector2 (600, 473) );
californiaPts.push( new THREE.Vector2 (626, 425) );
californiaPts.push( new THREE.Vector2 (600, 370) );
californiaPts.push( new THREE.Vector2 (610, 320) );
var californiaShape = new THREE.Shape(californiaPts);
var california3d = new THREE.ExtrudeGeometry( californiaShape, {
amount: 20
});
var extrudeSettings = {
amount: 30
};
var triangleShape = new THREE.Shape();
triangleShape.moveTo(80, 20);
triangleShape.lineTo(40, 80);
triangleShape.lineTo(120, 80);
triangleShape.lineTo(80,20); // close path
var triangle3d = triangleShape.extrude(extrudeSettings);
var x = 0, y = 0;
var heartShape = new THREE.Shape(); // From http://blog.burlock.org/html5/130-paths
heartShape.moveTo(x + 25, y + 25);
heartShape.bezierCurveTo(x + 25, y + 25, x + 20, y, x, y);
heartShape.bezierCurveTo(x - 30, y, x - 30, y + 35,x - 30,y + 35);
heartShape.bezierCurveTo(x - 30, y + 55, x - 10, y + 77, x + 25, y + 95);
heartShape.bezierCurveTo(x + 60, y + 77, x + 80, y + 55, x + 80, y + 35);
heartShape.bezierCurveTo(x + 80, y + 35, x + 80, y, x + 50, y);
heartShape.bezierCurveTo(x + 35, y, x + 25, y + 25, x + 25, y + 25);
var heart3d = heartShape.extrude(extrudeSettings);
//heartShape.debug(document.getElementById("debug"));
var sqLength = 80;
var squareShape = new THREE.Shape();
squareShape.moveTo(0,0);
squareShape.lineTo(0, sqLength);
squareShape.lineTo(sqLength, sqLength);
squareShape.lineTo(sqLength, 0);
squareShape.lineTo(0, 0);
var square3d = squareShape.extrude(extrudeSettings);
var rectLength = 120, rectWidth = 40;
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);
var rect3d = rectShape.extrude(extrudeSettings);
var roundedRectShape = new THREE.Shape();
roundedRect(roundedRectShape, 0, 0, 50,50, 20);
var roundedRect3d = roundedRectShape.extrude(extrudeSettings);
function roundedRect(ctx,x,y,width,height,radius){
ctx.moveTo(x,y+radius);
ctx.lineTo(x,y+height-radius);
ctx.quadraticCurveTo(x,y+height,x+radius,y+height);
ctx.lineTo(x+width-radius,y+height);
ctx.quadraticCurveTo(x+width,y+height,x+width,y+height-radius);
ctx.lineTo(x+width,y+radius);
ctx.quadraticCurveTo(x+width,y,x+width-radius,y);
ctx.lineTo(x+radius,y);
ctx.quadraticCurveTo(x,y,x,y+radius);
}
var circleRadius = 20;
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 circle3d = circleShape.extrude(extrudeSettings);
x = y = 0;
var fishShape = new THREE.Shape();
fishShape.moveTo(x,y);
fishShape.quadraticCurveTo(x + 50, y - 80, x + 90, y - 10);
fishShape.quadraticCurveTo(x + 100, y - 10, x + 115, y - 40);
fishShape.quadraticCurveTo(x + 115, y, x + 115, y + 40);
fishShape.quadraticCurveTo(x + 100, y + 10, x + 90, y + 10);
fishShape.quadraticCurveTo(x + 50, y + 80, x, y);
var fish3d = fishShape.extrude(extrudeSettings);
// TOFIX: swap order of points around.
var textMaterial = new THREE.MeshBasicMaterial( { color: Math.random() * 0xffffff, wireframe:false } );
text = new THREE.Mesh( square3d, textMaterial );
text.doubleSided = false;
text.position.y = 100;
// text.position.y = 100;
text.position.z = 200;
text.rotation.x = 0;
text.rotation.y = Math.PI*2;
text.overdraw = true;
scene.addObject( text );
var triangleMesh = new THREE.Mesh( triangle3d, textMaterial );
triangleMesh.position.x = 180;
triangleMesh.position.y = 50;
scene.addObject( triangleMesh );
// Plane
plane = new THREE.Mesh( new THREE.PlaneGeometry( 800, 800 ), new THREE.MeshBasicMaterial( { color: 0xe0e0e0, wireframe:true }) );
plane.rotation.x = - 90 * ( Math.PI / 180 );
plane.position.x = 0;
plane.overdraw = true;
//scene.addObject( plane );
renderer = new THREE.CanvasRenderer();
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() {
plane.rotation.z = text.rotation.y += ( targetRotation - text.rotation.y ) * 0.05;
renderer.render( scene, camera );
}
</script>
</body>
</html>
src/extras/geometries/Path.js 0 → 100644
浏览文件 @ 762f58a4
/**
* @author zz85 / http://www.lab4games.net/zz85/blog
* Creates free form path.
**/
THREE.Path = function (points) {
this.path = [];
if (points) {
this.fromPoints(points);
}
};
var ACTIONS = {
MOVE_TO: 'moveTo',
LINE_TO: 'lineTo',
QUADRATIC_CURVE_TO: 'quadraticCurveTo', //BEZIER quadratic CURVE
BEZIER_CURVE_TO: 'bezierCurveTo', //BEZIER cubic CURVE
CSPLINE_TO: 'cSplineTo' // TODO cardinal splines
};
/* create path using straight lines to connect all points */
THREE.Path.prototype.fromPoints = function(vectors) {
var v = 0, vlen = vectors.length;
this.moveTo(vectors[0].x, vectors[0].y);
for (v=1; v<vlen ;v++) {
this.lineTo(vectors[v].x, vectors[v].y);
};
};
THREE.Path.prototype.moveTo = function(x,y) {
var args = Array.prototype.slice.call(arguments);
this.path.push({action:ACTIONS.MOVE_TO, args:args});
};
THREE.Path.prototype.lineTo = function(x,y) {
var args = Array.prototype.slice.call(arguments);
this.path.push({action:ACTIONS.LINE_TO, args:args});
};
THREE.Path.prototype.quadraticCurveTo = function(aCPx, aCPy, aX, aY) {
var args = Array.prototype.slice.call(arguments);
this.path.push({action:ACTIONS.QUADRATIC_CURVE_TO, args:args});
};
THREE.Path.prototype.bezierCurveTo = function(aCP1x, aCP1y,
aCP2x, aCP2y,
aX, aY) {
var args = Array.prototype.slice.call(arguments);
this.path.push({action:ACTIONS.BEZIER_CURVE_TO, args:args});
};
/* Return an array of vectors based on contour of the path */
THREE.Path.prototype.getPoints = function(divisions) {
divisions = divisions || 12;
var pts = [];
var x,o, args;
for (x in this.path) {
o = this.path[x];
args = o.args;
switch( action = o.action ) {
case ACTIONS.MOVE_TO:
//pts.push( new THREE.Vector2( args[0], args[1] ) );
break;
case ACTIONS.LINE_TO:
pts.push( new THREE.Vector2( args[0], args[1] ) );
break;
case ACTIONS.QUADRATIC_CURVE_TO:
var cpx, cpy, cpx1, cpy1, cpx0, cpy0;
cpx = args[2];
cpy = args[3];
cpx1 = args[0];
cpy1 = args[1];
var laste, cpx0, cpy0;
if (pts.length > 0 ) {
laste = pts[ pts.length - 1 ];
cpx0 = laste.x;
cpy0 = laste.y;
} else {
laste = this.path[x-1].args;
cpx0 = laste[laste.length-2];
cpy0 = laste[laste.length-1];
}
for ( i2 = 1; i2 <= divisions; i2++ ) {
// TODO use LOD for divions
var t = i2 / divisions;
var tx = THREE.FontUtils.b2( t, cpx0, cpx1, cpx );
var ty = THREE.FontUtils.b2( t, cpy0, cpy1, cpy );
pts.push( new THREE.Vector2( tx, ty ) );
}
break;
case ACTIONS.BEZIER_CURVE_TO:
cpx = args[4];
cpy = args[5];
cpx1 = args[0];
cpy1 = args[1];
cpx2 = args[2];
cpy2 = args[3];
var laste, cpx0, cpy0;
if (pts.length > 0 ) {
laste = pts[ pts.length - 1 ];
cpx0 = laste.x;
cpy0 = laste.y;
} else {
laste = this.path[x-1].args;
cpx0 = laste[laste.length-2];
cpy0 = laste[laste.length-1];
}
for ( i2 = 1; i2 <= divisions; i2++ ) {
var t = i2 / divisions;
var tx = THREE.FontUtils.b3( t, cpx0, cpx1, cpx2, cpx );
var ty = THREE.FontUtils.b3( t, cpy0, cpy1, cpy2, cpy );
pts.push( new THREE.Vector2( tx, ty ) );
}
break;
}
}
return pts;
};
THREE.Path.prototype.getMinAndMax = function() {
var pts = this.getPoints();
var maxX = maxY = Number.NEGATIVE_INFINITY;
var minX = minY = Number.POSITIVE_INFINITY;
var p, pt;
for (p in pts) {
pt = pts[p];
if (pt.x > maxX) maxX = pt.x;
if (pt.y > maxY) maxY = pt.y;
if (pt.x < minX) minX = pt.x;
if (pt.y < maxY) minY = pt.y;
}
// TODO find mid-pt?
return {
minX: minX,
minY: minY,
maxX: maxX,
maxY: maxY
};
};
/* Draws this path onto a 2d canvas easily */
THREE.Path.prototype.debug = function(canvas) {
// JUST A STUB
if (!canvas) {
canvas = document.createElement("canvas");
canvas.setAttribute('width', 200);
canvas.setAttribute('height', 200);
document.body.appendChild(canvas);
}
var ctx = canvas.getContext("2d");
ctx.fillStyle = "white";
ctx.fillRect(0,0,200,200);
ctx.strokeStyle = "black";
ctx.beginPath();
var i,o, a;
// Debug Path
for (i in this.path) {
o = this.path[i];
a = o.args;
// Short hand for now
ctx[o.action].apply(ctx, a);
/*
switch (o.action) {
case ACTIONS.MOVE_TO:
ctx[o.action](a[0],a[1]);
break;
case ACTIONS.LINE_TO:
ctx[o.action](a[0],a[1]);
break;
case ACTIONS.QUADRATIC_CURVE_TO:
ctx[o.action](a[0],a[1],a[2],a[3]);
break;
case ACTIONS.CUBIC_CURVE_TO:
ctx[o.action](a[0],a[1],a[2],a[3], a[4], a[5]);
break;
}*/
}
ctx.stroke();
ctx.closePath();
// DebugPoints
ctx.strokeStyle = "red";
var pts = this.getPoints();
for (var p in pts) {
ctx.beginPath();
ctx.arc(pts[p].x,pts[p].y, 1.5,0, Math.PI*2, false);
ctx.stroke();
ctx.closePath();
}
};
// STEP 1 Create a path.
// STEP 2 Turn path into shape.
// STEP 3 Extrude Geometry takes in Shape/Shapes
// STEP 3a - Extract points from each shape, turn to Vertics
// STEP 3b - Triangulate Each Shape
/* Defines a 2d shape plane using paths */
THREE.Shape = function ( ) {
THREE.Path.apply( this, arguments);
this.holes = [];
};
THREE.Shape.prototype = new THREE.Path();
THREE.Shape.prototype.constructor = THREE.Path;
/* Returns vertices of triangulated faces | get faces */
THREE.Shape.prototype.triangulate = function() {
return THREE.FontUtils.Triangulate( this.getPoints(), true );
};
/* Convienence Method to return ExtrudeGeometry */
THREE.Shape.prototype.extrude = function(options) {
var extruded = new THREE.ExtrudeGeometry(this, options);
return extruded;
};
THREE.ExtrudeGeometry = function(shape, options) {
var amount;
if (!options.amount) {
amount = 100;
} else {
amount = options.amount;
}
THREE.Geometry.call( this );
vertices = shape.getPoints();
faces = shape.triangulate();
contour = vertices;
bezelEnabled = false;
var scope = this;
var i,
vert, vlen = vertices.length,
face, flen = faces.length;
// Back facing vertices
for ( i = 0; i < vlen; i++ ) {
vert = vertices[ i ];
v( vert.x, vert.y, 0 );
}
// Front facing vertices
for ( i = 0; i < vlen; i++ ) {
vert = vertices[ i ];
v( vert.x, vert.y, amount );
}
if ( bezelEnabled ) {
for ( i = 0; i < blen; i++ ) {
bezelPt = bezelPoints[ i ];
v( bezelPt.x, bezelPt.y, bezelThickness );
}
for ( i = 0; i < blen; i++ ) {
bezelPt = bezelPoints[ i ];
v( bezelPt.x, bezelPt.y, amount - bezelThickness );
}
}
// Bottom faces
for ( i = 0; i < flen; i++ ) {
face = faces[ i ];
f3( face[ 2 ], face[ 1 ], face[ 0 ] );
}
// Top faces
for ( i = 0; i < flen; i++ ) {
face = faces[ i ];
f3( face[ 0 ] + vlen, face[ 1 ] + vlen, face[ 2 ] + vlen );
}
var lastV;
var j, k, l, m;
// Faces Sides
contour.push(contour[0]); // in order not to check for boundary indics every time.
i = contour.length;
while ( --i > 0 ) {
lastV = contour[ i ];
for ( j = 0; j < vlen; j++ ) {
if ( vertices[ j ].equals( contour[ i ] ) ) break;
}
for ( k = 0; k < vlen; k++ ) {
if ( vertices[ k ].equals( contour[ i - 1 ] ) ) break;
}
// Create faces for the z-sides of the text
f4( j, k, k + vlen, j + vlen );
}
// UVs to be added
this.computeCentroids();
this.computeFaceNormals();
//this.computeVertexNormals();
function v( x, y, z ) {
scope.vertices.push( new THREE.Vertex( new THREE.Vector3( x, y, z ) ) );
}
function f3( a, b, c ) {
scope.faces.push( new THREE.Face3( a, b, c) );
}
function f4( a, b, c, d ) {
scope.faces.push( new THREE.Face4( a, b, c, d) );
}
};
THREE.ExtrudeGeometry.prototype = new THREE.Geometry();
THREE.ExtrudeGeometry.prototype.constructor = THREE.ExtrudeGeometry;
src/extras/geometries/TextGeometry.js
浏览文件 @ 762f58a4
......@@ -663,6 +663,8 @@ THREE.FontUtils = {
offset = 0,
chars = String( text ).split( '' ),
length = chars.length;
var fontPaths = [];
for ( i = 0; i < length; i++ ) {
......@@ -670,6 +672,7 @@ THREE.FontUtils = {
offset += ret.offset;
characterPts.push( ret.points );
allPts = allPts.concat( ret.points );
fontPaths.push( ret.path );
}
......@@ -849,6 +852,8 @@ THREE.FontUtils = {
extractGlyphPoints : function( c, face, scale, offset ) {
var pts = [];
var path = new THREE.Path();
var i, i2,
outline, action, length,
......@@ -880,6 +885,8 @@ THREE.FontUtils = {
x = outline[ i++ ] * scaleX + offset;
y = outline[ i++ ] * scaleY;
pts.push( new THREE.Vector2( x, y ) );
path.moveTo(x,y);
break;
case 'l':
......@@ -889,6 +896,7 @@ THREE.FontUtils = {
x = outline[ i++ ] * scaleX + offset;
y = outline[ i++ ] * scaleY;
pts.push( new THREE.Vector2( x, y ) );
path.lineTo(x,y);
break;
case 'q':
......@@ -899,6 +907,8 @@ THREE.FontUtils = {
cpy = outline[ i++ ] * scaleY;
cpx1 = outline[ i++ ] * scaleX + offset;
cpy1 = outline[ i++ ] * scaleY;
path.quadraticCurveTo(cpx1, cpy1, cpx, cpy);
laste = pts[ pts.length - 1 ];
......@@ -930,6 +940,8 @@ THREE.FontUtils = {
cpy1 = outline[ i++ ] * -scaleY;
cpx2 = outline[ i++ ] * scaleX + offset;
cpy2 = outline[ i++ ] * -scaleY;
path.quadraticCurveTo(cpx, cpy, cpx1, cpy1, cpx2, cpy2);
laste = pts[ pts.length - 1 ];
......@@ -955,8 +967,11 @@ THREE.FontUtils = {
}
}
path.debug(document.getElementById("boo"));
console.log(path);
return { offset: glyph.ha*scale, points:pts };
return { offset: glyph.ha*scale, points:pts, path:path};
}
};
......
Markdown is supported
0% 或 .
You are about to add 0 people to the discussion. Proceed with caution.
先完成此消息的编辑！
想要评论请 注册 或