Skip to content
体验新版
项目
组织
正在加载...
登录
切换导航
打开侧边栏
车家大少爷
three.js
提交
1c401f72
T
three.js
项目概览
车家大少爷
/
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,发现更多精彩内容 >>
提交
1c401f72
编写于
8月 10, 2015
作者:
M
Mr.doob
浏览文件
操作
浏览文件
下载
差异文件
Merge pull request #6953 from neko1235/ellipse-rotation
Add rotation to EllipseCurve and Path.
上级
e38a65e3
7d31bc71
变更
4
隐藏空白更改
内联
并排
Showing
4 changed file
with
48 addition
and
15 deletion
+48
-15
docs/api/extras/core/Path.html
docs/api/extras/core/Path.html
+4
-2
docs/api/extras/curves/EllipseCurve.html
docs/api/extras/curves/EllipseCurve.html
+6
-3
src/extras/core/Path.js
src/extras/core/Path.js
+22
-5
src/extras/curves/EllipseCurve.js
src/extras/curves/EllipseCurve.js
+16
-5
未找到文件。
docs/api/extras/core/Path.html
浏览文件 @
1c401f72
...
...
@@ -81,7 +81,7 @@
</div>
<div>
Draw an arc absolutely positioned
</div>
<h3>
[method:null ellipse]( [page:Float x], [page:Float y], [page:Float xRadius], [page:Float yRadius], [page:Float startAngle], [page:Float endAngle], [page:Float clockwise] )
</h3>
<h3>
[method:null ellipse]( [page:Float x], [page:Float y], [page:Float xRadius], [page:Float yRadius], [page:Float startAngle], [page:Float endAngle], [page:Float clockwise]
, [page:Float rotation]
)
</h3>
<div>
x, y -- The center of the ellipse offset from the last call
xRadius -- The radius of the ellipse in the x axis
...
...
@@ -89,10 +89,11 @@
startAngle -- The start angle in radians
endAngle -- The end angle in radians
clockwise -- Sweep the ellipse clockwise. Defaults to false
rotation -- The rotation angle of the ellipse in radians, counterclockwise from the positive X axis. Optional, defaults to 0
</div>
<div>
Draw an ellipse offset from the last call
</div>
<h3>
[method:null absellipse]( [page:Float x], [page:Float y], [page:Float xRadius], [page:Float yRadius], [page:Float startAngle], [page:Float endAngle], [page:Float clockwise] )
</h3>
<h3>
[method:null absellipse]( [page:Float x], [page:Float y], [page:Float xRadius], [page:Float yRadius], [page:Float startAngle], [page:Float endAngle], [page:Float clockwise]
, [page:Float rotation]
)
</h3>
<div>
x, y -- The absolute center of the ellipse
xRadius -- The radius of the ellipse in the x axis
...
...
@@ -100,6 +101,7 @@
startAngle -- The start angle in radians
endAngle -- The end angle in radians
clockwise -- Sweep the ellipse clockwise. Defaults to false
rotation -- The rotation angle of the ellipse in radians, counterclockwise from the positive X axis. Optional, defaults to 0
</div>
<div>
Draw an ellipse absolutely positioned
</div>
...
...
docs/api/extras/curves/EllipseCurve.html
浏览文件 @
1c401f72
...
...
@@ -21,7 +21,8 @@ var curve = new THREE.EllipseCurve(
0, 0, // ax, aY
10, 10, // xRadius, yRadius
0, 2 * Math.PI, // aStartAngle, aEndAngle
false // aClockwise
false, // aClockwise
0 // aRotation
);
var path = new THREE.Path( curve.getPoints( 50 ) );
...
...
@@ -35,7 +36,7 @@ var ellipse = new THREE.Line( geometry, material );
<h2>
Constructor
</h2>
<h3>
[name]( [page:Float aX], [page:Float aY], [page:Float xRadius], [page:Float yRadius], [page:Radians aStartAngle], [page:Radians aEndAngle], [page:Boolean aClockwise] )
</h3>
<h3>
[name]( [page:Float aX], [page:Float aY], [page:Float xRadius], [page:Float yRadius], [page:Radians aStartAngle], [page:Radians aEndAngle], [page:Boolean aClockwise]
, [page:Radians aRotation]
)
</h3>
<div>
aX – The X center of the ellipse
<br/>
aY – The Y center of the ellipse
<br/>
...
...
@@ -43,7 +44,8 @@ var ellipse = new THREE.Line( geometry, material );
yRadius – The radius of the ellipse in the y direction
<br/>
aStartAngle – The start angle of the curve in radians starting from the middle right side
<br/>
aEndAngle – The end angle of the curve in radians starting from the middle right side
<br/>
aClockwise – Whether the ellipse is clockwise
<br/><br/>
aClockwise – Whether the ellipse is clockwise
<br/>
aRotation – The rotation angle of the ellipse in radians, counterclockwise from the positive X axis (optional)
<br/><br/>
<strong>
Note:
</strong>
When going clockwise it's best to set the start angle to (Math.PI * 2) and then work towards lower numbers.
</div>
...
...
@@ -58,6 +60,7 @@ var ellipse = new THREE.Line( geometry, material );
<h3>
[property:Float aStartAngle]
</h3>
<h3>
[property:Float aEndAngle]
</h3>
<h3>
[property:Boolean aClockwise]
</h3>
<h3>
[property:Float aRotation]
</h3>
<h2>
Methods
</h2>
...
...
src/extras/core/Path.js
浏览文件 @
1c401f72
...
...
@@ -153,24 +153,24 @@ THREE.Path.prototype.arc = function ( aX, aY, aRadius,
};
THREE
.
Path
.
prototype
.
ellipse
=
function
(
aX
,
aY
,
xRadius
,
yRadius
,
aStartAngle
,
aEndAngle
,
aClockwise
)
{
aStartAngle
,
aEndAngle
,
aClockwise
,
aRotation
)
{
var
lastargs
=
this
.
actions
[
this
.
actions
.
length
-
1
].
args
;
var
x0
=
lastargs
[
lastargs
.
length
-
2
];
var
y0
=
lastargs
[
lastargs
.
length
-
1
];
this
.
absellipse
(
aX
+
x0
,
aY
+
y0
,
xRadius
,
yRadius
,
aStartAngle
,
aEndAngle
,
aClockwise
);
aStartAngle
,
aEndAngle
,
aClockwise
,
aRotation
);
};
THREE
.
Path
.
prototype
.
absellipse
=
function
(
aX
,
aY
,
xRadius
,
yRadius
,
aStartAngle
,
aEndAngle
,
aClockwise
)
{
aStartAngle
,
aEndAngle
,
aClockwise
,
aRotation
)
{
var
args
=
Array
.
prototype
.
slice
.
call
(
arguments
);
var
curve
=
new
THREE
.
EllipseCurve
(
aX
,
aY
,
xRadius
,
yRadius
,
aStartAngle
,
aEndAngle
,
aClockwise
);
aStartAngle
,
aEndAngle
,
aClockwise
,
aRotation
);
this
.
curves
.
push
(
curve
);
var
lastPoint
=
curve
.
getPoint
(
1
);
...
...
@@ -386,13 +386,22 @@ THREE.Path.prototype.getPoints = function( divisions, closedPath ) {
xRadius
=
args
[
2
],
yRadius
=
args
[
3
],
aStartAngle
=
args
[
4
],
aEndAngle
=
args
[
5
],
aClockwise
=
!!
args
[
6
];
aClockwise
=
!!
args
[
6
],
aRotation
=
args
[
7
]
||
0
;
var
deltaAngle
=
aEndAngle
-
aStartAngle
;
var
angle
;
var
tdivisions
=
divisions
*
2
;
var
cos
,
sin
;
if
(
aRotation
!==
0
)
{
cos
=
Math
.
cos
(
aRotation
);
sin
=
Math
.
sin
(
aRotation
);
}
for
(
j
=
1
;
j
<=
tdivisions
;
j
++
)
{
t
=
j
/
tdivisions
;
...
...
@@ -408,6 +417,14 @@ THREE.Path.prototype.getPoints = function( divisions, closedPath ) {
tx
=
aX
+
xRadius
*
Math
.
cos
(
angle
);
ty
=
aY
+
yRadius
*
Math
.
sin
(
angle
);
if
(
aRotation
!==
0
)
{
// Rotate the point about the center of the ellipse.
tx
=
(
tx
-
aX
)
*
cos
-
(
ty
-
aY
)
*
sin
+
aX
;
ty
=
(
tx
-
aX
)
*
sin
+
(
ty
-
aY
)
*
cos
+
aY
;
}
//console.log('t', t, 'angle', angle, 'tx', tx, 'ty', ty);
points
.
push
(
new
THREE
.
Vector2
(
tx
,
ty
)
);
...
...
src/extras/curves/EllipseCurve.js
浏览文件 @
1c401f72
...
...
@@ -2,7 +2,7 @@
* Ellipse curve
**************************************************************/
THREE
.
EllipseCurve
=
function
(
aX
,
aY
,
xRadius
,
yRadius
,
aStartAngle
,
aEndAngle
,
aClockwise
)
{
THREE
.
EllipseCurve
=
function
(
aX
,
aY
,
xRadius
,
yRadius
,
aStartAngle
,
aEndAngle
,
aClockwise
,
aRotation
)
{
this
.
aX
=
aX
;
this
.
aY
=
aY
;
...
...
@@ -14,6 +14,8 @@ THREE.EllipseCurve = function ( aX, aY, xRadius, yRadius, aStartAngle, aEndAngle
this
.
aEndAngle
=
aEndAngle
;
this
.
aClockwise
=
aClockwise
;
this
.
aRotation
=
aRotation
||
0
;
};
...
...
@@ -39,11 +41,20 @@ THREE.EllipseCurve.prototype.getPoint = function ( t ) {
}
var
vector
=
new
THREE
.
Vector2
();
var
x
=
this
.
aX
+
this
.
xRadius
*
Math
.
cos
(
angle
);
var
y
=
this
.
aY
+
this
.
yRadius
*
Math
.
sin
(
angle
);
if
(
this
.
aRotation
!==
0
)
{
var
cos
=
Math
.
cos
(
this
.
aRotation
);
var
sin
=
Math
.
sin
(
this
.
aRotation
);
vector
.
x
=
this
.
aX
+
this
.
xRadius
*
Math
.
cos
(
angle
);
vector
.
y
=
this
.
aY
+
this
.
yRadius
*
Math
.
sin
(
angle
);
// Rotate the point about the center of the ellipse.
x
=
(
x
-
this
.
aX
)
*
cos
-
(
y
-
this
.
aY
)
*
sin
+
this
.
aX
;
y
=
(
x
-
this
.
aX
)
*
sin
+
(
y
-
this
.
aY
)
*
cos
+
this
.
aY
;
}
return
vector
;
return
new
THREE
.
Vector2
(
x
,
y
)
;
};
编辑
预览
Markdown
is supported
0%
请重试
或
添加新附件
.
添加附件
取消
You are about to add
0
people
to the discussion. Proceed with caution.
先完成此消息的编辑!
取消
想要评论请
注册
或
登录