forked from harlyq/aframe-spe-particles-component
-
Notifications
You must be signed in to change notification settings - Fork 2
/
Copy pathindex.html
92 lines (92 loc) · 7.59 KB
/
index.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
<html>
<head>
<script src="https://aframe.io/releases/1.3.0/aframe.min.js"></script>
<script src="https://unpkg.com/aframe-animation-component/dist/aframe-animation-component.min.js"></script>
<script src="https://unpkg.com/aframe-layout-component/dist/aframe-layout-component.min.js"></script>
<!--script src="https://unpkg.com/aframe-spe-particles-component@^1.0.4/dist/aframe-spe-particles-component.min.js"></script-->
<script src="dist/aframe-spe-particles-component.js"></script>
</head>
<body>
<a-scene background="color: black">
<a-assets>
<a-mixin id="label" text="align: center; width: 10" position="0 -1.5 0"></a-mixin>
</a-assets>
<a-entity layout="type: box; columns: 6; margin: 5" position="-10 -5 -20">
<a-entity spe-particles="texture: assets/blob.png; color: blue; velocity: 0 10 0; velocity-spread: 2 0 2; acceleration: 0 -10 0">
<a-text value="fountain" mixin="label"></a-text>
</a-entity>
<a-entity spe-particles="texture: assets/blob.png; color: violet; position-spread: .5; distribution: sphere; radius: 0; size: 8; randomize-position: true; particle-count: 4; max-age: .1">
<a-text value="flutter" mixin="label"></a-text>
</a-entity>
<a-entity spe-particles="texture: assets/blob.png; position-spread: 1 0 0; velocity: 0 0 0; distribution: disc; radius: 2; randomize-position: true">
<a-text value="disc" mixin="label"></a-text>
</a-entity>
<a-entity spe-particles="texture: assets/blob.png; color: blue; position-spread: 2 0 2; radius: 0; randomize-position: true; particle-count: 50; velocity: 0 -10 0; max-age: .25">
<a-text value="rainfall" mixin="label"></a-text>
</a-entity>
<a-entity spe-particles="texture: assets/blob.png; color: #ccc; blending: normal; position-spread: 2 0 2; radius: 0; randomize-position: true; particle-count: 50; velocity: 0 -.5 0; velocity-spread: .1 .2 .1; wiggle-spread: 1 0 1; maxAge: 6; emitter-scale: 100">
<a-text value="snowfall" mixin="label"></a-text>
</a-entity>
<a-entity spe-particles="texture: assets/blob.png; color: yellow, red; distribution: disc; radius: .1; randomize-position: false; particle-count: 100; velocity: 5; velocity-spread: 3; drag: 1; max-age: .5; active-multiplier: 1000; size: 1,.2">
<a-text value="fireworks" mixin="label"></a-text>
</a-entity>
<a-entity spe-particles="texture: assets/blob.png; color: yellow, red; distribution: disc; radius: .1; randomize-position: false; particle-count: 100; velocity: 5; velocity-spread: 3; drag: 1; max-age: .5; active-multiplier: 1000; size: 1,.2; direction: backward">
<a-text value="backwards fireworks" mixin="label"></a-text>
</a-entity>
<a-entity spe-particles="texture: assets/explosion_sheet.png; texture-frames: 5 5; distribution: sphere; radius: .1; particle-count: 20; max-age: 1; size: 16; active-multiplier: .5">
<a-text value="more frames" mixin="label"></a-text>
</a-entity>
<a-entity spe-particles="texture: assets/fog.png; position-spread: 2 0 2; velocity-spread: .1 .05 .1; particle-count: 50; max-age: 10; size: 6,10; opacity: 0,1,0; randomize-position: true">
<a-text value="fog" mixin="label"></a-text>
</a-entity>
<a-entity spe-particles="texture: assets/fog.png; velocity: .2 1 0; velocity-spread: .2 0 .2; particle-count: 50; max-age: 4; size: 3,8; opacity: 0,1,0; color: #aaa,#222">
<a-text value="smoke" mixin="label"></a-text>
</a-entity>
<a-entity spe-particles="texture: assets/fireworks_sheet.png; texture-frames: 5 5; particle-count: 2; max-age: 2; size: 15">
<a-text value="frames" mixin="label"></a-text>
</a-entity>
<a-entity>
<a-entity spe-particles="texture: assets/blob.png; particle-count: 2000; velocity: .3 0 0; max-age: 3; distribution: disc; active-multiplier: 10000; size: .1,.5; radius: .1, color: violet"></a-entity>
<a-text value="active multiplier" mixin="label"></a-text>
</a-entity>
<a-entity spe-particles="texture: assets/blob.png; particle-count: 300; velocity: .5 0 0; max-age: 3; distribution: disc; rotation-axis: 0 0 1; rotation: 120; rotation-spread: 120; radius: .1">
<a-text value="rotating" mixin="label"></a-text>
</a-entity>
<a-entity spe-particles="texture: assets/blob.png; particle-count: 300; max-age: 3; distribution: sphere; color: #888; color-spread: 1 1 1, 0 0 0; size: 0,2,0">
<a-text value="multicolor" mixin="label"></a-text>
</a-entity>
<a-sphere color="#040" segments-width="8" segments-height="8" radius="1" position="0 2 -5">
<a-entity spe-particles="texture: assets/blob.png; color: green; particle-count: 100; maxAge: 1; distribution: sphere; velocity: .5; acceleration: -1; size-spread: 2; randomize-size: true"></a-entity>
<a-text value="green blob" mixin="label"></a-text>
</a-sphere>
<a-entity spe-particles="texture: assets/blob.png; particle-count: 300; maxAge: 1; distribution: disc; acceleration-distribution: box; acceleration: 0 2 0; color: orange">
<a-text value="multiple distribution" mixin="label"></a-text>
</a-entity>
<a-entity spe-particles="texture: assets/blob.png; particle-count: 50; max-age: .5; distribution: sphere; radius: .01; velocity: 1; acceleration: 1">
<a-text value="sparkler" mixin="label"></a-text>
</a-entity>
<a-entity>
<a-box color="brown" scale="0.2 0.2 0.2" position="-1 0 0" animation="property: position; dur: 3000; to: 1 0 0; loop: true; easing: linear; dir: alternate" spe-particles="texture: assets/blob.png; particleCount: 50; maxAge: 1; acceleration: 0 -2 0; relative: world"></a-box>
<a-text value="world relative" mixin="label"></a-text>
</a-entity>
<a-entity spe-particles="texture: assets/blob.png; particle-count: 50; max-age-spread: 5; distribution: sphere; radius: .5; size: 5; color: blue; blending: additive">
<a-plane color="red" position="0 0 -1"></a-plane>
<a-text value="additive blending" mixin="label"></a-text>
</a-entity>
<a-entity
spe-particles__sparks="texture: assets/square.png; color: yellow, red; particle-count: 10; max-age: 0.5; max-age-spread: 0.4; velocity: 0 5 0; velocity-spread: 0 3 0; wiggle: 1 0 1; wiggle-spread: 5 0 5; emitter-scale: 50; size-spread: .5; randomize-velocity: true"
spe-particles__smoke="texture: assets/fog.png; velocity: .4 2 0; velocity-spread: 1.4 0 1.4; particle-count: 50; max-age: 4; size: 8,16; opacity: 0,1,0; color: #666,#222"
spe-particles__fire="texture: assets/explosion_sheet.png; texture-frames: 5 5; velocity: .4 .1 0; acceleration: 0 2 0; acceleration-spread: 0 2 0; velocity-spread: .4 0 .4; particle-count: 15; max-age: 1; size: 4,8; size-spread: 2; opacity: 1,0; wiggle: 0 1 0; blending: additive"
position="0 0 -10">
<a-text value="multiple particles" mixin="label"></a-text>
</a-entity>
<a-entity spe-particles="maxAge: 2; maxAgeSpread: 1; particleCount: 50; opacity: 0,1,1,0; positionSpread: 1 1 1; velocitySpread: .4 .4 .4; randomizePosition: true">
<a-text value="no texture" mixin="label"></a-text>
</a-entity>
<a-entity spe-particles="maxAge: 2; maxAgeSpread: 1; particleCount: 50; opacity: 0,1,1,0; positionSpread: 1 1 1; velocitySpread: .4 .4 .4; hasPerspective: false; randomizePosition: true">
<a-text value="no texture, no perspective" mixin="label"></a-text>
</a-entity>
</a-entity>
</a-scene>
</body>
</html>