Skip to content
体验新版
项目
组织
正在加载...
登录
切换导航
打开侧边栏
Ablesons
three.js
提交
cac14305
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,发现更多精彩内容 >>
提交
cac14305
编写于
7月 14, 2011
作者:
Z
zz85
浏览文件
操作
浏览文件
下载
电子邮件补丁
差异文件
Playing with non-linear transformations in Path and Text
上级
f1559f01
变更
2
隐藏空白更改
内联
并排
Showing
2 changed file
with
157 addition
and
14 deletion
+157
-14
src/extras/geometries/Path.js
src/extras/geometries/Path.js
+143
-4
src/extras/geometries/TextGeometry.js
src/extras/geometries/TextGeometry.js
+14
-10
未找到文件。
src/extras/geometries/Path.js
浏览文件 @
cac14305
...
...
@@ -78,13 +78,21 @@ THREE.Path.prototype.splineThru = function( pts /*Array of Vector*/ ) {
}
// TODO ARC
// TODO ARC (x,y, x-radius, y-radius, startAngle, endAngle)
THREE
.
Path
.
prototype
.
arc
=
function
()
{
};
// TODO
// 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
||
12
;
divisions
=
divisions
||
4
;
var
points
=
[];
...
...
@@ -300,6 +308,122 @@ THREE.Path.prototype.getMinAndMax = function() {
};
// createPathGeometry by SolarCoordinates
/* Returns Object3D with line segments stored as children */
THREE
.
Path
.
prototype
.
createPathGeometry
=
function
(
divisions
,
lineMaterial
)
{
var
pts
=
this
.
getPoints
(
divisions
);
var
segment
,
pathGeometry
=
new
THREE
.
Object3D
;
if
(
!
lineMaterial
)
lineMaterial
=
new
THREE
.
LineBasicMaterial
(
{
color
:
0x000000
,
opacity
:
0.7
}
);
for
(
var
i
=
1
;
i
<
pts
.
length
;
i
++
)
{
var
pathSegment
=
new
THREE
.
Geometry
();
pathSegment
.
vertices
.
push
(
new
THREE
.
Vertex
(
new
THREE
.
Vector3
(
pts
[
i
-
1
].
x
,
pts
[
i
-
1
].
y
,
0
)
)
);
pathSegment
.
vertices
.
push
(
new
THREE
.
Vertex
(
new
THREE
.
Vector3
(
pts
[
i
].
x
,
pts
[
i
].
y
,
0
)
)
);
segment
=
new
THREE
.
Line
(
pathSegment
,
lineMaterial
);
pathGeometry
.
addChild
(
segment
);
}
return
(
pathGeometry
);
};
THREE
.
Path
.
prototype
.
getPoint
=
function
(
t
)
{
var
x0
,
y0
,
x1
,
y1
,
x2
,
y2
;
x0
=
this
.
actions
[
0
].
args
[
0
];
y0
=
this
.
actions
[
0
].
args
[
1
];
x1
=
this
.
actions
[
1
].
args
[
0
];
y1
=
this
.
actions
[
1
].
args
[
1
];
x2
=
this
.
actions
[
1
].
args
[
2
];
y2
=
this
.
actions
[
1
].
args
[
3
];
var
tx
,
ty
;
tx
=
THREE
.
FontUtils
.
b2
(
t
,
x0
,
x1
,
x2
);
ty
=
THREE
.
FontUtils
.
b2
(
t
,
y0
,
y1
,
y2
);
return
new
THREE
.
Vector2
(
tx
,
ty
);
};
THREE
.
Path
.
prototype
.
getNormalVector
=
function
(
t
)
{
// iterate sub segments
// get lengths for sub segments
// if segment is bezier
// perform sub devisions or perform integrals.
var
x0
,
y0
,
x1
,
y1
,
x2
,
y2
;
x0
=
this
.
actions
[
0
].
args
[
0
];
y0
=
this
.
actions
[
0
].
args
[
1
];
x1
=
this
.
actions
[
1
].
args
[
0
];
y1
=
this
.
actions
[
1
].
args
[
1
];
x2
=
this
.
actions
[
1
].
args
[
2
];
y2
=
this
.
actions
[
1
].
args
[
3
];
var
tx
,
ty
;
tx
=
tangentQuad
(
t
,
x0
,
x1
,
x2
);
ty
=
tangentQuad
(
t
,
y0
,
y1
,
y2
);
// return normal
return
new
THREE
.
Vector2
(
-
ty
,
tx
).
unit
();
};
var
tangentQuad
=
function
(
t
,
p0
,
p1
,
p2
)
{
return
2
*
(
1
-
t
)
*
(
p1
-
p0
)
+
2
*
t
*
(
p2
-
p1
)
;
}
// FUTURE refactor path = an array of lines -> straight, bezier, splines, arc, funcexpr lines
// Read http://www.planetclegg.com/projects/WarpingTextToSplines.html
THREE
.
Path
.
prototype
.
transform
=
function
(
path
)
{
path
=
new
THREE
.
Path
();
path
.
moveTo
(
0
,
0
);
path
.
quadraticCurveTo
(
100
,
50
,
400
,
0
);
var
thisBounds
=
this
.
getMinAndMax
();
var
oldPts
=
this
.
getPoints
();
var
i
,
il
,
p
,
oldX
,
oldY
,
xNorm
;
for
(
i
=
0
,
il
=
oldPts
.
length
;
i
<
il
;
i
++
){
p
=
oldPts
[
i
];
oldX
=
p
.
x
;
oldY
=
p
.
y
;
var
xNorm
=
oldX
/
thisBounds
.
maxX
;
var
pathPt
=
path
.
getPoint
(
xNorm
);
var
normal
=
path
.
getNormalVector
(
xNorm
).
multiplyScalar
(
oldY
);;
p
.
x
=
pathPt
.
x
+
normal
.
x
;
p
.
y
=
pathPt
.
y
+
normal
.
y
;
//p.x = a * oldX + b * oldY + c;
//p.y = d * oldY + e * oldX + f;
}
return
oldPts
;
};
// Read http://www.tinaja.com/glib/nonlingr.pdf
//nonlinear transforms
THREE
.
Path
.
prototype
.
nltransform
=
function
(
a
,
b
,
c
,
d
,
e
,
f
)
{
var
oldPts
=
this
.
getPoints
();
var
i
,
il
,
p
,
oldX
,
oldY
;
for
(
i
=
0
,
il
=
oldPts
.
length
;
i
<
il
;
i
++
){
p
=
oldPts
[
i
];
oldX
=
p
.
x
;
oldY
=
p
.
y
;
p
.
x
=
a
*
oldX
+
b
*
oldY
+
c
;
p
.
y
=
d
*
oldY
+
e
*
oldX
+
f
;
}
return
oldPts
;
};
/* Draws this path onto a 2d canvas easily */
THREE
.
Path
.
prototype
.
debug
=
function
(
canvas
)
{
...
...
@@ -380,8 +504,23 @@ THREE.Path.prototype.debug = function( canvas ) {
ctx
.
strokeStyle
=
"
red
"
;
var
p
,
points
=
this
.
getPoints
();
//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
);
//0.866, - 0.866,0, 0.500 , 0.50,-50
// Math.cos(theta),Math.sin(theta),100,
// Math.cos(theta),-Math.sin(theta),-50
// translate, scale, rotation
// a - horiztonal size
// b - lean
// c - x offset
// d - vertical size
// e - climb
// f - y offset
// 1,0,0,
// -1,0,100
for
(
i
=
0
,
il
=
points
.
length
;
i
<
il
;
i
++
)
{
p
=
points
[
i
];
...
...
src/extras/geometries/TextGeometry.js
浏览文件 @
cac14305
...
...
@@ -666,15 +666,20 @@ THREE.FontUtils = {
var
fontPaths
=
[];
var
path
=
new
THREE
.
Path
();
for
(
i
=
0
;
i
<
length
;
i
++
)
{
var
ret
=
this
.
extractGlyphPoints
(
chars
[
i
],
face
,
scale
,
offset
);
var
ret
=
this
.
extractGlyphPoints
(
chars
[
i
],
face
,
scale
,
offset
,
path
);
offset
+=
ret
.
offset
;
characterPts
.
push
(
ret
.
points
);
allPts
=
allPts
.
concat
(
ret
.
points
);
fontPaths
.
push
(
ret
.
path
);
//
fontPaths.push( ret.path );
}
path
.
debug
(
document
.
getElementById
(
"
boo
"
));
console
.
log
(
path
);
// get the width
...
...
@@ -849,10 +854,10 @@ THREE.FontUtils = {
},
extractGlyphPoints
:
function
(
c
,
face
,
scale
,
offset
)
{
extractGlyphPoints
:
function
(
c
,
face
,
scale
,
offset
,
path
)
{
var
pts
=
[];
var
path
=
new
THREE
.
Path
();
var
i
,
i2
,
...
...
@@ -875,7 +880,7 @@ THREE.FontUtils = {
for
(
i
=
0
;
i
<
length
;
)
{
action
=
outline
[
i
++
];
console
.
log
(
action
);
switch
(
action
)
{
case
'
m
'
:
...
...
@@ -941,7 +946,7 @@ THREE.FontUtils = {
cpx2
=
outline
[
i
++
]
*
scaleX
+
offset
;
cpy2
=
outline
[
i
++
]
*
-
scaleY
;
path
.
quadratic
CurveTo
(
cpx
,
cpy
,
cpx1
,
cpy1
,
cpx2
,
cpy2
);
path
.
bezier
CurveTo
(
cpx
,
cpy
,
cpx1
,
cpy1
,
cpx2
,
cpy2
);
laste
=
pts
[
pts
.
length
-
1
];
...
...
@@ -968,8 +973,7 @@ THREE.FontUtils = {
}
}
path
.
debug
(
document
.
getElementById
(
"
boo
"
));
console
.
log
(
path
);
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.
先完成此消息的编辑!
取消
想要评论请
注册
或
登录