GitBucket
Newer
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Spheres & Fog</title>
<meta name="description" content="Spheres & Fog - A-Frame">
<script src="../../../dist/aframe-master.js"></script>
</head>
<body>
<a-scene background="color: #AAB" fog="type: linear; color: #AAB; far: 30; near: 0">
<a-assets>
<img id="highlight1" src="../../assets/img/radial-highlight.png">
<img id="shadow3" src="../../assets/img/radial-shadow-3.png">
</a-assets>
<a-entity position="0 0 -10">
<!-- Ground Highlight -->
<a-image position="0 -.2 5" src="#highlight1" rotation="-90 0 0"
scale="30 30 30"></a-image>
<!-- Orange -->
<a-entity position="0 0 -5">
<a-sphere position="0 4.2 0" radius="4.2" color="#F16745"
roughness="0.8" width-segments="52" height-segments="52"></a-sphere>
<a-image src="#shadow3" rotation="-90 0 0" scale="3 3 3"></a-image>
</a-entity>
<!-- Green -->
<a-entity position="-3 0 0">
<a-sphere position="0 1.75 0" radius="1.75" color="#7BC8A4"
roughness="0.2"></a-sphere>
<a-image src="#shadow3" rotation="-90 0 0" scale="1.75 1.75 1.75"></a-image>
</a-entity>
<!-- Blue -->
<a-entity position="1 0 0">
<a-sphere position="0 1 0" radius="1" color="#4CC3D9" metalness="0.1"></a-sphere>
<a-image src="#shadow3" rotation="-90 0 0" scale="1 1 1"></a-image>
</a-entity>
<!-- Yellow -->
<a-entity position="3 0 1">
<a-sphere position="0 0.5 0" radius="0.5" color="#FFC65D"></a-sphere>
<a-image src="#shadow3" rotation="-90 0 0" scale="0.5 0.5 0.5"></a-image>
</a-entity>
<!-- Purple -->
<a-entity position="20 0 -2">
<a-sphere position="0 10 0" radius="10" color="#93648D"
segments-width="52" segments-height="52"></a-sphere>
<a-image src="#shadow3" rotation="-90 0 0" scale="9 9 9"></a-image>
</a-entity>
<!-- Yellow -->
<a-entity position="-24 0 -34">
<a-sphere position="0 18 0" radius="18" color="#FFC65D"></a-sphere>
<a-image src="#shadow3" rotation="-90 0 0" scale="8 8 8"></a-image>
</a-entity>
<!-- Green -->
<a-entity position="25 0 20">
<a-sphere position="0 12 0" radius="12" color="#7BC8A4"></a-sphere>
<a-image src="#shadow3" rotation="-90 0 0" scale="8 8 8"></a-image>
</a-entity>
<!-- White -->
<a-entity position="-15 0 5">
<a-sphere position="0 3 0" radius="3" color="#ECECEC"></a-sphere>
<a-image src="#shadow3" rotation="-90 0 0" scale="3 3 3"></a-image>
</a-entity>
<!-- Orange -->
<a-entity position="-6 0 6">
<a-sphere position="0 1 0" radius="1" color="#F16745" roughness="0.8"></a-sphere>
<a-image src="#shadow3" rotation="-90 0 0" scale="1 1 1"></a-image>
</a-entity>
<!-- Yellow -->
<a-entity position="-20 0 30">
<a-sphere position="0 30 0" radius="30" color="#FFC65D" roughness="0.6"></a-sphere>
<a-image src="#shadow3" rotation="-90 0 0" scale="15 15 15"></a-image>
</a-entity>
<!-- Blue -->
<a-entity position="-1 0 14">
<a-sphere position="0 2 0" radius="2" color="#4CC3D9"></a-sphere>
<a-image src="#shadow3" rotation="-90 0 0" scale="2 2 2"></a-image>
</a-entity>
<!-- Orange -->
<a-entity position="10 0 15">
<a-sphere position="0 4 0" radius="4" color="#F16745" roughness="1"></a-sphere>
<a-image src="#shadow3" rotation="-90 0 0" scale="2 2 2"></a-image>
</a-entity>
<!-- Blue -->
<a-entity position="6 0 4">
<a-sphere position="0 1.5 0" radius="1.5" color="#4CC3D9" metalness="0.1"></a-sphere>
<a-image src="#shadow3" rotation="-90 0 0" scale="1.5 1.5 1.5"></a-image>
</a-entity>
<!-- Yellow -->
<a-entity position="5 0 14">
<a-sphere position="0 .6 0" radius=".6" color="#FFC65D"></a-sphere>
<a-image src="#shadow3" rotation="-90 0 0" scale="0.6 0.6 0.6"></a-image>
</a-entity>
<!-- Purple -->
<a-entity position="5 0 25">
<a-sphere position="0 2 0" radius="2" color="#93648D"></a-sphere>
<a-image src="#shadow3" rotation="-90 0 0" scale="2 2 2"></a-image>
</a-entity>
<!-- White -->
<a-entity position="2 0 15">
<a-sphere position="0 0.2 0" radius="0.2" color="#ECECEC"></a-sphere>
<a-image src="#shadow3" rotation="-90 0 0" scale="0.2 0.2 0.2"
opacity="0.5"></a-image>
</a-entity>
<!-- Purple -->
<a-entity position="4 0 10">
<a-sphere position="0 0.15 0" radius="0.15" color="#93648D"></a-sphere>
<a-image src="#shadow3" rotation="-90 0 0" scale="0.25 0.25 0.25"
opacity="0.6"></a-image>
</a-entity>
<!-- Blue -->
<a-entity position="4 0 11">
<a-sphere position="0 0.1 0" radius="0.1" color="#4CC3D9"></a-sphere>
<a-image src="#shadow3" rotation="-90 0 0" scale="0.15 0.15 0.15"
opacity="0.6"></a-image>
</a-entity>
<!-- Green -->
<a-entity position="5 0 11">
<a-sphere position="0 0.3 0" radius="0.3" color="#7BC8A4"></a-sphere>
<a-image src="#shadow3" rotation="-90 0 0" scale="0.25 0.25 0.25"
opacity="0.6"></a-image>
</a-entity>
</a-entity>
</a-scene>
</body>
</html>