Skip to content

T
three.js

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

从无法访问的项目Fork

通知 2
Star 0
Fork 0
T
three.js

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

提交 3e3c2034 编写于 作者: M Mr.doob
浏览文件
操作

Merge remote-tracking branch 'zz85/experimental' into dev

上级 087b6090 1cdc3cd2
隐藏空白更改
内联 并排
Showing with 213 addition and 417 deletion
examples/webgl_lod_text.html 0 → 100644
浏览文件 @ 3e3c2034
<!DOCTYPE HTML>
<html lang="en">
<head>
<title>three.js webgl - level-of-details</title>
<meta charset="utf-8">
<style type="text/css">
body {
background:#000;
color:#fff;
padding:0;
margin:0;
font-weight: bold;
overflow:hidden;
}
#info {
position: absolute;
top: 0px; width: 100%;
color: #ffffff;
padding: 5px;
font-family: Monospace;
font-size: 13px;
text-align: center;
z-index:100;
}
a { color:red }
</style>
</head>
<body>
<div id="info">
<a href="http://github.com/mrdoob/three.js" target="_blank">three.js</a> - level-of-details WebGL example
</div>
<script type="text/javascript" src="../build/Three.js"></script>
<script type="text/javascript" src="js/Detector.js"></script>
<script type="text/javascript" src="js/RequestAnimationFrame.js"></script>
<script type="text/javascript" src="js/Stats.js"></script>
<!--
<script type="text/javascript" src="../src/extras/geometries/Curve.js"></script>
<script type="text/javascript" src="../src/extras/geometries/CurvePath.js"></script>
<script type="text/javascript" src="../src/extras/geometries/Path.js"></script>
<script type="text/javascript" src="../src/extras/geometries/Shape.js"></script>
<script type="text/javascript" src="../src/extras/geometries/TextPath.js"></script>
<script type="text/javascript" src="../src/extras/geometries/ExtrudeGeometry.js"></script>
<script type="text/javascript" src="../src/extras/geometries/TextGeometry.js"></script>
-->
<!-- load the font file from canvas-text -->
<script type="text/javascript" src="fonts/helvetiker_regular.typeface.js"></script>
<script type="text/javascript">
if ( ! Detector.webgl ) Detector.addGetWebGLMessage();
var container, stats;
var camera, scene, renderer;
var geometry, objects;
var mouseX = 0, mouseY = 0;
var windowHalfX = window.innerWidth / 2;
var windowHalfY = window.innerHeight / 2;
document.addEventListener( 'mousemove', onDocumentMouseMove, false );
init();
animate();
function init() {
container = document.createElement( 'div' );
document.body.appendChild( container );
camera = new THREE.Camera( 45, window.innerWidth / window.innerHeight, 1, 15000 );
camera.position.z = 1000;
scene = new THREE.Scene();
scene.fog = new THREE.Fog( 0x000000, 1, 15000 );
var light = new THREE.PointLight( 0xff2200 );
light.position.set( 0, 0, 0 );
scene.addLight( light );
var light = new THREE.DirectionalLight( 0xffffff );
light.position.set( 0, 0, 1 );
light.position.normalize();
scene.addLight( light );
var wireMaterial = new THREE.MeshLambertMaterial( { color: 0x000000, wireframe: true } );
function getOptionsWithSegments(x,b, bevel) {
return {
size: 80,
height: 20,
curveSegments: x,
font: "helvetiker",
bevelSegments: b,
bevelEnabled: bevel,
bevelThickness:8,
bevelSize: 3,
steps: 1,
amount: 20,
};
};
var theText = "&"; // Try $ :)
// we could use TextPath and ExtrudeGeometry if we wish to optimize stuff futher
var geometry = [
[ new THREE.TextGeometry( theText, getOptionsWithSegments(8, 6, true)),
300, [ new THREE.MeshPhongMaterial( { color: 0xffee00 } ), wireMaterial ] ],
[ new THREE.TextGeometry( theText, getOptionsWithSegments(5,2, true)),
800, [ new THREE.MeshLambertMaterial( { color: 0xffaa00 } ), wireMaterial ]],
[ new THREE.TextGeometry( theText, getOptionsWithSegments(2,1, true)),
1000, [ new THREE.MeshLambertMaterial( { color: 0x005500 } ), wireMaterial ] ],
[ new THREE.TextGeometry( theText, getOptionsWithSegments(2,1,false)),
2000, [ new THREE.MeshLambertMaterial( { color: 0x0055ff } ), wireMaterial ]],
[ new THREE.TextGeometry( theText, getOptionsWithSegments(1,1, false)),
10000, [ new THREE.MeshLambertMaterial( { color: 0xff1100 } ), wireMaterial ]]
];
var i, j, mesh, lod;
for ( j = 0; j < 1000; j ++ ) {
lod = new THREE.LOD();
for ( i = 0; i < geometry.length; i++ ) {
mesh = new THREE.Mesh( geometry[ i ][ 0 ], geometry[ i ][ 2 ] );
mesh.scale.set( 1.5, 1.5, 1.5 );
mesh.updateMatrix();
mesh.matrixAutoUpdate = false;
lod.add( mesh, geometry[ i ][ 1 ] );
}
lod.position.x = 10000 * ( 0.5 - Math.random() );
lod.position.y = 7500 * ( 0.5 - Math.random() );
lod.position.z = 10000 * ( 0.5 - Math.random() );
lod.updateMatrix();
lod.matrixAutoUpdate = false;
scene.addObject( lod );
}
renderer = new THREE.WebGLRenderer( { clearColor:0x000000, clearAlpha: 1 } );
renderer.setSize( window.innerWidth, window.innerHeight );
renderer.sortObjects = false;
container.appendChild( renderer.domElement );
}
function onDocumentMouseMove(event) {
mouseX = ( event.clientX - windowHalfX ) * 10;
mouseY = ( event.clientY - windowHalfY ) * 10;
}
function animate() {
requestAnimationFrame( animate );
render();
}
function render() {
camera.position.x += ( mouseX - camera.position.x ) * .005;
camera.position.y += ( - mouseY - camera.position.y ) * .01;
renderer.render( scene, camera );
}
function log( text ) {
var e = document.getElementById("log");
e.innerHTML = text + "<br/>" + e.innerHTML;
}
</script>
</body>
</html>
src/extras/geometries/ExtrudeGeometry.js
浏览文件 @ 3e3c2034
......@@ -182,57 +182,6 @@ THREE.ExtrudeGeometry.prototype.addShape = function( shape, options ) {
var i, il;
// We no longer need centroids
// Find all centroids of shapes and holes
//var sum = new THREE.Vector2();
// for ( i = 0, il = contour.length; i < il; i ++ ) {
//
// sum.addSelf( contour[ i ] );
//
// }
//
// var contourCentroid = sum.divideScalar( contour.length );
//
// var holesCentroids = [];
//
// for ( h = 0, hl = holes.length; h < hl; h ++ ) {
//
// sum = new THREE.Vector2();
// ahole = holes[ h ];
//
// for ( i=0, il = ahole.length; i < il; i ++ ) {
//
// sum.addSelf( ahole[ i ] );
//
// }
//
// holesCentroids[ h ] = sum.divideScalar( ahole.length );
//
// }
//
// function scalePt ( pt, centroid, size, expandOutwards /* Boolean */ ) {
//
// var vectorFromCentroid = pt.clone().subSelf( centroid );
// var adj = size / vectorFromCentroid.length();
//
// if ( expandOutwards ) {
//
// adj = 1 + adj;
//
// } else {
//
// adj = 1 - adj;
//
// }
//
// return vectorFromCentroid.multiplyScalar( adj ).addSelf( centroid );
//
// }
function scalePt2 ( pt, vec, size ) {
if ( !vec ) console.log( "die" );
......@@ -361,8 +310,7 @@ THREE.ExtrudeGeometry.prototype.addShape = function( shape, options ) {
if ( s < 0 ) {
// in case of emergecy, revert to algorithm 1.
// console.log("opps");
return getBevelVec1( pt_i, pt_j, pt_k );
}
......@@ -518,7 +466,6 @@ THREE.ExtrudeGeometry.prototype.addShape = function( shape, options ) {
for ( i = 0, il = contour.length; i < il; i ++ ) {
vert = scalePt2( contour[ i ], contourMovements[ i ], bs );
//vert = scalePt( contour[ i ], contourCentroid, bs, false );
v( vert.x, vert.y, amount + z );
}
......@@ -532,7 +479,6 @@ THREE.ExtrudeGeometry.prototype.addShape = function( shape, options ) {
for ( i = 0, il = ahole.length; i < il; i++ ) {
//vert = scalePt( ahole[ i ], holesCentroids[h], bs, true );
vert = scalePt2( ahole[ i ], oneHoleMovements[ i ], bs );
if ( !extrudeByPath ) {
......
src/extras/geometries/TextGeometry.js
浏览文件 @ 3e3c2034
......@@ -19,7 +19,8 @@
* bevelThickness: <float>, // how deep into text bevel goes
* bevelSize: <float>, // how far from text outline is bevel
*
* bend: <bool> // bend according to hardcoded curve (for the moment)
* bend: <bool> // bend according to hardcoded curve (generates bendPath)
* bendPath: <curve> // wraps text according to bend Path
* }
*
* It uses techniques used in:
......@@ -83,11 +84,14 @@ THREE.TextGeometry = function ( text, parameters ) {
// parameters.bendPath = path;
// var path = new THREE.CurvePath();
// path.add(new THREE.LineCurve( 0, 0, 250, 0));
// path.add(new THREE.LineCurve( 250, 0, 300, 200));
//
// path.add(new THREE.LineCurve( 0, 50, 250, 150));
// path.add(new THREE.LineCurve( 250, 150, 400, 50));
// path.add(new THREE.LineCurve( 400, 50, 0, 50));
// parameters.bendPath = path;
// var path = new THREE.ArcCurve(0, 0, 200, Math.PI * 0, Math.PI * 2, true);
// parameters.bendPath = path;
// var path = new THREE.SplineCurve([
// new THREE.Vector2(0, 0),
// new THREE.Vector2(100, 40),
......@@ -177,363 +181,6 @@ THREE.FontUtils = {
},
/* LEGACY CODE
extractPoints : function( allPoints, charactersPoints ) {
// Quick exit
if ( allPoints.length < 3 ) {
//throw "not valid polygon";
console.log( "not valid polygon" );
return {
points: allPoints,
faces: []
};
}
// Try to split shapes and holes.
var p, point, shape,
all,
ch, singleCharPoints,
isolatedShapes = [];
// Use a quick hashmap for locating duplicates
for ( var c = 0; c < charactersPoints.length; c ++ ) {
singleCharPoints = charactersPoints[ c ];
all = [];
// Use a quick hashmap for locating duplicates
for ( var p = 0; p < singleCharPoints.length; p ++ ) {
point = singleCharPoints[ p ];
all.push( point.x + "," + point.y );
}
var firstIndex, firstPt, endPt, holes;
// We check the first loop whether its CW or CCW direction to determine
// whether its shapes or holes first
endPt = all.slice( 1 ).indexOf( all[ 0 ] );
var shapesFirst = this.Triangulate.area( singleCharPoints.slice( 0, endPt + 1 ) ) < 0;
//console.log( singleCharPoints.length, "shapesFirst", shapesFirst );
holes = [];
endPt = -1;
while ( endPt < all.length ) {
firstIndex = endPt + 1;
firstPt = all[ firstIndex ];
endPt = all.slice( firstIndex + 1 ).indexOf( firstPt ) + firstIndex;
if ( endPt <= firstIndex ) break;
var contours = singleCharPoints.slice( firstIndex, endPt + 1 );
if ( shapesFirst ) {
if ( this.Triangulate.area( contours ) < 0 ) {
// we got new isolated shape
if ( firstIndex > 0 ) {
isolatedShapes.push( { shape: shape, holes: holes } );
}
// Save the old shapes, then work on new additional separated shape
shape = contours;
holes = [];
} else {
holes.push( contours );
}
} else {
if ( this.Triangulate.area( contours ) < 0 ) {
isolatedShapes.push( { shape: contours, holes: holes } );
holes = [];
} else {
holes.push( contours );
}
}
endPt++;
}
if ( shapesFirst ) {
isolatedShapes.push( { shape: shape, holes: holes } );
}
}
//console.log("isolatedShapes", isolatedShapes);
// For each isolated shape, find the closest points and break to the hole to allow triangulation
// Find closest points between holes
// we could optimize with
// http://en.wikipedia.org/wiki/Proximity_problems
// http://en.wikipedia.org/wiki/Closest_pair_of_points
// http://stackoverflow.com/questions/1602164/shortest-distance-between-points-algorithm
var prevShapeVert, nextShapeVert,
prevHoleVert, nextHoleVert,
holeIndex, shapeIndex,
shapeId, shapeGroup,
h, h2,
hole, shortest, d,
p, pts1, pts2,
tmpShape1, tmpShape2,
tmpHole1, tmpHole2,
verts = [];
for ( shapeId = 0; shapeId < isolatedShapes.length; shapeId ++ ) {
shapeGroup = isolatedShapes[ shapeId ];
shape = shapeGroup.shape;
holes = shapeGroup.holes;
for ( h = 0; h < holes.length; h++ ) {
// we slice to each hole when neccessary
hole = holes[ h ];
shortest = Number.POSITIVE_INFINITY;
for ( h2 = 0; h2 < hole.length; h2++ ) {
pts1 = hole[ h2 ];
for ( p = 0; p < shape.length; p++ ) {
pts2 = shape[ p ];
d = pts1.distanceTo( pts2 );
if ( d < shortest ) {
shortest = d;
holeIndex = h2;
shapeIndex = p;
}
}
}
prevShapeVert = ( shapeIndex - 1 ) >= 0 ? shapeIndex - 1 : shape.length - 1;
nextShapeVert = ( shapeIndex + 1 ) < shape.length ? shapeIndex + 1 : 0;
prevHoleVert = ( holeIndex - 1 ) >= 0 ? holeIndex - 1 : hole.length - 1;
nextHoleVert = ( holeIndex + 1 ) < hole.length ? holeIndex + 1 : 0 ;
var areaapts = [];
areaapts.push( hole[ holeIndex ] );
areaapts.push( shape[ shapeIndex ] );
areaapts.push( shape[ prevShapeVert ] );
var areaa = this.Triangulate.area( areaapts );
var areabpts = [];
areabpts.push( hole[ holeIndex ] );
areabpts.push( hole[ prevHoleVert ] );
areabpts.push( shape[ shapeIndex ] );
var areab = this.Triangulate.area( areabpts );
var shapeOffset =1;
var holeOffset = -1;
var oldShapeIndex = shapeIndex, oldHoleIndex = holeIndex;
shapeIndex += shapeOffset;
holeIndex += holeOffset;
if ( shapeIndex < 0 ) { shapeIndex += shape.length; }
shapeIndex %= shape.length;
if ( holeIndex < 0 ) { holeIndex += hole.length; }
holeIndex %= shape.length;
prevShapeVert = ( shapeIndex - 1 ) >= 0 ? shapeIndex - 1 : shape.length - 1;
nextShapeVert = ( shapeIndex + 1 ) < shape.length ? shapeIndex + 1 : 0;
prevHoleVert = ( holeIndex - 1 ) >= 0 ? holeIndex - 1 : hole.length - 1;
nextHoleVert = ( holeIndex + 1 ) < hole.length ? holeIndex + 1 : 0 ;
areaapts = [];
areaapts.push( hole[ holeIndex ] );
areaapts.push( shape[ shapeIndex ] );
areaapts.push( shape[ prevShapeVert ] );
var areaa2 = this.Triangulate.area( areaapts );
areabpts = [];
areabpts.push( hole[ holeIndex ] );
areabpts.push( hole[ prevHoleVert ] );
areabpts.push( shape[ shapeIndex ] );
var areab2 = this.Triangulate.area( areabpts );
if ( ( areaa + areab ) > ( areaa2 + areab2 ) ) {
shapeIndex = oldShapeIndex;
holeIndex = oldHoleIndex ;
if ( shapeIndex < 0 ) { shapeIndex += shape.length; }
shapeIndex %= shape.length;
if ( holeIndex < 0 ) { holeIndex += hole.length; }
holeIndex %= shape.length;
prevShapeVert = ( shapeIndex - 1 ) >= 0 ? shapeIndex - 1 : shape.length - 1;
nextShapeVert = ( shapeIndex + 1 ) < shape.length ? shapeIndex + 1 : 0;
prevHoleVert = ( holeIndex - 1 ) >= 0 ? holeIndex - 1 : hole.length - 1;
nextHoleVert = ( holeIndex + 1 ) < hole.length ? holeIndex + 1 : 0 ;
}
tmpShape1 = shape.slice( 0, shapeIndex );
tmpShape2 = shape.slice( shapeIndex );
tmpHole1 = hole.slice( holeIndex );
tmpHole2 = hole.slice( 0, holeIndex );
verts.push( hole[ holeIndex ] );
verts.push( shape[ shapeIndex ] );
verts.push( shape[ prevShapeVert ] );
verts.push( hole[ holeIndex ] );
verts.push( hole[ prevHoleVert ] );
verts.push( shape[ shapeIndex ] );
shape = tmpShape1.concat( tmpHole1 ).concat( tmpHole2 ).concat( tmpShape2 );
}
shapeGroup.shape = shape;
}
var triangulatedPoints = [];
var triangulatedFaces = [];
var lastTriangles = 0;
for ( shapeId = 0; shapeId < isolatedShapes.length; shapeId ++ ) {
shapeGroup = isolatedShapes[ shapeId ];
shape = shapeGroup.shape;
triangulatedPoints = triangulatedPoints.concat( shape );
var triangles = THREE.FontUtils.Triangulate( shape, true );
// We need to offset vertex indices for faces
for ( var v = 0; v < triangles.length; v++ ) {
var face = triangles[ v ];
face[ 0 ] += lastTriangles;
face[ 1 ] += lastTriangles;
face[ 2 ] += lastTriangles;
}
triangulatedFaces = triangulatedFaces.concat( triangles );
lastTriangles += shape.length;
}
// Now we push the "cut" vertices back to the triangulated indices.
//console.log("we have verts.length",verts.length,verts);
var v, j, k, l, found, face;
for ( v = 0; v < verts.length / 3; v++ ) {
face = [];
for ( k = 0; k < 3; k++ ) {
found = false;
for ( j = 0; j < triangulatedPoints.length && !found; j++ ) {
l = v * 3 + k;
if ( triangulatedPoints[ j ].equals( verts[ l ] ) ) {
face.push( j );
found = true;
}
}
// you would not wish to reach this point of code, something went wrong
if ( !found ) {
triangulatedPoints.push( verts[ l ] );
face.push( triangulatedPoints.length - 1 );
console.log( "not found" )
}
}
triangulatedFaces.push( face );
}
//console.log( "triangles", triangulatedFaces.length, "points", triangulatedPoints );
return {
points: triangulatedPoints,
faces: triangulatedFaces
};
},*/
drawText : function( text ) {
var characterPts = [], allPts = [];
......
Markdown is supported
0% 或 .
You are about to add 0 people to the discussion. Proceed with caution.
先完成此消息的编辑！
想要评论请 注册 或