Skip to content

Commit 18f7859

Browse files
mrdoobmrdoob
committed
Ray now intersects with particles too. (thx @jaycrossler)
1 parent 4f0199f commit 18f7859

File tree

12 files changed

+1007
-632
lines changed

12 files changed

+1007
-632
lines changed

‎build/Three.js

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

‎build/custom/ThreeCanvas.js

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

‎build/custom/ThreeDOM.js

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

‎build/custom/ThreeSVG.js

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

‎build/custom/ThreeWebGL.js

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

‎examples/canvas_interactive_particles.html

Lines changed: 168 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,168 @@
1+
<!DOCTYPE HTML>
2+
<html lang="en">
3+
<head>
4+
<title>three.js canvas - interactive particles</title>
5+
<meta charset="utf-8">
6+
<style type="text/css">
7+
body {
8+
font-family: Monospace;
9+
background-color: #f0f0f0;
10+
margin: 0px;
11+
overflow: hidden;
12+
}
13+
</style>
14+
</head>
15+
<body>
16+
17+
<script type="text/javascript" src="../build/Three.js"></script>
18+
19+
<script type="text/javascript" src="js/RequestAnimationFrame.js"></script>
20+
<script type="text/javascript" src="js/Stats.js"></script>
21+
22+
<script type="text/javascript">
23+
24+
var container, stats;
25+
var camera, scene, projector, renderer;
26+
27+
var PI2 = Math.PI * 2;
28+
29+
var programFill = function ( context ) {
30+
31+
context.beginPath();
32+
context.arc( 0, 0, 1, 0, PI2, true );
33+
context.closePath();
34+
context.fill();
35+
36+
}
37+
38+
var programStroke = function ( context ) {
39+
40+
context.beginPath();
41+
context.arc( 0, 0, 1, 0, PI2, true );
42+
context.closePath();
43+
context.stroke();
44+
45+
}
46+
47+
var mouse = { x: 0, y: 0 }, INTERSECTED;
48+
49+
init();
50+
animate();
51+
52+
function init() {
53+
54+
container = document.createElement( 'div' );
55+
document.body.appendChild( container );
56+
57+
var info = document.createElement( 'div' );
58+
info.style.position = 'absolute';
59+
info.style.top = '10px';
60+
info.style.width = '100%';
61+
info.style.textAlign = 'center';
62+
info.innerHTML = '<a href="http://github.com/mrdoob/three.js" target="_blank">three.js</a> canvas - interactive particles';
63+
container.appendChild( info );
64+
65+
camera = new THREE.Camera( 70, window.innerWidth / window.innerHeight, 1, 10000 );
66+
camera.position.y = 300;
67+
camera.position.z = 500;
68+
69+
scene = new THREE.Scene();
70+
71+
for ( var i = 0; i < 500; i ++ ) {
72+
73+
var particle = new THREE.Particle( new THREE.ParticleCanvasMaterial( { color: Math.random() * 0x808008 + 0x808080, program: programStroke } ) );
74+
particle.position.x = Math.random() * 2000 - 1000;
75+
particle.position.y = Math.random() * 2000 - 1000;
76+
particle.position.z = Math.random() * 2000 - 1000;
77+
particle.scale.x = particle.scale.y = Math.random() * 10 + 10;
78+
scene.addObject( particle );
79+
80+
}
81+
82+
projector = new THREE.Projector();
83+
84+
renderer = new THREE.CanvasRenderer();
85+
renderer.setSize( window.innerWidth, window.innerHeight );
86+
87+
container.appendChild(renderer.domElement);
88+
89+
stats = new Stats();
90+
stats.domElement.style.position = 'absolute';
91+
stats.domElement.style.top = '0px';
92+
container.appendChild( stats.domElement );
93+
94+
document.addEventListener( 'mousemove', onDocumentMouseMove, false );
95+
96+
}
97+
98+
function onDocumentMouseMove( event ) {
99+
100+
event.preventDefault();
101+
102+
mouse.x = ( event.clientX / window.innerWidth ) * 2 - 1;
103+
mouse.y = - ( event.clientY / window.innerHeight ) * 2 + 1;
104+
105+
}
106+
107+
//
108+
109+
function animate() {
110+
111+
requestAnimationFrame( animate );
112+
113+
render();
114+
stats.update();
115+
116+
}
117+
118+
var radius = 600;
119+
var theta = 0;
120+
121+
function render() {
122+
123+
// rotate camera
124+
125+
theta += 0.2;
126+
127+
camera.position.x = radius * Math.sin( theta * Math.PI / 360 );
128+
camera.position.y = radius * Math.sin( theta * Math.PI / 360 );
129+
camera.position.z = radius * Math.cos( theta * Math.PI / 360 );
130+
131+
// find intersections
132+
133+
camera.update();
134+
135+
var vector = new THREE.Vector3( mouse.x, mouse.y, 0.5 );
136+
projector.unprojectVector( vector, camera );
137+
138+
var ray = new THREE.Ray( camera.position, vector.subSelf( camera.position ).normalize() );
139+
140+
var intersects = ray.intersectScene( scene );
141+
142+
if ( intersects.length > 0 ) {
143+
144+
if ( INTERSECTED != intersects[ 0 ].object ) {
145+
146+
if ( INTERSECTED ) INTERSECTED.materials[ 0 ].program = programStroke;
147+
148+
INTERSECTED = intersects[ 0 ].object;
149+
INTERSECTED.materials[ 0 ].program = programFill;
150+
151+
}
152+
153+
} else {
154+
155+
if ( INTERSECTED ) INTERSECTED.materials[ 0 ].program = programStroke;
156+
157+
INTERSECTED = null;
158+
159+
}
160+
161+
renderer.render( scene, camera );
162+
163+
}
164+
165+
</script>
166+
167+
</body>
168+
</html>

‎examples/js/Stats.js

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

‎examples/js/Tween.js

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

0 commit comments

Comments
 (0)