-
Notifications
You must be signed in to change notification settings - Fork 5
/
Copy pathindex.html
43 lines (40 loc) · 2.86 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
<html>
<head>
<script src="https://aframe.io/releases/1.3.0/aframe.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/aframe-environment-component.min.js"></script>
<script src="./build/aframe-surface-scatter.js"></script>
<script src="./demo_assets/wavy-shader.js"></script>
<meta name="title" content="Aframe Surface Scatter Example">
<meta name="og:title" content="Aframe Surface Scatter Example">
<meta name="description" content="This component uses instancing to cover one object in another.">
<meta name="keywords" content="AFrame">
<meta name="robots" content="index, follow">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:site" content="@AdaRoseCannon">
<meta name="twitter:image" content="https://user-images.githubusercontent.com/4225330/176483332-1135d75d-d1fe-4e30-87ce-5852e2ce5c34.png">
</head>
<body>
<a-scene
reflection="directionalLight:#dirlight;"
renderer="alpha:true;physicallyCorrectLights:true;colorManagement:true;exposure:1;toneMapping:ACESFilmic;"
>
<a-assets>
<a-asset-item id="grass" src="./demo_assets/grass_big.glb"></a-asset-item>
<a-asset-item id="tree-glb" src="./demo_assets/tree.glb"></a-asset-item>
</a-assets>
<a-camera wasd-controls="acceleration:10;"></a-camera>
<a-entity hide-on-enter-ar position="0 -0.2 0" environment="preset:forest;skyType:atmosphere;"></a-entity>
<!-- <a-cylinder radius="0.02" height="0.04" color="red"></a-cylinder> -->
<!-- <a-sphere radius="0.5" position="0 1 -2" material="shader:flat;color:#30266b;" surface-scatter="object:#decoration;count:800;"></a-sphere> -->
<a-sphere radius="0.4" data-radius="0.4" position="0 0.5 -1" opacity="1" animation="dur: 3000; property: object3D.position.x; from: -1; to: 1; loop: true; dir: alternate; easing: easeInOutQuad;" class="pushgrass"></a-sphere>
<a-circle radius="12" rotation="-90 0 0" material="shader:flat;color:#30266b;" surface-scatter__tree="object:#tree;count:15;scale:1 1 1;scaleJitter:0.3 0.3 0.3;rotationJitter:1 360 1;uniformJitter:false;" surface-scatter__grass="object:#decoration;count:3200;scale:3 3 3;scaleJitter:1 1 1;uniformJitter:true;"></a-circle>
<a-gltf-model id="decoration" wavy-shader=".pushgrass" src="#grass" visible="false"></a-gltf-model>
<a-gltf-model id="tree" src="#tree-glb" visible="false"></a-gltf-model>
</a-scene>
<img src="demo_assets/240px-GitHub_forkme_ribbon_right_green.svg.png" style="position: absolute; inset: 0 0 auto auto; user-select: none;" alt="Ribbon Saying Fork me on github" usemap="#image-map">
<map name="image-map">
<area target="" alt="Fork me on Github" title="Fork me on Github" href="https://github.com/AdaRoseCannon/aframe-surface-scatter/" coords="21,4,234,207,237,151,86,-1" shape="poly">
</map>
</body>
</html>