Skip to content
体验新版
项目
组织
正在加载...
登录
切换导航
打开侧边栏
车家大少爷
three.js
提交
cf04c59e
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,发现更多精彩内容 >>
提交
cf04c59e
编写于
12月 12, 2014
作者:
M
Mr.doob
浏览文件
操作
浏览文件
下载
电子邮件补丁
差异文件
Examples: Mobile friendly.
上级
059fa94d
变更
2
隐藏空白更改
内联
并排
Showing
2 changed file
with
182 addition
and
80 deletion
+182
-80
docs/index.html
docs/index.html
+61
-54
examples/index.html
examples/index.html
+121
-26
未找到文件。
docs/index.html
浏览文件 @
cf04c59e
...
...
@@ -2,9 +2,10 @@
<html
lang=
"en"
>
<head>
<meta
charset=
"utf-8"
>
<title>
three.js
-
documentation
</title>
<title>
three.js
/
documentation
</title>
<meta
name=
"viewport"
content=
"width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0"
>
<style>
@font-face
{
font-family
:
'inconsolata'
;
src
:
url('files/inconsolata.woff')
format
(
'woff'
);
...
...
@@ -12,7 +13,9 @@
font-style
:
normal
;
}
*
{
box-sizing
:
border-box
;}
*
{
box-sizing
:
border-box
;
}
html
{
height
:
100%
;
...
...
@@ -20,8 +23,7 @@
body
{
background-color
:
#ffffff
;
margin
:
0
;
padding
:
0
0
0
260px
;
margin
:
0px
;
height
:
100%
;
color
:
#555
;
font-family
:
'inconsolata'
;
...
...
@@ -35,7 +37,7 @@
text-decoration
:
none
;
}
#panel
{
#panel
{
position
:
fixed
;
left
:
0px
;
width
:
260px
;
...
...
@@ -77,8 +79,10 @@
}
#viewer
{
position
:
absolute
;
border
:
0px
;
width
:
100%
;
left
:
260px
;
width
:
calc
(
100%
-
260px
);
height
:
100%
;
overflow
:
auto
;
}
...
...
@@ -90,6 +94,7 @@
.filterBlock
p
{
margin
:
0
;
}
#filterInput
{
width
:
100%
;
padding
:
5px
;
...
...
@@ -98,11 +103,13 @@
outline
:
none
;
border
:
1px
solid
#dedede
;
}
#filterInput
:focus
{
border
:
1px
solid
#2194CE
;
}
#clearFilterButton
{
position
:
absolute
;
position
:
absolute
;
right
:
6px
;
top
:
50%
;
margin-top
:
-8px
;
...
...
@@ -115,39 +122,47 @@
padding-top
:
7px
;
opacity
:
.5
;
}
#clearFilterButton
:hover
{
#clearFilterButton
:hover
{
opacity
:
1
;
}
.filtered
{
.filtered
{
display
:
none
;
}
#panel
li
b
{
#panel
li
b
{
font-weight
:
bold
;
}
#expandButton
{
/* mobile */
#expandButton
{
display
:
none
;
position
:
absolute
;
right
:
20px
;
top
:
12px
;
width
:
32px
;
height
:
32px
;
background-color
:
#2194CE
;
}
#expandButton
span
{
height
:
3px
;
background-color
:
white
;
width
:
16px
;
position
:
absolute
;
left
:
8px
;
top
:
8px
;
}
#expandButton
span
:nth-child
(
1
)
{
top
:
14px
;
}
#expandButton
span
:nth-child
(
2
)
{
top
:
20px
;
width
:
12px
;
}
#expandButton
span
{
height
:
2px
;
background-color
:
#2194CE
;
width
:
16px
;
position
:
absolute
;
left
:
8px
;
top
:
10px
;
}
#expandButton
span
:nth-child
(
1
)
{
top
:
16px
;
}
#expandButton
span
:nth-child
(
2
)
{
top
:
22px
;
}
@media
all
and
(
max-width
:
640px
)
{
#panel
{
position
:
absolute
;
...
...
@@ -160,18 +175,24 @@
overflow
:
hidden
;
border-bottom
:
1px
solid
#dedede
;
}
#panel
h1
{
margin-top
:
20px
;
margin-bottom
:
20px
;
}
#content
{
overflow
:
auto
;
position
:
absolute
;
left
:
0
;
top
:
12
0px
;
top
:
9
0px
;
right
:
0
;
bottom
:
0
;
}
#viewer
{
position
:
absolute
;
left
:
0
;
top
:
48px
;
top
:
56px
;
width
:
100%
;
height
:
calc
(
100%
-
56px
);
}
#expandButton
{
display
:
block
;
...
...
@@ -179,13 +200,6 @@
#panel
.collapsed
{
height
:
56px
;
}
#panel
h1
{
margin-top
:
20px
;
margin-bottom
:
20px
;
}
#content
{
top
:
90px
;
}
}
</style>
</head>
...
...
@@ -205,16 +219,17 @@
</script>
<div
id=
"panel"
class=
"collapsed"
>
<h1><a
href=
"http://threejs.org"
>
three.js
</a>
/ docs
</h1>
<a
id=
"expandButton"
href=
"#"
>
<span></span><span></span><span></span>
<span></span>
<span></span>
<span></span>
</a>
<h1><a
href=
"http://threejs.org"
>
three.js
</a>
/ docs
</h1>
<div
class=
"filterBlock"
>
<input
type=
"text"
id=
"filterInput"
placeholder=
"Type to filter"
/>
<a
href=
"#"
id=
"clearFilterButton"
>
x
</a>
</div>
<div
id=
"content"
>
</div>
<div
id=
"content"
></div>
</div>
<iframe
id=
"viewer"
></iframe>
...
...
@@ -223,23 +238,15 @@
var
panel
=
document
.
getElementById
(
'
panel
'
);
var
viewer
=
document
.
getElementById
(
'
viewer
'
);
var
clearFilterButton
=
document
.
getElementById
(
'
clearFilterButton
'
);
var
filterInput
=
document
.
getElementById
(
'
filterInput
'
);
//filterInput.focus();
panel
.
addEventListener
(
'
click
'
,
function
(
e
)
{
//filterInput.focus();
e
.
preventDefault
();
}
);
document
.
getElementById
(
'
expandButton
'
).
addEventListener
(
'
click
'
,
function
(
e
)
{
var
expandButton
=
document
.
getElementById
(
'
expandButton
'
);
expandButton
.
addEventListener
(
'
click
'
,
function
(
event
)
{
panel
.
classList
.
toggle
(
'
collapsed
'
);
if
(
!
panel
.
classList
.
contains
(
'
collapsed
'
)
)
{
//filterInput.focus();
}
e
.
preventDefault
();
event
.
preventDefault
();
}
);
var
filterInput
=
document
.
getElementById
(
'
filterInput
'
);
var
clearFilterButton
=
document
.
getElementById
(
'
clearFilterButton
'
);
var
DELIMITER
=
'
/
'
;
var
MEMBER_DELIMITER
=
'
.
'
;
var
nameCategoryMap
=
{};
...
...
examples/index.html
浏览文件 @
cf04c59e
<!DOCTYPE html>
<html
lang=
"en"
>
<head>
<title>
three.js - examples
</title>
<meta
charset=
"utf-8"
>
<title>
three.js / examples
</title>
<meta
name=
"viewport"
content=
"width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0"
>
<style>
@font-face
{
...
...
@@ -12,11 +13,22 @@
font-style
:
normal
;
}
*
{
box-sizing
:
border-box
;
}
html
{
height
:
100%
;
}
body
{
background-color
:
#ffffff
;
margin
:
0px
;
height
:
100%
;
color
:
#555
;
font-family
:
'inconsolata'
;
font-size
:
15px
;
line-height
:
18px
;
overflow
:
hidden
;
}
...
...
@@ -25,51 +37,54 @@
text-decoration
:
none
;
}
h1
{
margin-top
:
30px
;
margin-bottom
:
40px
;
font-size
:
25px
;
font-weight
:
normal
;
}
h2
{
font-size
:
20px
;
font-weight
:
normal
;
}
#panel
{
position
:
absolute
;
position
:
fixed
;
left
:
0px
;
width
:
310px
;
height
:
100%
;
overflow
:
scroll
;
overflow
:
auto
;
background
:
#fafafa
;
}
#panel
#list
{
#panel
h1
{
margin-top
:
30px
;
margin-bottom
:
40px
;
margin-left
:
20px
;
font-size
:
25px
;
font-weight
:
normal
;
}
#panel
h2
{
font-size
:
20px
;
font-weight
:
normal
;
}
#panel
#content
{
padding
:
0px
20px
;
line-height
:
18px
;
}
#panel
#
lis
t
.link
{
#panel
#
conten
t
.link
{
color
:
#2194CE
;
text-decoration
:
none
;
cursor
:
pointer
;
}
#panel
#
lis
t
.selected
{
#panel
#
conten
t
.selected
{
color
:
#ff0000
;
}
#panel
#
lis
t
.link
:hover
{
#panel
#
conten
t
.link
:hover
{
text-decoration
:
underline
;
}
#viewer
{
position
:
absolute
;
border
:
0px
;
left
:
310px
;
width
:
calc
(
100%
-
310px
);
height
:
100%
;
border
:
0px
;
overflow
:
auto
;
}
#button
{
...
...
@@ -87,6 +102,73 @@
opacity
:
1
;
}
/* mobile */
#expandButton
{
display
:
none
;
position
:
absolute
;
right
:
20px
;
top
:
12px
;
width
:
32px
;
height
:
32px
;
}
#expandButton
span
{
height
:
2px
;
background-color
:
#2194CE
;
width
:
16px
;
position
:
absolute
;
left
:
8px
;
top
:
10px
;
}
#expandButton
span
:nth-child
(
1
)
{
top
:
16px
;
}
#expandButton
span
:nth-child
(
2
)
{
top
:
22px
;
}
@media
all
and
(
max-width
:
640px
)
{
#panel
{
position
:
absolute
;
left
:
0
;
top
:
0
;
height
:
480px
;
width
:
100%
;
right
:
0
;
z-index
:
100
;
overflow
:
hidden
;
border-bottom
:
1px
solid
#dedede
;
}
#panel
h1
{
margin-top
:
20px
;
margin-bottom
:
20px
;
}
#content
{
overflow
:
auto
;
position
:
absolute
;
left
:
0
;
top
:
60px
;
right
:
0
;
bottom
:
0
;
}
#viewer
{
position
:
absolute
;
left
:
0
;
top
:
56px
;
width
:
100%
;
height
:
calc
(
100%
-
56px
);
}
#expandButton
{
display
:
block
;
}
#panel
.collapsed
{
height
:
56px
;
}
}
</style>
</head>
<body>
...
...
@@ -104,10 +186,14 @@
</script>
<div
id=
"panel"
>
<div
id=
"list"
>
<h1><a
href=
"http://threejs.org"
>
three.js
</a>
/ examples
</h1>
</div>
<div
id=
"panel"
class=
"collapsed"
>
<h1><a
href=
"http://threejs.org"
>
three.js
</a>
/ examples
</h1>
<a
id=
"expandButton"
href=
"#"
>
<span></span>
<span></span>
<span></span>
</a>
<div
id=
"content"
></div>
</div>
<iframe
id=
"viewer"
allowfullscreen
></iframe>
...
...
@@ -373,9 +459,17 @@
//
var
list
=
document
.
getElementById
(
'
lis
t
'
);
var
content
=
document
.
getElementById
(
'
conten
t
'
);
var
viewer
=
document
.
getElementById
(
'
viewer
'
);
var
expandButton
=
document
.
getElementById
(
'
expandButton
'
);
expandButton
.
addEventListener
(
'
click
'
,
function
(
event
)
{
panel
.
classList
.
toggle
(
'
collapsed
'
);
event
.
preventDefault
();
}
);
// iOS8 workaround
if
(
/
(
iPad|iPhone|iPod
)
/g
.
test
(
navigator
.
userAgent
)
)
{
viewer
.
addEventListener
(
'
load
'
,
function
(
event
)
{
...
...
@@ -388,7 +482,7 @@
}
var
container
=
document
.
createElement
(
'
div
'
);
lis
t
.
appendChild
(
container
);
conten
t
.
appendChild
(
container
);
var
button
=
document
.
createElement
(
'
div
'
);
button
.
id
=
'
button
'
;
...
...
@@ -428,6 +522,7 @@
div
.
textContent
=
name
;
div
.
addEventListener
(
'
click
'
,
function
()
{
panel
.
classList
.
toggle
(
'
collapsed
'
);
load
(
file
);
}
);
...
...
编辑
预览
Markdown
is supported
0%
请重试
或
添加新附件
.
添加附件
取消
You are about to add
0
people
to the discussion. Proceed with caution.
先完成此消息的编辑!
取消
想要评论请
注册
或
登录