Skip to content

Commit ad0e31b

Browse files
peteroupcpeteroupc
committed
add tris.html
1 parent 71e67fc commit ad0e31b

File tree

2 files changed

+116
-0
lines changed

2 files changed

+116
-0
lines changed

‎README.md‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -40,6 +40,7 @@ using evaluators to generate parametric surfaces.
4040
* [stl.html](https://peteroupc.github.io/html3dutil/stl.html) - Demonstrates loading 3D models.
4141
* [textured.html](https://peteroupc.github.io/html3dutil/textured.html) - Demonstrates loading textures
4242
and applying them to 3D shapes.
43+
* [tris.html](https://peteroupc.github.io/html3dutil/tris.html) - Demonstrates a particle system.
4344

4445
Examples
4546
---------

‎tris.html‎

Lines changed: 115 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,115 @@
1+
<meta charset=utf-8>
2+
<head>
3+
<script type="text/javascript" src="glutil_min.js"></script>
4+
</head>
5+
<body>
6+
<canvas width="600" height="450" id=canvas></canvas>
7+
<script id="demo">
8+
//<!--
9+
/*
10+
Written by Peter O. in 2015.
11+
12+
Any copyright is dedicated to the Public Domain.
13+
http://creativecommons.org/publicdomain/zero/1.0/
14+
If you like this, you should donate to Peter O.
15+
at: http://upokecenter.dreamhosters.com/articles/donate-now-2/
16+
*/
17+
18+
function TriangleParticles(scene,count){
19+
this.tris=[];
20+
this.group=new ShapeGroup();
21+
this.width=scene.getWidth();
22+
this.scene=scene;
23+
this.height=scene.getHeight();
24+
for(var i=0;i<count;i++){
25+
var tri=TriangleParticles.generateTri(this.width,this.height)
26+
this.tris.push(tri);
27+
this.group.addShape(
28+
TriangleParticles.makeShapeFromTri(tri,scene));
29+
}
30+
this.scene.addShape(this.group);
31+
}
32+
TriangleParticles.prototype.update=function(){
33+
for(var i=0;i<this.tris.length;i++){
34+
this.tris[i].life--;
35+
if(this.tris[i].life<=0){
36+
var tri=TriangleParticles.generateTri(this.width,this.height)
37+
this.tris[i]=tri;
38+
this.group.shapes[i]=
39+
TriangleParticles.makeShapeFromTri(tri,this.scene);
40+
} else {
41+
var trans=this.group.shapes[i].getTransform()
42+
trans.movePosition(this.tris[i].movement)
43+
trans.multOrientation(this.tris[i].rotation,0,0,1)
44+
}
45+
}
46+
}
47+
TriangleParticles.makeShapeFromTri=function(tri,shape){
48+
var sh=scene.makeShape(new Mesh()
49+
.mode(Mesh.TRIANGLES)
50+
.color3(tri.color)
51+
.vertex3(tri.position[0],tri.position[1],tri.position[2])
52+
.vertex3(tri.position[3],tri.position[4],tri.position[5])
53+
.vertex3(tri.position[6],tri.position[7],tri.position[8])
54+
);
55+
sh.getTransform().setPosition(
56+
tri.center[0],tri.center[1],tri.center[2]
57+
)
58+
return sh;
59+
}
60+
61+
TriangleParticles.generateTri=function(width,height){
62+
var xpos=(Math.random()*(width+10))-5;
63+
var ypos=(Math.random()*(height+10))-5;
64+
var maxw=100
65+
var maxh=100
66+
var pos=[
67+
(Math.random()*maxw)-(maxw/2),
68+
(Math.random()*maxh)-(maxh/2),
69+
0,
70+
(Math.random()*maxw)-(maxw/2),
71+
(Math.random()*maxh)-(maxh/2),
72+
0,
73+
(Math.random()*maxw)-(maxw/2),
74+
(Math.random()*maxh)-(maxh/2),
75+
0]
76+
var dx=(Math.random()*10)-5;
77+
var dy=(Math.random()*10)-5;
78+
var rotation=Math.floor(Math.random()*10)-5;
79+
var life=Math.floor(Math.random()*200);
80+
var r=Math.random();
81+
var g=Math.random();
82+
var b=Math.random();
83+
return {
84+
"center":[xpos,ypos,0],
85+
"position":pos,
86+
"rotation":rotation,
87+
"movement":[dx,dy,0],
88+
"color":[r,g,b],
89+
"life":life}
90+
}
91+
92+
// Create the 3D scene; find the HTML canvas and pass it
93+
// to Scene3D.
94+
var scene=new Scene3D(document.getElementById("canvas"));
95+
scene.disableLighting()
96+
// Set the perspective view. Camera has a 45-degree field of view
97+
// and will see objects from 0.1 to 100 units away.
98+
scene.setOrtho(0,scene.getWidth(),scene.getHeight(),0,-2,2);
99+
var tris=new TriangleParticles(scene,200);
100+
// Set up the render loop
101+
GLUtil.renderLoop(function(){
102+
tris.update();
103+
// Render the scene
104+
scene.render();
105+
});
106+
//-->
107+
</script>
108+
<script>
109+
window.addEventListener("load",function(){
110+
var e=document.createElement("pre")
111+
e.innerHTML=document.getElementById("demo").textContent.replace(/</g,"&lt;")
112+
document.body.appendChild(e)
113+
})
114+
</script>
115+
</body>

0 commit comments

Comments
 (0)