Skip to content
体验新版
项目
组织
正在加载...
登录
切换导航
打开侧边栏
车家大少爷
three.js
提交
ebf56e99
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,发现更多精彩内容 >>
提交
ebf56e99
编写于
2月 27, 2017
作者:
M
Mugen87
浏览文件
操作
浏览文件
下载
电子邮件补丁
差异文件
Spline Editor: Fixed #10891
上级
bb01f24d
变更
1
显示空白变更内容
内联
并排
Showing
1 changed file
with
47 addition
and
34 deletion
+47
-34
examples/webgl_geometry_spline_editor.html
examples/webgl_geometry_spline_editor.html
+47
-34
未找到文件。
examples/webgl_geometry_spline_editor.html
浏览文件 @
ebf56e99
...
...
@@ -11,10 +11,23 @@
margin
:
0px
;
overflow
:
hidden
;
}
#info
{
position
:
absolute
;
top
:
0px
;
width
:
100%
;
padding
:
5px
;
font-family
:
Monospace
;
font-size
:
13px
;
text-align
:
center
;
}
</style>
</head>
<body>
<div
id=
"container"
></div>
<div
id=
"info"
><a
href=
"https://threejs.org"
target=
"_blank"
>
three.js
</a>
- geometry - catmull spline editor
</div>
<script
src=
"../build/three.js"
></script>
<script
src=
"js/controls/DragControls.js"
></script>
...
...
@@ -22,6 +35,7 @@
<script
src=
"js/controls/TransformControls.js"
></script>
<script
src=
"js/libs/stats.min.js"
></script>
<script
src=
"js/libs/dat.gui.min.js"
></script>
<script>
...
...
@@ -39,8 +53,7 @@
var
container
,
stats
;
var
camera
,
scene
,
renderer
;
var
splineHelperObjects
=
[],
splineOutline
;
var
splineHelperObjects
=
[],
splineOutline
;
var
splinePointsLength
=
4
;
var
positions
=
[];
var
options
;
...
...
@@ -50,8 +63,16 @@
var
ARC_SEGMENTS
=
200
;
var
splineMesh
;
var
splines
=
{
var
splines
=
{
};
var
params
=
{
uniform
:
true
,
tension
:
0.5
,
centripetal
:
true
,
chordal
:
true
,
addPoint
:
addPoint
,
removePoint
:
removePoint
,
exportSpline
:
exportSpline
};
init
();
...
...
@@ -59,11 +80,11 @@
function
init
()
{
container
=
document
.
createElement
(
'
div
'
);
document
.
body
.
appendChild
(
container
);
container
=
document
.
getElementById
(
'
container
'
);
scene
=
new
THREE
.
Scene
();
camera
=
new
THREE
.
PerspectiveCamera
(
70
,
window
.
innerWidth
/
window
.
innerHeight
,
1
,
10000
);
camera
.
position
.
z
=
1000
;
camera
.
position
.
set
(
0
,
250
,
1000
)
;
scene
.
add
(
camera
);
scene
.
add
(
new
THREE
.
AmbientLight
(
0xf0f0f0
)
);
...
...
@@ -106,31 +127,23 @@
renderer
.
shadowMap
.
enabled
=
true
;
container
.
appendChild
(
renderer
.
domElement
);
var
info
=
document
.
createElement
(
'
div
'
);
info
.
style
.
position
=
'
absolute
'
;
info
.
style
.
top
=
'
10px
'
;
info
.
style
.
width
=
'
100%
'
;
info
.
style
.
textAlign
=
'
center
'
;
info
.
innerHTML
=
'
catmull-rom rom spline comparisions
'
;
options
=
document
.
createElement
(
'
div
'
);
options
.
style
.
position
=
'
absolute
'
;
options
.
style
.
top
=
'
30px
'
;
options
.
style
.
width
=
'
100%
'
;
options
.
style
.
textAlign
=
'
center
'
;
options
.
innerHTML
=
'
Points: <input type="button" onclick="addPoint();" value="+" />
\
<input type="button" onclick="removePoint();" value="-" />
\
<input type="button" onclick="exportSpline();" value="Export" /><br />
\
<input type="checkbox" id="uniform" checked /> <label for="uniform">Uniform Catmull-rom</label> <input type="range" id="tension" onchange="splines.uniform.tension = tension.value;updateSplineOutline();" min=0 max=1 step=0.01 value=0.5 /> <span id="tension_value" /></span> <br />
\
<input type="checkbox" id="centripetal" checked /> Centripetal Catmull-rom<br />
\
<input type="checkbox" id="chordal" checked /> Chordal Catmull-rom<br />
'
;
container
.
appendChild
(
info
);
container
.
appendChild
(
options
);
stats
=
new
Stats
();
container
.
appendChild
(
stats
.
dom
);
var
gui
=
new
dat
.
GUI
();
gui
.
add
(
params
,
'
uniform
'
);
gui
.
add
(
params
,
'
tension
'
,
0
,
1
).
step
(
0.01
).
onChange
(
function
(
value
)
{
splines
.
uniform
.
tension
=
value
;
updateSplineOutline
();
});
gui
.
add
(
params
,
'
centripetal
'
);
gui
.
add
(
params
,
'
chordal
'
);
gui
.
add
(
params
,
'
addPoint
'
);
gui
.
add
(
params
,
'
removePoint
'
);
gui
.
add
(
params
,
'
exportSpline
'
);
gui
.
open
();
// Controls
controls
=
new
THREE
.
OrbitControls
(
camera
,
renderer
.
domElement
);
controls
.
damping
=
0.2
;
...
...
@@ -377,6 +390,7 @@
strplace
.
push
(
'
new THREE.Vector3({0}, {1}, {2})
'
.
format
(
p
.
x
,
p
.
y
,
p
.
z
)
)
}
console
.
log
(
strplace
.
join
(
'
,
\n
'
)
);
var
code
=
'
[
'
+
(
strplace
.
join
(
'
,
\n\t
'
)
)
+
'
]
'
;
prompt
(
'
copy and paste code
'
,
code
);
...
...
@@ -412,16 +426,15 @@
requestAnimationFrame
(
animate
);
render
();
stats
.
update
();
controls
.
update
();
transformControl
.
update
();
}
function
render
()
{
splines
.
uniform
.
mesh
.
visible
=
uniform
.
checked
;
splines
.
centripetal
.
mesh
.
visible
=
centripetal
.
checked
;
splines
.
chordal
.
mesh
.
visible
=
chordal
.
checked
;
splines
.
uniform
.
mesh
.
visible
=
params
.
uniform
;
splines
.
centripetal
.
mesh
.
visible
=
params
.
centripetal
;
splines
.
chordal
.
mesh
.
visible
=
params
.
chordal
;
renderer
.
render
(
scene
,
camera
);
}
...
...
编辑
预览
Markdown
is supported
0%
请重试
或
添加新附件
.
添加附件
取消
You are about to add
0
people
to the discussion. Proceed with caution.
先完成此消息的编辑!
取消
想要评论请
注册
或
登录