Skip to content
体验新版
项目
组织
正在加载...
登录
切换导航
打开侧边栏
Ablesons
three.js
提交
0819fc65
T
three.js
项目概览
Ablesons
/
three.js
与 Fork 源项目一致
从无法访问的项目Fork
通知
2
Star
0
Fork
0
代码
文件
提交
分支
Tags
贡献者
分支图
Diff
Issue
0
列表
看板
标记
里程碑
合并请求
0
Wiki
0
Wiki
分析
仓库
DevOps
项目成员
Pages
T
three.js
项目概览
项目概览
详情
发布
仓库
仓库
文件
提交
分支
标签
贡献者
分支图
比较
Issue
0
Issue
0
列表
看板
标记
里程碑
合并请求
0
合并请求
0
Pages
分析
分析
仓库分析
DevOps
Wiki
0
Wiki
成员
成员
收起侧边栏
关闭侧边栏
动态
分支图
创建新Issue
提交
Issue看板
体验新版 GitCode,发现更多精彩内容 >>
提交
0819fc65
编写于
7月 16, 2011
作者:
Z
zz85
浏览文件
操作
浏览文件
下载
电子邮件补丁
差异文件
messing with new curve object
上级
7ee8fb8f
变更
3
隐藏空白更改
内联
并排
Showing
3 changed file
with
168 addition
and
24 deletion
+168
-24
src/extras/geometries/Path.js
src/extras/geometries/Path.js
+112
-19
src/extras/geometries/Shape.js
src/extras/geometries/Shape.js
+54
-3
src/extras/geometries/TextGeometry.js
src/extras/geometries/TextGeometry.js
+2
-2
未找到文件。
src/extras/geometries/Path.js
浏览文件 @
0819fc65
/**
* @author zz85 / http://www.lab4games.net/zz85/blog
* Creates free form path.
* Creates free form 2d path using series of points, lines or curves.
*
**/
THREE
.
Path
=
function
(
points
)
{
...
...
@@ -19,12 +20,15 @@ THREE.PathActions = {
MOVE_TO
:
'
moveTo
'
,
LINE_TO
:
'
lineTo
'
,
QUADRATIC_CURVE_TO
:
'
quadraticCurveTo
'
,
// BEZIER quadratic CURVE
BEZIER_CURVE_TO
:
'
bezierCurveTo
'
,
// BEZIER cubic CURVE
CSPLINE_THRU
:
'
splineThru
'
// TODO cardinal splines
QUADRATIC_CURVE_TO
:
'
quadraticCurveTo
'
,
// Bezier quadratic curve
BEZIER_CURVE_TO
:
'
bezierCurveTo
'
,
// Bezier cubic curve
CSPLINE_THRU
:
'
splineThru
'
,
// Catmull-rom spline
ARC
:
'
arc
'
// Circle
};
//TODO Clean up PATH API
/* Create path using straight lines to connect all points */
THREE
.
Path
.
prototype
.
fromPoints
=
function
(
vectors
/*Array of Vector*/
)
{
...
...
@@ -78,21 +82,34 @@ THREE.Path.prototype.splineThru = function( pts /*Array of Vector*/ ) {
}
// FUTURE: Change the API or follow canvas API?
// TODO ARC (x,y, x-radius, y-radius, startAngle, endAngle)
THREE
.
Path
.
prototype
.
arc
=
function
()
{
THREE
.
Path
.
prototype
.
arc
=
function
(
aX
,
aY
,
aRadius
,
aStartAngle
,
aEndAngle
,
aClockwise
)
{
};
// TODO
var
args
=
Array
.
prototype
.
slice
.
call
(
arguments
);
this
.
actions
.
push
(
{
action
:
THREE
.
PathActions
.
ARC
,
args
:
args
}
);
};
/*
// FUTURE ENHANCEMENTS
example usage?
Path.addExprFunc('sineCurveTo', sineCurveGetPtFunction)
Path.sineCurveTo(x,y, amptitude);
sineCurve.getPoint(t);
return sine(disnt) * ampt
// Create a new func eg. sin (theta) x
THREE.Path.prototype.addExprFunc = function(exprName, func) {
};
*/
/* Return an array of vectors based on contour of the path */
THREE
.
Path
.
prototype
.
getPoints
=
function
(
divisions
)
{
divisions
=
divisions
||
4
;
divisions
=
divisions
||
12
;
var
points
=
[];
...
...
@@ -220,8 +237,30 @@ THREE.Path.prototype.getPoints = function( divisions ) {
}
break
;
case
THREE
.
PathActions
.
ARC
:
laste
=
this
.
actions
[
i
-
1
].
args
;
var
aX
=
args
[
0
],
aY
=
args
[
1
],
aRadius
=
args
[
2
],
aStartAngle
=
args
[
3
],
aEndAngle
=
args
[
4
],
aClockwise
=
args
[
5
];
var
lastx
=
laste
[
laste
.
length
-
2
],
lasty
=
laste
[
laste
.
length
-
1
]
;
var
deltaAngle
=
aEndAngle
-
aStartAngle
;
var
angle
;
for
(
j
=
1
;
j
<=
divisions
*
2
;
j
++
)
{
angle
=
aStartAngle
+
j
/
divisions
/
2
*
deltaAngle
;
tx
=
lastx
+
aX
+
aRadius
*
Math
.
cos
(
angle
);
ty
=
lasty
+
aY
+
aRadius
*
Math
.
sin
(
angle
);
}
points
.
push
(
new
THREE
.
Vector2
(
tx
,
ty
)
);
}
break
;
}
// end switch
}
...
...
@@ -271,6 +310,7 @@ var Spline2 = function () {
};
THREE
.
Path
.
prototype
.
getMinAndMax
=
function
()
{
var
points
=
this
.
getPoints
();
...
...
@@ -295,7 +335,7 @@ THREE.Path.prototype.getMinAndMax = function() {
}
// TODO find mid-pt?
// TODO
Include CG or
find mid-pt?
return
{
...
...
@@ -308,6 +348,8 @@ THREE.Path.prototype.getMinAndMax = function() {
};
// TODO. Test
// createPathGeometry by SolarCoordinates
/* Returns Object3D with line segments stored as children */
THREE
.
Path
.
prototype
.
createPathGeometry
=
function
(
divisions
,
lineMaterial
)
{
...
...
@@ -327,8 +369,49 @@ THREE.Path.prototype.createPathGeometry = function(divisions, lineMaterial) {
return
(
pathGeometry
);
};
// To get accurate point with reference to
// entire path distance at time t,
// following has to be done
// 1. Length of each sub path have to be known
// 2. Locate and identify type of curve
// 3. Get t for the curve
// 4. Return curve.getPointAt(t')
THREE
.
Path
.
prototype
.
getPoint
=
function
(
t
)
{
};
// Compute Lengths and Cache Them
THREE
.
Path
.
prototype
.
getLength
=
function
()
{
// Loop all actions/path
// Push sums into cached array
};
THREE
.
Line
=
function
(
x1
,
y1
,
x2
,
y2
)
{
this
.
x1
=
x1
;
this
.
y1
=
y1
;
this
.
x2
=
x2
;
this
.
y2
=
y2
;
};
THREE
.
Line
.
prototype
.
getPoints
(
divisions
)
{
if
(
!
divisions
)
divisions
=
200
;
var
d
,
pts
=
[];
for
(
d
=
0
;
d
<
divisions
;
d
++
)
{
pts
.
push
(
this
.
getPoint
(
d
/
divisions
));
};
return
pts
;
};
// ALL THINGS BELOW TO BE REFACTORSED
/*
curve.getPoints();
curve.getPoint(t);
curve.getPointAtArcLength(t);
curve.transform(params);
curve.getTangentAt(t)
*/
// ALL THINGS BELOW TO BE REFACTORED
// QN: Transform final pts or transform ACTIONS or add transform filters?
THREE
.
Path
.
prototype
.
getPoint
=
function
(
t
)
{
var
x0
,
y0
,
x1
,
y1
,
x2
,
y2
;
...
...
@@ -423,7 +506,7 @@ var tangentQuad = function (t, p0, p1, p2 ) {
THREE
.
Path
.
prototype
.
transform
=
function
(
path
)
{
path
=
new
THREE
.
Path
();
path
.
moveTo
(
0
,
0
);
path
.
quadraticCurveTo
(
200
,
20
,
2
40
,
80
);
path
.
quadraticCurveTo
(
100
,
20
,
1
40
,
80
);
console
.
log
(
path
.
cacheArcLengths
());
...
...
@@ -437,7 +520,8 @@ THREE.Path.prototype.transform = function(path) {
oldY
=
p
.
y
;
var
xNorm
=
oldX
/
thisBounds
.
maxX
;
xNorm
=
path
.
getUtoTmapping
(
xNorm
,
oldX
);
// 3 styles. 1) wrap stretched. 2) wrap stretch by arc length 3) warp by actual distance
// If using actual distance, for length > path, requires line extrusions
//xNorm = path.getUtoTmapping(xNorm, oldX); // 3 styles. 1) wrap stretched. 2) wrap stretch by arc length 3) warp by actual distance
var
pathPt
=
path
.
getPoint
(
xNorm
);
var
normal
=
path
.
getNormalVector
(
xNorm
).
multiplyScalar
(
oldY
);;
...
...
@@ -455,9 +539,16 @@ THREE.Path.prototype.transform = function(path) {
};
// Read http://www.tinaja.com/glib/nonlingr.pdf
//nonlinear transforms
THREE
.
Path
.
prototype
.
nltransform
=
function
(
a
,
b
,
c
,
d
,
e
,
f
)
{
// nonlinear transforms
THREE
.
Path
.
prototype
.
nltransform
=
function
(
a
,
b
,
c
,
d
,
e
,
f
)
{
// a - horiztonal size
// b - lean
// c - x offset
// d - vertical size
// e - climb
// f - y offset
var
oldPts
=
this
.
getPoints
();
var
i
,
il
,
p
,
oldX
,
oldY
;
for
(
i
=
0
,
il
=
oldPts
.
length
;
i
<
il
;
i
++
){
...
...
@@ -472,12 +563,13 @@ THREE.Path.prototype.nltransform = function(a,b,c,d,e,f) {
};
// FUTURE Export JSON Format
/* Draws this path onto a 2d canvas easily */
THREE
.
Path
.
prototype
.
debug
=
function
(
canvas
)
{
// JUST A STUB
var
bounds
=
this
.
getMinAndMax
();
if
(
!
canvas
)
{
...
...
@@ -548,10 +640,11 @@ THREE.Path.prototype.debug = function( canvas ) {
ctx
.
stroke
();
ctx
.
closePath
();
// DebugPoints
// Debug
Points
ctx
.
strokeStyle
=
"
red
"
;
/* TO CLEAN UP */
//var p, points = this.getPoints();
var
theta
=
-
90
/
180
*
Math
.
PI
;
var
p
,
points
=
this
.
transform
(
0.866
,
-
0.866
,
0
,
0.500
,
0.50
,
-
50
);
...
...
src/extras/geometries/Shape.js
浏览文件 @
0819fc65
...
...
@@ -22,19 +22,70 @@ THREE.Shape.prototype.constructor = THREE.Path;
/* Returns vertices of triangulated faces | get faces */
THREE
.
Shape
.
prototype
.
triangulate
=
function
()
{
var
pts
=
this
.
getPoints
();
/* */
if
(
THREE
.
FontUtils
.
Triangulate
.
area
(
pts
)
>
0
)
{
pts
=
pts
.
reverse
();
};
// return this.triangulate2(pts);
return
THREE
.
FontUtils
.
Triangulate
(
pts
,
true
);
};
THREE
.
Shape
.
prototype
.
triangulate2
=
function
(
pts
)
{
// For Poly2Tri.js
//var pts = this.getPoints();
var
shape
=
[];
for
(
var
p
in
pts
)
{
shape
.
push
(
new
js
.
poly2tri
.
Point
(
pts
[
p
].
x
,
pts
[
p
].
y
))
}
var
swctx
=
new
js
.
poly2tri
.
SweepContext
(
shape
);
/*
for (var idx in holes)
{
swctx.AddHole(holes[idx]);
}
*/
var
find
;
var
findIndexForPt
=
function
(
pt
)
{
find
=
new
THREE
.
Vector2
(
pt
.
x
,
pt
.
y
);
var
p
;
for
(
p
=
0
,
pl
=
pts
.
length
;
p
<
pl
;
p
++
)
{
if
(
pts
[
p
].
equals
(
find
))
return
p
;
}
return
-
1
;
};
// triangulate
js
.
poly2tri
.
sweep
.
Triangulate
(
swctx
);
var
triangles
=
swctx
.
GetTriangles
();
var
tr
;
var
facesPts
=
[];
for
(
var
t
in
triangles
)
{
tr
=
triangles
[
t
];
facesPts
.
push
([
findIndexForPt
(
tr
.
GetPoint
(
0
)),
findIndexForPt
(
tr
.
GetPoint
(
1
)),
findIndexForPt
(
tr
.
GetPoint
(
2
))
]);
}
console
.
log
(
facesPts
);
console
.
log
(
"
triangles
"
,
triangles
.
length
,
triangles
);
// Returns array of faces with 3 element each
return
facesPts
;
};
/* Convenience method to return ExtrudeGeometry */
THREE
.
Shape
.
prototype
.
extrude
=
function
(
options
)
{
...
...
src/extras/geometries/TextGeometry.js
浏览文件 @
0819fc65
...
...
@@ -677,7 +677,7 @@ THREE.FontUtils = {
}
path
.
debug
(
document
.
getElementById
(
"
boo
"
));
//
path.debug(document.getElementById("boo"));
console
.
log
(
path
);
...
...
@@ -880,7 +880,7 @@ THREE.FontUtils = {
for
(
i
=
0
;
i
<
length
;
)
{
action
=
outline
[
i
++
];
console
.
log
(
action
);
//
console.log(action);
switch
(
action
)
{
case
'
m
'
:
...
...
编辑
预览
Markdown
is supported
0%
请重试
或
添加新附件
.
添加附件
取消
You are about to add
0
people
to the discussion. Proceed with caution.
先完成此消息的编辑!
取消
想要评论请
注册
或
登录