Skip to content

T
three.js

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

从无法访问的项目Fork

通知 1
Star 0
Fork 0
T
three.js

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

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

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

上级 08a37d34 660fa8cc
隐藏空白更改
内联 并排
Showing with 219 addition and 83 deletion
examples/js/UVsUtils.js 0 → 100644
浏览文件 @ 4313ed37
/*
* @author https://github.com/zz85 | @blurspline
*
* tool for "unwrapping" and debugging three.js
* geometries UV mapping
*
* Sample usage:
* document.body.appendChild(
* THREE.UVsDebug(
* new THREE.SphereGeometry(10,10,10,10));
*
*/
THREE.UVsDebug = function(geometry) {
var verts = geometry.vertices,
faces = geometry.faces,
uvs = geometry.faceVertexUvs[0];
console.log('debugging geometry', geometry);
var canvas = document.createElement('canvas');
var width = 1024;
var height = 1024;
canvas.width = width;
canvas.height = height;
var ctx = canvas.getContext('2d');
ctx.lineWidth = 1;
ctx.strokeStyle = 'rgba(0,0,0,0.8)';
// paint background white
ctx.fillStyle = 'rgba(255,255,255, 1.0)';
ctx.fillRect(0, 0, width, height);
var abc = 'abcd';
var uv, u, ax, ay;
var i, il, j, jl;
var a = new THREE.Vector2();
var b = new THREE.Vector2();
for (i = 0, il = uvs.length; i < il; i++) {
uv = uvs[i];
// draw lines
ctx.beginPath();
a.set(0, 0);
for (j = 0, jl = uv.length; j < jl; j++) {
u = uv[j];
a.x += u.u;
a.y += u.v;
if (j == 0) {
ctx.moveTo(u.u * width, u.v * height);
} else {
ctx.lineTo(u.u * width, u.v * height);
}
}
ctx.closePath();
ctx.stroke();
a.divideScalar(jl);
// label the face number
ctx.font = "12pt Arial bold";
ctx.fillStyle = 'rgba(0,0,0,0.8)';
ctx.fillText(i, a.x * width, a.y * height);
ctx.font = "8pt Arial bold";
ctx.fillStyle = 'rgba(30,30,0,0.8)';
// label uv edge orders
for (j = 0, jl = uv.length; j < jl; j++) {
u = uv[j];
b.set(u.u, u.v).subSelf(a).divideScalar(4);
b.x = u.u - b.x;
b.y = u.v - b.y;
ctx.fillText(abc[j]
+ ':' + faces[i][abc[j]], b.x * width, b.y * height);
}
}
return canvas;
}
\ No newline at end of file
examples/webgl_geometries2.html
浏览文件 @ 4313ed37
......@@ -9,7 +9,7 @@
font-family: Monospace;
background-color: #000;
margin: 0px;
overflow: hidden;
/*overflow: hidden;*/
}
</style>
</head>
......@@ -19,9 +19,10 @@
<script src="js/Detector.js"></script>
<script src="js/Stats.js"></script>
<script src="../src/core/Geometry.js"></script>
<script src="js/CurveExtras.js"></script>
<script src="js/UVsUtils.js"></script>
<script src="../src/extras/geometries/ParametricGeometry.js"></script>
<script src="../src/extras/geometries/ParametricGeometries.js"></script>
<script>
......@@ -68,13 +69,13 @@
var q = 3;
var radius = 150, tube = 10, segmentsR = 50, segmentsT = 20;
var GrannyKnot = new THREE.Curves.GrannyKnot();
var torus = new THREE.TorusKnotGeometry( radius, tube, segmentsR, segmentsT, p , q, heightScale );
var torus2 = new THREE.TorusKnotGeometry2( radius, tube, segmentsR, segmentsT, p , q, heightScale );
var sphere = new THREE.SphereGeometry( 75, 20, 10 );
var sphere2 = new THREE.SphereGeometry2( 75, 20, 10 );
var tube = new THREE.TubeGeometry(GrannyKnot, 150, 2, 8, true, false);
var tube2 = new THREE.TubeGeometry2(GrannyKnot, 150, 2, 8, true, false);
// var GrannyKnot = new THREE.Curves.GrannyKnot();
// var torus = new THREE.TorusKnotGeometry( radius, tube, segmentsR, segmentsT, p , q, heightScale );
// var torus2 = new THREE.TorusKnotGeometry2( radius, tube, segmentsR, segmentsT, p , q, heightScale );
// var sphere = new THREE.SphereGeometry( 75, 20, 10 );
// var sphere2 = new THREE.SphereGeometry2( 75, 20, 10 );
// var tube = new THREE.TubeGeometry(GrannyKnot, 150, 2, 8, true, false);
// var tube2 = new THREE.TubeGeometry2(GrannyKnot, 150, 2, 8, true, false);
// var benchmarkCopies = 1000;
......@@ -86,46 +87,60 @@
// scene.add( object );
// }
object = THREE.SceneUtils.createMultiMaterialObject( torus, materials );
console.log(THREE.ParametricGeometries);
var geo = new THREE.ParametricGeometry(20, 20, THREE.ParametricGeometries.klein);
object = THREE.SceneUtils.createMultiMaterialObject( geo, materials );
object.children[ 0 ].doubleSided = true;
object.position.set( 0, 0, 0 );
object.scale.multiplyScalar(10);
scene.add( object );
object = THREE.SceneUtils.createMultiMaterialObject( torus2, materials );
object.position.set( 0, 100, 0 );
scene.add( object );
// var geo = new THREE.ParametricGeometry(10, 10, THREE.ParametricGeometries.plane(200, 200));
THREE.UVsDebug( geo );
document.body.appendChild( THREE.UVsDebug( geo ));
object = THREE.SceneUtils.createMultiMaterialObject( geo, materials );
object.children[ 0 ].doubleSided = true;
// object = THREE.SceneUtils.createMultiMaterialObject( torus, materials );
// object.position.set( 0, 0, 0 );
// scene.add( object );
object = THREE.SceneUtils.createMultiMaterialObject( sphere, materials );
object.position.set( 500, 0, 0 );
scene.add( object );
// object = THREE.SceneUtils.createMultiMaterialObject( torus2, materials );
// object.position.set( 0, 100, 0 );
// scene.add( object );
object = THREE.SceneUtils.createMultiMaterialObject( sphere2, materials );
object.position.set( 200, 0, 0 );
scene.add( object );
object = THREE.SceneUtils.createMultiMaterialObject( tube, materials );
object.position.set( 0, 0, 0 );
scene.add( object );
object = THREE.SceneUtils.createMultiMaterialObject( tube2, materials );
object.position.set( 100, 0, 0 );
scene.add( object );
object = THREE.SceneUtils.createMultiMaterialObject( new THREE.ParametricGeometry(10, 10, klein) , materials );
object.position.set( 100, 0, 0 );
scene.add( object );
// object = THREE.SceneUtils.createMultiMaterialObject( sphere, materials );
// object.position.set( 500, 0, 0 );
// scene.add( object );
object = THREE.SceneUtils.createMultiMaterialObject( new THREE.PlaneGeometry( 400, 400, 4, 4 ), materials );
// object.children[ 0 ].doubleSided = true;
object.position.set( -200, 100, 0 );
scene.add( object );
// object = THREE.SceneUtils.createMultiMaterialObject( sphere2, materials );
// object.position.set( 200, 0, 0 );
// scene.add( object );
// object = THREE.SceneUtils.createMultiMaterialObject( tube, materials );
// object.position.set( 0, 0, 0 );
// scene.add( object );
object = THREE.SceneUtils.createMultiMaterialObject( new THREE.PlaneGeometry2( 400, 400, 4, 4 ), materials );
// object = THREE.SceneUtils.createMultiMaterialObject( tube2, materials );
// object.position.set( 100, 0, 0 );
// scene.add( object );
// object = THREE.SceneUtils.createMultiMaterialObject( new THREE.ParametricGeometry(10, 10, klein) , materials );
// object.position.set( 100, 0, 0 );
// scene.add( object );
// object = THREE.SceneUtils.createMultiMaterialObject( new THREE.PlaneGeometry( 400, 400, 4, 4 ), materials );
// // object.children[ 0 ].doubleSided = true;
// object.position.set( -200, 100, 0 );
// scene.add( object );
// object = THREE.SceneUtils.createMultiMaterialObject( new THREE.PlaneGeometry2( 400, 400, 4, 4 ), materials );
// object.children[ 0 ].doubleSided = true;
object.position.set( -200, 100, 0 );
scene.add( object );
// object.position.set( -200, 100, 0 );
// scene.add( object );
object = new THREE.AxisHelper();
object.position.set( 200, 0, -200 );
......
src/core/Geometry.js
浏览文件 @ 4313ed37
......@@ -574,7 +574,7 @@ THREE.Geometry.prototype = {
var precisionPoints = 4; // number of decimal points, eg. 4 for epsilon of 0.0001
var precision = Math.pow( 10, precisionPoints );
var i,il, face;
var abcd = 'abcd', o, k;
var abcd = 'abcd', o, k, j, jl, u;
for ( i = 0, il = this.vertices.length; i < il; i ++ ) {
......@@ -623,8 +623,12 @@ THREE.Geometry.prototype = {
// console.log('faces', face.a, face.b, face.c, face.d, 'dup at', k);
o.splice(k, 1);
this.faces[ i ] = new THREE.Face3(o[0], o[1], o[2]);
this.faceVertexUvs[0][i].splice(k, 1);
for (j=0,jl=this.faceVertexUvs.length;j<jl;j++) {
u = this.faceVertexUvs[j][i];
if (u) u.splice(k, 1);
}
break;
}
}
......@@ -634,8 +638,9 @@ THREE.Geometry.prototype = {
}
// Use unique set of vertices
var diff = this.vertices.length - unique.length;
this.vertices = unique;
return diff;
}
......
src/extras/geometries/ParametricGeometries.js
浏览文件 @ 4313ed37
......@@ -121,29 +121,41 @@ THREE.TubeGeometry2.prototype.constructor = THREE.TubeGeometry2;
THREE.TorusKnotGeometry2.prototype = new THREE.Geometry();
THREE.TorusKnotGeometry2.prototype.constructor = THREE.TorusKnotGeometry2;
var sin = Math.sin, cos = Math.cos, pi = Math.PI;
THREE.ParametricGeometries = {
klein: function (v, u) {
u *= pi;
v *= 2 * pi;
u = u * 2;
var x, y, z;
if (u < pi) {
x = 3 * cos(u) * (1 + sin(u)) + (2 * (1 - cos(u) / 2)) * cos(u) * cos(v);
z = -8 * sin(u) - 2 * (1 - cos(u) / 2) * sin(u) * cos(v);
} else {
x = 3 * cos(u) * (1 + sin(u)) + (2 * (1 - cos(u) / 2)) * cos(v + pi);
z = -8 * sin(u);
}
y = -2 * (1 - cos(u) / 2) * sin(v);
return new THREE.Vector3(x, y, z);
},
plane: function (width, height) {
return function(u, v) {
var x = u * width;
var y = 0;
var z = v * height;
function klein(u, v) {
u *= pi;
v *= 2 * pi;
console.log(x, y, z);
u = u * 2;
var x, y, z;
if (u < pi) {
x = 3 * cos(u) * (1 + sin(u)) + (2 * (1 - cos(u) / 2)) * cos(u) * cos(v);
z = -8 * sin(u) - 2 * (1 - cos(u) / 2) * sin(u) * cos(v);
} else {
x = 3 * cos(u) * (1 + sin(u)) + (2 * (1 - cos(u) / 2)) * cos(v + pi);
z = -8 * sin(u);
return new THREE.Vector3(x, y, z);
};
}
y = -2 * (1 - cos(u) / 2) * sin(v);
return new THREE.Vector3(x, y, z);
}
};
THREE.SphereGeometry2 = function(size, x, y) {
......@@ -171,7 +183,6 @@ THREE.PlaneGeometry2 = function(width, depth, segmentsWidth, segmentsDepth) {
function plane(u, v) {
console.log('u, v', u, v);
var x = u * width;
var y = 0;
var z = v * depth;
......
src/extras/geometries/ParametricGeometry.js
浏览文件 @ 4313ed37
......@@ -12,47 +12,60 @@ THREE.ParametricGeometry = function ( slices, stacks, func ) {
var faces = this.faces;
var uvs = this.faceVertexUvs[ 0 ];
var i, il, theta, j, phi, p;
var face3 = true;
for ( i = 0; i <= slices; i ++ ) {
var i, il, j, p;
var u, v;
theta = i / slices;
var stackCount = stacks + 1;
var sliceCount = slices + 1;
for ( i = 0; i <= stacks; i ++ ) {
for ( j = 0; j < stacks; j ++ ) {
v = i / stacks;
phi = j / stacks;
for ( j = 0; j <= slices; j ++ ) {
p = func( theta, phi );
u = j / slices;
p = func( u, v );
verts.push( p );
}
}
var v = 0, next;
var a, b, c, d;
var uva, uvb, uvc, uvd;
for ( i = 0; i < stacks; i ++ ) {
for ( j = 0; j < slices; j ++ ) {
a = i * stackCount + j;
b = i * stackCount + j + 1;
c = (i + 1) * stackCount + j;
d = (i + 1) * stackCount + j + 1;
uva = new THREE.UV( i / slices, j / stacks );
uvb = new THREE.UV( i / slices, ( j + 1 ) / stacks );
uvc = new THREE.UV( ( i + 1 ) / slices, j / stacks );
uvd = new THREE.UV( ( i + 1 ) / slices, ( j + 1 ) / stacks );
faces.push( new THREE.Face3( a, b, c ) );
faces.push( new THREE.Face3( b, d, c ) );
// Some UV / Face orientation work needs to be done here...
for ( i = 0; i < slices; i ++ ) {
for ( j = 0; j < stacks; j ++ ) {
next = ( j + 1 ) % stacks;
faces.push( new THREE.Face3( v + j, v + next, v + j + stacks ) );
faces.push( new THREE.Face3( v + next, v + next + stacks, v + j + stacks ) );
uvs.push( [
new THREE.UV( i / slices, j / stacks ),
new THREE.UV( i / slices, ( j + 1 ) / stacks ),
new THREE.UV( ( i + 1 ) / slices, j / stacks )
] );
uvs.push( [
new THREE.UV( i / slices, ( j + 1 ) / stacks ),
new THREE.UV( ( i + 1 ) / slices, ( j + 1 ) / stacks ),
new THREE.UV( ( i + 1 ) / slices, j / stacks )
] );
uvs.push( [ uva, uvb, uvc ] );
uvs.push( [ uvb, uvd, uvc ] );
}
v += stacks;
}
console.log(this);
// magic bullet
var diff = this.mergeVertices();
console.log('removed ', diff, ' vertices by merging')
this.computeCentroids();
this.computeFaceNormals();
this.computeVertexNormals();
......
Markdown is supported
0% 或 .
You are about to add 0 people to the discussion. Proceed with caution.
先完成此消息的编辑！
想要评论请 注册 或