Skip to content

Commit 0f44080

Browse files
mrdoobmrdoob
committed
Examples: Unified CSS.
1 parent 6abf9cc commit 0f44080

File tree

372 files changed

+1506
-8262
lines changed

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

372 files changed

+1506
-8262
lines changed

‎examples/css2d_label.html‎

Lines changed: 3 additions & 24 deletions
Original file line numberDiff line numberDiff line change
@@ -4,39 +4,18 @@
44
<meta charset="utf-8">
55
<meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
66
<title>three.js css2d - label</title>
7+
<link type="text/css" rel="stylesheet" href="main.css">
78
<style>
8-
body {
9-
background-color: #000;
10-
margin: 0;
11-
overflow: hidden;
12-
}
13-
#info {
14-
position: absolute;
15-
top: 0px;
16-
width: 100%;
17-
color: #FFF;
18-
padding: 5px;
19-
font-family: Monospace;
20-
font-size: 13px;
21-
text-align: center;
22-
z-index: 1;
23-
}
24-
25-
.label{
9+
.label {
2610
color: #FFF;
2711
font-family: sans-serif;
2812
padding: 2px;
2913
background: rgba( 0, 0, 0, .6 );
3014
}
31-
32-
a {
33-
color: #000000;
34-
}
35-
3615
</style>
3716
</head>
3817
<body>
39-
<div id="info"><a href="http://threejs.org" target="_blank" rel="noopener">three.js</a> - three.js css2d - label</div>
18+
<div id="info"><a href="http://threejs.org" target="_blank" rel="noopener">three.js</a> css2d - label</div>
4019

4120
<script src="../build/three.js"></script>
4221

‎examples/css3d_molecules.html‎

Lines changed: 21 additions & 45 deletions
Original file line numberDiff line numberDiff line change
@@ -4,71 +4,49 @@
44
<title>three.js css3d - molecules</title>
55
<meta charset="utf-8">
66
<meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
7+
<link type="text/css" rel="stylesheet" href="main.css">
78
<style>
8-
html, body {
9-
height: 100%;
10-
}
11-
129
body {
1310
background-color: #050505;
1411
background: radial-gradient(ellipse at center, rgba(43,45,48,1) 0%,rgba(0,0,0,1) 100%);
15-
16-
margin: 0;
17-
font-family: Arial;
18-
overflow: hidden;
19-
}
20-
21-
a {
22-
color: #ffffff;
2312
}
2413

25-
#info {
14+
#topmenu {
2615
position: absolute;
27-
top: 0px;
16+
top: 50px;
2817
width: 100%;
29-
color: #ffffff;
30-
padding: 5px;
31-
font-family: Monospace;
32-
font-size: 13px;
33-
font-weight: bold;
18+
padding: 10px;
19+
box-sizing: border-box;
3420
text-align: center;
35-
z-index: 1;
3621
}
3722

3823
#menu {
3924
position: absolute;
4025
bottom: 20px;
4126
width: 100%;
27+
padding: 10px;
28+
box-sizing: border-box;
4229
text-align: center;
43-
padding: 0;
44-
margin: 0;
45-
}
46-
47-
#topmenu {
48-
position: absolute;
49-
top: 10px;
50-
right: 10px;
51-
width: 100%;
52-
text-align: right;
53-
padding: 0;
54-
margin: 0;
55-
z-index: 1;
5630
}
5731

5832
button {
5933
color: rgb(255,255,255);
60-
background: transparent;
34+
background: rgb(255,255,255,0.1);
6135
border: 0px;
6236
padding: 5px 10px;
37+
margin: 2px;
38+
font-size: 14px;
6339
cursor: pointer;
6440
}
65-
button:hover {
66-
background-color: rgba(0,255,255,0.5);
67-
}
68-
button:active {
69-
color: #000000;
70-
background-color: rgba(0,255,255,1);
71-
}
41+
42+
button:hover {
43+
background-color: rgba(0,255,255,0.5);
44+
}
45+
46+
button:active {
47+
color: #000000;
48+
background-color: rgba(0,255,255,1);
49+
}
7250

7351
.bond {
7452
width: 5px;
@@ -85,11 +63,9 @@
8563
<script src="js/loaders/PDBLoader.js"></script>
8664

8765
<div id="container"></div>
88-
<div id="info"><a href="http://threejs.org" target="_blank" rel="noopener">three.js css3d</a> - molecules</div>
66+
<div id="info"><a href="http://threejs.org" target="_blank" rel="noopener">three.js</a> css3d - molecules</div>
8967
<div id="topmenu">
90-
<button id="b_a">Atoms</button>
91-
<button id="b_b">Bonds</button>
92-
<button id="b_ab">Atoms + Bonds</button>
68+
<button id="b_a">Atoms</button><button id="b_b">Bonds</button><button id="b_ab">Atoms + Bonds</button>
9369
</div>
9470
<div id="menu"></div>
9571

‎examples/css3d_orthographic.html‎

Lines changed: 6 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -3,32 +3,21 @@
33
<head>
44
<meta charset="utf-8">
55
<meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
6+
<link type="text/css" rel="stylesheet" href="main.css">
67
<style>
78
body {
8-
background-color: #ffffff;
9-
margin: 0;
10-
overflow: hidden;
9+
background-color: #f0f0f0;
1110
}
12-
#info {
13-
position: absolute;
14-
top: 0px;
15-
width: 100%;
16-
color: #000000;
17-
padding: 5px;
18-
font-family: Monospace;
19-
font-size: 13px;
20-
text-align: center;
21-
z-index: 1;
22-
}
23-
2411
a {
12+
color: #f00;
13+
}
14+
#info {
2515
color: #000000;
2616
}
27-
2817
</style>
2918
</head>
3019
<body>
31-
<div id="info"><a href="http://threejs.org" target="_blank" rel="noopener">three.js</a> - css3d orthographic</div>
20+
<div id="info"><a href="http://threejs.org" target="_blank" rel="noopener">three.js</a> css3d - orthographic</div>
3221

3322
<script src="../build/three.js"></script>
3423

‎examples/css3d_panorama.html‎

Lines changed: 1 addition & 24 deletions
Original file line numberDiff line numberDiff line change
@@ -4,30 +4,7 @@
44
<title>three.js css3d - panorama</title>
55
<meta charset="utf-8">
66
<meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
7-
<style>
8-
body {
9-
background-color: #000000;
10-
margin: 0;
11-
cursor: move;
12-
overflow: hidden;
13-
}
14-
15-
a {
16-
color: #ffffff;
17-
}
18-
19-
#info {
20-
position: absolute;
21-
width: 100%;
22-
color: #ffffff;
23-
padding: 5px;
24-
font-family: Monospace;
25-
font-size: 13px;
26-
font-weight: bold;
27-
text-align: center;
28-
z-index: 1;
29-
}
30-
</style>
7+
<link type="text/css" rel="stylesheet" href="main.css">
318
</head>
329
<body>
3310
<script src="../build/three.js"></script>

‎examples/css3d_panorama_deviceorientation.html‎

Lines changed: 2 additions & 25 deletions
Original file line numberDiff line numberDiff line change
@@ -4,37 +4,14 @@
44
<title>three.js css3d - panorama - device orientation</title>
55
<meta charset="utf-8">
66
<meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
7-
<style>
8-
body {
9-
background-color: #000000;
10-
margin: 0;
11-
cursor: move;
12-
overflow: hidden;
13-
}
14-
15-
a {
16-
color: #ffffff;
17-
}
18-
19-
#info {
20-
position: absolute;
21-
width: 100%;
22-
color: #ffffff;
23-
padding: 5px;
24-
font-family: Monospace;
25-
font-size: 13px;
26-
font-weight: bold;
27-
text-align: center;
28-
z-index: 1;
29-
}
30-
</style>
7+
<link type="text/css" rel="stylesheet" href="main.css">
318
</head>
329
<body>
3310
<script src="../build/three.js"></script>
3411
<script src="js/controls/DeviceOrientationControls.js"></script>
3512
<script src="js/renderers/CSS3DRenderer.js"></script>
3613

37-
<div id="info"><a href="http://threejs.org" target="_blank" rel="noopener">three.js css3d</a> - panorama - device orientation. cubemap by <a href="http://www.humus.name/index.php?page=Textures" target="_blank" rel="noopener">Humus</a>.</div>
14+
<div id="info"><a href="http://threejs.org" target="_blank" rel="noopener">three.js</a> css3d - panorama - device orientation.<br/>cubemap by <a href="http://www.humus.name/index.php?page=Textures" target="_blank" rel="noopener">Humus</a>.</div>
3815

3916
<script>
4017

‎examples/css3d_periodictable.html‎

Lines changed: 7 additions & 26 deletions
Original file line numberDiff line numberDiff line change
@@ -4,32 +4,10 @@
44
<title>three.js css3d - periodic table</title>
55
<meta charset="utf-8">
66
<meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
7+
<link type="text/css" rel="stylesheet" href="main.css">
78
<style>
8-
html, body {
9-
height: 100%;
10-
}
11-
12-
body {
13-
background-color: #000000;
14-
margin: 0;
15-
font-family: Helvetica, sans-serif;;
16-
overflow: hidden;
17-
}
18-
199
a {
20-
color: #ffffff;
21-
}
22-
23-
#info {
24-
position: absolute;
25-
width: 100%;
26-
color: #ffffff;
27-
padding: 5px;
28-
font-family: Monospace;
29-
font-size: 13px;
30-
font-weight: bold;
31-
text-align: center;
32-
z-index: 1;
10+
color: #8ff;
3311
}
3412

3513
#menu {
@@ -44,7 +22,9 @@
4422
height: 160px;
4523
box-shadow: 0px 0px 12px rgba(0,255,255,0.5);
4624
border: 1px solid rgba(127,255,255,0.25);
25+
font-family: Helvetica, sans-serif;
4726
text-align: center;
27+
line-height: normal;
4828
cursor: default;
4929
}
5030

@@ -89,9 +69,11 @@
8969
padding: 5px 10px;
9070
cursor: pointer;
9171
}
72+
9273
button:hover {
9374
background-color: rgba(0,255,255,0.5);
9475
}
76+
9577
button:active {
9678
color: #000000;
9779
background-color: rgba(0,255,255,0.75);
@@ -104,7 +86,7 @@
10486
<script src="js/controls/TrackballControls.js"></script>
10587
<script src="js/renderers/CSS3DRenderer.js"></script>
10688

107-
<div id="info"><a href="http://threejs.org" target="_blank" rel="noopener">three.js css3d</a> - periodic table. <a href="https://plus.google.com/113862800338869870683/posts/QcFk5HrWran" target="_blank" rel="noopener">info</a>.</div>
89+
<div id="info"><a href="http://threejs.org" target="_blank" rel="noopener">three.js</a> css3d - periodic table. <a href="https://plus.google.com/113862800338869870683/posts/QcFk5HrWran" target="_blank" rel="noopener">info</a>.</div>
10890
<div id="container"></div>
10991
<div id="menu">
11092
<button id="table">TABLE</button>
@@ -360,7 +342,6 @@
360342
//
361343

362344
controls = new THREE.TrackballControls( camera, renderer.domElement );
363-
controls.rotateSpeed = 0.5;
364345
controls.minDistance = 500;
365346
controls.maxDistance = 6000;
366347
controls.addEventListener( 'change', render );

‎examples/css3d_sandbox.html‎

Lines changed: 4 additions & 20 deletions
Original file line numberDiff line numberDiff line change
@@ -3,37 +3,21 @@
33
<head>
44
<meta charset="utf-8">
55
<meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
6+
<link type="text/css" rel="stylesheet" href="main.css">
67
<style>
78
body {
8-
background-color: #ffffff;
9-
margin: 0;
10-
overflow: hidden;
9+
color: #000;
1110
}
12-
#info {
13-
position: absolute;
14-
top: 0px;
15-
width: 100%;
16-
color: #000000;
17-
padding: 5px;
18-
font-family: Monospace;
19-
font-size: 13px;
20-
text-align: center;
21-
z-index: 1;
22-
}
23-
2411
a {
25-
color: #000000;
12+
color: #080;
2613
}
27-
2814
</style>
2915
</head>
3016
<body>
31-
<div id="info"><a href="http://threejs.org" target="_blank" rel="noopener">three.js</a> - css3d sandbox</div>
17+
<div id="info"><a href="http://threejs.org" target="_blank" rel="noopener">three.js</a> css3d - sandbox</div>
3218

3319
<script src="../build/three.js"></script>
34-
3520
<script src="js/controls/TrackballControls.js"></script>
36-
3721
<script src="js/renderers/CSS3DRenderer.js"></script>
3822

3923
<script>

0 commit comments

Comments
 (0)