Skip to content

Commit c2740e1

Browse files
sharpxiajunsharpxiajun
committed
code commit
1 parent 9f913b1 commit c2740e1

File tree

6 files changed

+474
-155
lines changed

6 files changed

+474
-155
lines changed

‎.idea/workspace.xml‎

Lines changed: 187 additions & 152 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎css/main.css‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
body {
2+
/* set margin to 0 and overflow to hidden, to go fullscreen */
3+
margin: 0;
4+
overflow: hidden;
5+
}

‎demo01.html‎

Lines changed: 98 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -2,9 +2,104 @@
22
<html lang="en">
33
<head>
44
<meta charset="UTF-8">
5-
<title>Title</title>
5+
<title>demo01</title>
6+
<link rel="stylesheet" type="text/css" href="./css/main.css"/>
7+
<script type="text/javascript" src="./js/libs/three.js"></script>
8+
<script type="text/javascript" src="./js/libs/stats.js"></script>
9+
<script type="text/javascript" src="./js/initStats.js"></script>
10+
<script type="text/javascript" src="./js/reload.js"></script>
611
</head>
712
<body>
8-
13+
<div id="Stats-output"></div>
14+
<div id="WebGL-output"></div>
915
</body>
10-
</html>
16+
</html>
17+
<script>
18+
window.onload = init
19+
20+
function init() {
21+
var renderScene = function() {
22+
stats.update();
23+
// rotate the cube around its axes
24+
cube.rotation.x += 0.02;
25+
cube.rotation.y += 0.02;
26+
cube.rotation.z += 0.02;
27+
// bounce the sphere up and down
28+
step += 0.04;
29+
sphere.position.x = 20 + ( 10 * (Math.cos(step)));
30+
sphere.position.y = 2 + ( 10 * Math.abs(Math.sin(step)));
31+
// render using requestAnimationFrame
32+
requestAnimationFrame(renderScene);
33+
renderer.render(scene, camera);
34+
}
35+
36+
var stats = initStats();
37+
38+
var scene = new THREE.Scene();
39+
var step = 0;
40+
var camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 0.1, 1000);
41+
var renderer = new THREE.WebGLRenderer();
42+
43+
renderer.setClearColor(new THREE.Color(0xEEEEEE, 1.0));
44+
renderer.setSize(window.innerWidth, window.innerHeight);
45+
renderer.shadowMapEnabled = true;
46+
47+
var planeGeometry = new THREE.PlaneGeometry(60, 20, 1, 1);
48+
var planeMaterial = new THREE.MeshLambertMaterial({color: 0xffffff});
49+
var plane = new THREE.Mesh(planeGeometry, planeMaterial);
50+
plane.receiveShadow = true;
51+
52+
plane.rotation.x = -0.5 * Math.PI;
53+
plane.position.x = 15;
54+
plane.position.y = 0;
55+
plane.position.z = 0;
56+
57+
scene.add(plane);
58+
59+
// create a cube
60+
var cubeGeometry = new THREE.BoxGeometry(4, 4, 4);
61+
var cubeMaterial = new THREE.MeshLambertMaterial({color: 0xff0000});
62+
var cube = new THREE.Mesh(cubeGeometry, cubeMaterial);
63+
cube.castShadow = true;
64+
65+
// position the cube
66+
cube.position.x = -4;
67+
cube.position.y = 3;
68+
cube.position.z = 0;
69+
70+
// add the cube to the scene
71+
scene.add(cube);
72+
73+
var sphereGeometry = new THREE.SphereGeometry(4, 20, 20);
74+
var sphereMaterial = new THREE.MeshLambertMaterial({color: 0x7777ff});
75+
var sphere = new THREE.Mesh(sphereGeometry, sphereMaterial);
76+
77+
// position the sphere
78+
sphere.position.x = 20;
79+
sphere.position.y = 0;
80+
sphere.position.z = 2;
81+
sphere.castShadow = true;
82+
83+
// add the sphere to the scene
84+
scene.add(sphere);
85+
86+
camera.position.x = -30;
87+
camera.position.y = 40;
88+
camera.position.z = 30;
89+
camera.lookAt(scene.position);
90+
91+
var ambientLight = new THREE.AmbientLight(0x0c0c0c);
92+
scene.add(ambientLight);
93+
94+
var spotLight = new THREE.SpotLight(0xffffff);
95+
spotLight.position.set(-40, 60, -10);
96+
spotLight.castShadow = true;
97+
scene.add(spotLight);
98+
99+
document.getElementById("WebGL-output").appendChild(renderer.domElement);
100+
101+
renderScene();
102+
}
103+
104+
105+
</script>

‎js/initStats.js‎

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,10 @@
1+
var initStats = function() {
2+
var stats = new Stats();
3+
stats.setMode(0); // 0: fps, 1: ms
4+
// Align top-left
5+
stats.domElement.style.position = 'absolute';
6+
stats.domElement.style.left = '0px';
7+
stats.domElement.style.top = '0px';
8+
document.getElementById("Stats-output").appendChild(stats.domElement);
9+
return stats;
10+
}

‎js/reload.js‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
window.onresize = function(){
2+
window.location.reload()
3+
}

‎line-demo.html‎

Lines changed: 171 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,171 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8">
5+
<title>line demo</title>
6+
<link rel="stylesheet" type="text/css" href="./css/main.css"/>
7+
<script type="text/javascript" src="./js/libs/three.js"></script>
8+
<script type="text/javascript" src="./js/libs/stats.js"></script>
9+
<script type="text/javascript" src="./js/initStats.js"></script>
10+
<script type="text/javascript" src="./js/reload.js"></script>
11+
</head>
12+
<body onload="init()">
13+
<div id="Stats-output"></div>
14+
<div id="WebGL-output"></div>
15+
</body>
16+
</html>
17+
<script>
18+
function init(){
19+
var stats = initStats();
20+
21+
var scene = new THREE.Scene();
22+
var camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 0.1, 1000);
23+
var renderer = new THREE.WebGLRenderer();
24+
25+
renderer.setClearColor(new THREE.Color(0x000000, 1.0));
26+
renderer.setSize(window.innerWidth, window.innerHeight);
27+
renderer.shadowMapEnabled = true;
28+
29+
camera.position.x = -30;
30+
camera.position.y = 40;
31+
camera.position.z = 30;
32+
camera.lookAt(scene.position);
33+
34+
var ambientLight = new THREE.AmbientLight(0x0c0c0c);
35+
scene.add(ambientLight);
36+
37+
var spotLight = new THREE.SpotLight(0xffffff);
38+
spotLight.position.set(-40, 60, -10);
39+
spotLight.castShadow = true;
40+
scene.add(spotLight);
41+
42+
var points = gosper(4, 60);
43+
44+
var lines = new THREE.Geometry();
45+
var colors = [];
46+
var i = 0;
47+
points.forEach(function (e) {
48+
lines.vertices.push(new THREE.Vector3(e.x, e.z, e.y));
49+
colors[i] = new THREE.Color(0xffffff);
50+
colors[i].setHSL(e.x / 100 + 0.5, ( e.y * 20 ) / 300, 0.8);
51+
i++;
52+
});
53+
54+
lines.colors = colors;
55+
var material = new THREE.LineBasicMaterial({
56+
opacity: 1.0,
57+
linewidth: 1,
58+
vertexColors: THREE.VertexColors
59+
});
60+
61+
var line = new THREE.Line(lines, material);
62+
line.position.set(25, -30, -60);
63+
scene.add(line);
64+
65+
document.getElementById("WebGL-output").appendChild(renderer.domElement);
66+
67+
var step = 0;
68+
render();
69+
70+
function render() {
71+
stats.update();
72+
line.rotation.z = step += 0.01;
73+
requestAnimationFrame(render);
74+
renderer.render(scene, camera);
75+
}
76+
}
77+
78+
function gosper(a, b) {
79+
var turtle = [0, 0, 0];
80+
var points = [];
81+
var count = 0;
82+
rg(a, b, turtle);
83+
return points;
84+
85+
function rt(x) {
86+
turtle[2] += x;
87+
}
88+
89+
function lt(x) {
90+
turtle[2] -= x;
91+
}
92+
93+
function fd(dist) {
94+
points.push({x: turtle[0], y: turtle[1], z: Math.sin(count) * 5});
95+
var dir = turtle[2] * (Math.PI / 180);
96+
turtle[0] += Math.cos(dir) * dist;
97+
turtle[1] += Math.sin(dir) * dist;
98+
points.push({x: turtle[0], y: turtle[1], z: Math.sin(count) * 5});
99+
}
100+
101+
function rg(st, ln, turtle) {
102+
st--;
103+
ln = ln / 2.6457;
104+
if (st > 0) {
105+
rg(st, ln, turtle);
106+
rt(60);
107+
gl(st, ln, turtle);
108+
rt(120);
109+
gl(st, ln, turtle);
110+
lt(60);
111+
rg(st, ln, turtle);
112+
lt(120);
113+
rg(st, ln, turtle);
114+
rg(st, ln, turtle);
115+
lt(60);
116+
gl(st, ln, turtle);
117+
rt(60);
118+
}
119+
if (st == 0) {
120+
fd(ln);
121+
rt(60);
122+
fd(ln);
123+
rt(120);
124+
fd(ln);
125+
lt(60);
126+
fd(ln);
127+
lt(120);
128+
fd(ln);
129+
fd(ln);
130+
lt(60);
131+
fd(ln);
132+
rt(60)
133+
}
134+
}
135+
136+
function gl(st, ln, turtle) {
137+
st--;
138+
ln = ln / 2.6457;
139+
if (st > 0) {
140+
lt(60);
141+
rg(st, ln, turtle);
142+
rt(60);
143+
gl(st, ln, turtle);
144+
gl(st, ln, turtle);
145+
rt(120);
146+
gl(st, ln, turtle);
147+
rt(60);
148+
rg(st, ln, turtle);
149+
lt(120);
150+
rg(st, ln, turtle);
151+
lt(60);
152+
gl(st, ln, turtle);
153+
}
154+
if (st == 0) {
155+
lt(60);
156+
fd(ln);
157+
rt(60);
158+
fd(ln);
159+
fd(ln);
160+
rt(120);
161+
fd(ln);
162+
rt(60);
163+
fd(ln);
164+
lt(120);
165+
fd(ln);
166+
lt(60);
167+
fd(ln);
168+
}
169+
}
170+
}
171+
</script>

0 commit comments

Comments
 (0)