mirror of
https://github.com/wahyd4/three.js.git
synced 2026-08-09 04:56:01 +10:00
Merge remote-tracking branch 'remotes/zz85/master' into dev
This commit is contained in:
alteredq
@@ -0,0 +1,318 @@
|
||||
<!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>
|
||||
@@ -0,0 +1,407 @@
|
||||
/**
|
||||
* @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;
|
||||
@@ -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};
|
||||
}
|
||||
|
||||
};
|
||||
|
||||
Reference in New Issue
Block a user