-
Notifications
You must be signed in to change notification settings - Fork 0
/
starfield_sample.html
158 lines (108 loc) · 3.93 KB
/
starfield_sample.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
<!DOCTYPE HTML>
<html lang="en">
<head>
<title>three.js particle tutorial</title>
<meta charset="utf-8">
<style type="text/css">
body {
background-color: #000A00;
margin: 0px;
overflow: hidden;
}
</style>
</head>
<body>
<script src="starfield_three.js"></script>
<script>
// the main three.js components
var camera, scene, renderer,
// to keep track of the mouse position
mouseX = 0, mouseY = -99,
// an array to store our particles in
particles = [];
// let's get going!
init();
function init() {
// Camera params :
// field of view, aspect ratio for render output, near and far clipping plane.
camera = new THREE.PerspectiveCamera(80, window.innerWidth / window.innerHeight, 1, 4000 );
// move the camera backwards so we can see stuff!
// default position is 0,0,0.
camera.position.z = 0;
// the scene contains all the 3D object data
scene = new THREE.Scene();
// camera needs to go in the scene
scene.add(camera);
// and the CanvasRenderer figures out what the
// stuff in the scene looks like and draws it!
renderer = new THREE.CanvasRenderer();
renderer.setSize( window.innerWidth, window.innerHeight );
// the renderer's canvas domElement is added to the body
document.body.appendChild( renderer.domElement );
makeParticles();
// add the mouse move listener
document.addEventListener( 'mousemove', onMouseMove, false );
// render 30 times a second (should also look
// at requestAnimationFrame)
setInterval(update,1000/30);
}
// the main update function, called 30 times a second
function update() {
updateParticles();
// and render the scene from the perspective of the camera
renderer.render( scene, camera );
}
// creates a random field of Particle objects
function makeParticles() {
var particle, material;
// we're gonna move from z position -1000 (far away)
// to 1000 (where the camera is) and add a random particle at every pos.
for ( var zpos= -1000; zpos < 1000; zpos+=20 ) {
// we make a particle material and pass through the
// colour and custom particle render function we defined.
material = new THREE.ParticleCanvasMaterial( { color: 0xffffff, program: particleRender } );
// make the particle
particle = new THREE.Particle(material);
// give it a random x and y position between -500 and 500
particle.position.x = Math.random() * 1000 - 500;
particle.position.y = Math.random() * 1000 - 500;
// set its z position
particle.position.z = zpos;
// scale it up a bit
particle.scale.x = particle.scale.y = 10;
// add it to the scene
scene.add( particle );
// and to the array of particles.
particles.push(particle);
}
}
// there isn't a built in circle particle renderer
// so we have to define our own.
function particleRender( context ) {
// we get passed a reference to the canvas context
context.beginPath();
// and we just have to draw our shape at 0,0 - in this
// case an arc from 0 to 2Pi radians or 360º - a full circle!
context.arc( 0, 0, 1, 0, Math.PI * 2, true );
context.fill();
};
// moves all the particles dependent on mouse position
function updateParticles() {
// iterate through every particle
for(var i=0; i<particles.length; i++) {
particle = particles[i];
// and move it forward dependent on the mouseY position.
particle.position.z += mouseY * 0.1;
// if the particle is too close move it to the back
if(particle.position.z>1000) particle.position.z-=2000;
}
}
// called when the mouse moves
function onMouseMove( event ) {
// store the mouseX and mouseY position
mouseX = event.clientX;
mouseY = event.clientY;
}
</script>
</body>
</html>