<!DOCTYPE html>
<html>
<head>
<title>Physics - 05 - Spring</title>
<script src="https://aframe.io/releases/1.0.4/aframe.min.js"></script>
<script src="https://cdn.jsdelivr.net/gh/n5ro/aframe-physics-system@v4.0.1/dist/aframe-physics-system.min.js"></script>
<script src="https://cdn.jsdelivr.net/gh/donmccurdy/aframe-extras@v6.1.1/dist/aframe-extras.min.js"></script>
<script src="../js/livecode.js"></script>
</head>
<body>
<a-scene
physics="debug: false; "
cursor="rayOrigin: mouse"
background="color: lightblue"
>
<a-camera></a-camera>
<a-plane
color="brown"
side="double"
width="15"
height="15"
rotation="-90 0 0"
static-body
></a-plane>
<a-box
static-body
position="0 0.5 -2.5"
width="3"
height="1"
depth="1"
></a-box>
<a-box
static-body
id="anchor"
position="-2 2.5 -2.5"
width="0.1"
height="0.1"
depth="1"
color="gray"
animation__leftright="property:position; from: -2 2.5 -2.5; to: 2 2.5 -2.5; dir: alternate; dur: 10000; loop:true "
></a-box>
<a-box
dynamic-body
position="-2 2 -2.5"
color="red"
width="0.04"
height="0.04"
depth="0.1"
spring="target: #anchor; restLength: 0.5; "
></a-box>
<a-box
dynamic-body
color="green"
position="-1 1.4 -2.1"
width="0.1"
height="0.8"
depth="0.1"
></a-box>
<a-box
dynamic-body
color="green"
position="-0.8 1.4 -2.1"
width="0.1"
height="0.8"
depth="0.1"
></a-box>
<a-box
dynamic-body
color="green"
position="-0.6 1.4 -2.1"
width="0.1"
height="0.8"
depth="0.1"
></a-box>
<a-box
dynamic-body
color="green"
position="-0.4 1.4 -2.1"
width="0.1"
height="0.8"
depth="0.1"
></a-box>
<a-box
dynamic-body
color="green"
position="-0.2 1.4 -2.1"
width="0.1"
height="0.8"
depth="0.1"
></a-box>
<a-box
dynamic-body
color="green"
position="0 1.4 -2.1"
width="0.1"
height="0.8"
depth="0.1"
></a-box>
<a-box
dynamic-body
color="green"
position="0.2 1.4 -2.1"
width="0.1"
height="0.8"
depth="0.1"
></a-box>
<a-box
dynamic-body
color="green"
position="0.4 1.4 -2.1"
width="0.1"
height="0.8"
depth="0.1"
></a-box>
<a-box
dynamic-body
color="green"
position="0.6 1.4 -2.1"
width="0.1"
height="0.8"
depth="0.1"
></a-box>
<a-box
dynamic-body
color="green"
position="0.8 1.4 -2.1"
width="0.1"
height="0.8"
depth="0.1"
></a-box>
<a-box
dynamic-body
color="green"
position="1 1.4 -2.1"
width="0.1"
height="0.8"
depth="0.1"
></a-box>
<a-box
dynamic-body
color="green"
position="-1 1.5 -2.3"
width="0.1"
height="0.8"
depth="0.1"
></a-box>
<a-box
dynamic-body
color="green"
position="-0.8 1.4 -2.3"
width="0.1"
height="0.8"
depth="0.1"
></a-box>
<a-box
dynamic-body
color="green"
position="-0.6 1.4 -2.3"
width="0.1"
height="0.8"
depth="0.1"
></a-box>
<a-box
dynamic-body
color="green"
position="-0.4 1.4 -2.3"
width="0.1"
height="0.8"
depth="0.1"
></a-box>
<a-box
dynamic-body
color="green"
position="-0.2 1.4 -2.3"
width="0.1"
height="0.8"
depth="0.1"
></a-box>
<a-box
dynamic-body
color="green"
position="0 1.4 -2.3"
width="0.1"
height="0.8"
depth="0.1"
></a-box>
<a-box
dynamic-body
color="green"
position="0.2 1.4 -2.3"
width="0.1"
height="0.8"
depth="0.1"
></a-box>
<a-box
dynamic-body
color="green"
position="0.4 1.4 -2.3"
width="0.1"
height="0.8"
depth="0.1"
></a-box>
<a-box
dynamic-body
color="green"
position="0.6 1.4 -2.3"
width="0.1"
height="0.8"
depth="0.1"
></a-box>
<a-box
dynamic-body
color="green"
position="0.8 1.4 -2.3"
width="0.1"
height="0.8"
depth="0.1"
></a-box>
<a-box
dynamic-body
color="green"
position="1 1.4 -2.3"
width="0.1"
height="0.8"
depth="0.1"
></a-box>
<a-box
dynamic-body
color="green"
position="-1 1.5 -2.5"
width="0.1"
height="0.8"
depth="0.1"
></a-box>
<a-box
dynamic-body
color="green"
position="-0.8 1.4 -2.5"
width="0.1"
height="0.8"
depth="0.1"
></a-box>
<a-box
dynamic-body
color="green"
position="-0.6 1.4 -2.5"
width="0.1"
height="0.8"
depth="0.1"
></a-box>
<a-box
dynamic-body
color="green"
position="-0.4 1.4 -2.5"
width="0.1"
height="0.8"
depth="0.1"
></a-box>
<a-box
dynamic-body
color="green"
position="-0.2 1.4 -2.5"
width="0.1"
height="0.8"
depth="0.1"
></a-box>
<a-box
dynamic-body
color="green"
position="0 1.4 -2.5"
width="0.1"
height="0.8"
depth="0.1"
></a-box>
<a-box
dynamic-body
color="green"
position="0.2 1.4 -2.5"
width="0.1"
height="0.8"
depth="0.1"
></a-box>
<a-box
dynamic-body
color="green"
position="0.4 1.4 -2.5"
width="0.1"
height="0.8"
depth="0.1"
></a-box>
<a-box
dynamic-body
color="green"
position="0.6 1.4 -2.5"
width="0.1"
height="0.8"
depth="0.1"
></a-box>
<a-box
dynamic-body
color="green"
position="0.8 1.4 -2.5"
width="0.1"
height="0.8"
depth="0.1"
></a-box>
<a-box
dynamic-body
color="green"
position="1 1.4 -2.5"
width="0.1"
height="0.8"
depth="0.1"
></a-box>
<a-box
dynamic-body
color="green"
position="-1 1.5 -2.7"
width="0.1"
height="0.8"
depth="0.1"
></a-box>
<a-box
dynamic-body
color="green"
position="-0.8 1.4 -2.7"
width="0.1"
height="0.8"
depth="0.1"
></a-box>
<a-box
dynamic-body
color="green"
position="-0.6 1.4 -2.7"
width="0.1"
height="0.8"
depth="0.1"
></a-box>
<a-box
dynamic-body
color="green"
position="-0.4 1.4 -2.7"
width="0.1"
height="0.8"
depth="0.1"
></a-box>
<a-box
dynamic-body
color="green"
position="-0.2 1.4 -2.7"
width="0.1"
height="0.8"
depth="0.1"
></a-box>
<a-box
dynamic-body
color="green"
position="0 1.4 -2.7"
width="0.1"
height="0.8"
depth="0.1"
></a-box>
<a-box
dynamic-body
color="green"
position="0.2 1.4 -2.7"
width="0.1"
height="0.8"
depth="0.1"
></a-box>
<a-box
dynamic-body
color="green"
position="0.4 1.4 -2.7"
width="0.1"
height="0.8"
depth="0.1"
></a-box>
<a-box
dynamic-body
color="green"
position="0.6 1.4 -2.7"
width="0.1"
height="0.8"
depth="0.1"
></a-box>
<a-box
dynamic-body
color="green"
position="0.8 1.4 -2.7"
width="0.1"
height="0.8"
depth="0.1"
></a-box>
<a-box
dynamic-body
color="green"
position="1 1.4 -2.7"
width="0.1"
height="0.8"
depth="0.1"
></a-box>
</a-scene>
</body>
</html>