<script src="https://aframe.io/releases/0.5.0/aframe.min.js"></script>
<a-scene shadows="true">
<a-sky color="#333"></a-sky>
<a-light type="ambient" color="#445451" intensity="0.5"></a-light>
<!-- <a-entity id="light" position="0 1.6 -9"
light="castShadow: true; type: point;"
geometry="primitive: sphere; radius: 0.2"></a-entity>
-->
<a-entity id="light" position="0 1.6 -9">
<a-sphere radius="0.2" color="yellow"></a-sphere>
<a-sound></a-sound>
<a-light type="point" intensity="2" penumbra="0.5" distance="5" decay="2" color="#ff844e">
<a-animation begin="flash" attribute="intensity" delay="30" from="0" to="1" dur="50" repeat="4" fill="backwards"></a-animation>
</a-light>
</a-entity>
<a-box position="-1 0.5 -8" rotation="0 0 0" color="#aaa" shadow="cast: true; recieve: true"></a-box>
<a-box position="1 0.5 -8" rotation="0 0 0" color="#aaa" shadow="cast: true; recieve: true"></a-box>
<a-plane id="terrain" position="0 0 -4" rotation="-90 0 0" width="14" height="14" color="#7BC8A4" roughness="1" shadow="cast: true; recieve: true"></a-plane>
<a-plane id="terrain2" position="0 0 -11" rotation="0 0 0" width="14" height="14" color="#333" roughness="1" shadow="cast: true; recieve: true"></a-plane>
<!-- <a-plane id="terrain3" position="0 -5 -5" rotation="0 0 0" width="14" height="14" color="#000" roughness="1" shadow="cast: true; recieve: true"></a-plane>
</a-scene> -->
var lightDOM = document.querySelector('#light a-light')
var light = lightDOM.getObject3D('light');
var terrain = document.querySelector('#terrain').getObject3D('mesh');
var gui1 = new dat.GUI();
gui1.add(light, 'distance', 0, 30);
gui1.add(light, 'intensity', 0, 3);
var gui2 = new dat.GUI();
gui2.add(terrain.material, 'roughness', 0, 1);
gui2.add(window, 'flashLight')
function flashLight() {
lightDOM.emit('flash');
}
External CSS
This Pen doesn't use any external CSS resources.