<!DOCTYPE html>
<html>
<head>
<title>Physics - 01</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"
background="color: lightblue"
>
<a-assets>
<a-asset-item
id="table-model"
src="https://raw.githubusercontent.com/jorgecardoso/aframe-usj-models/master/wood_table/scene.gltf"
></a-asset-item>
</a-assets>
<a-entity position="0 0 -7">
<a-plane
static-body
width="20"
height="20"
rotation="-90 0 0"
color="brown"
></a-plane>
<a-box
static-body
width="20"
height="2.5"
depth="0.1"
position="0 1.25 -10"
color="white"
></a-box>
<a-box
static-body
width="20"
height="2.5"
depth="0.1"
position="10 1.25 0"
rotation="0 -90 0"
color="white"
></a-box>
<a-box
static-body
width="20"
height="2.5"
depth="0.1"
position="0 1.25 10"
color="white"
></a-box>
<a-box
static-body
width="20"
height="2.5"
depth="0.1"
position="-10 1.25 0"
rotation="0 90 0"
color="white"
></a-box>
<a-box
static-body
width="15"
height="2.5"
depth="0.1"
position="0 1.25 -2"
color="white"
></a-box>
<a-box
static-body
width="5"
height="2.5"
depth="0.1"
position="0 1.25 -7.5"
rotation="0 -90 0"
color="white"
></a-box>
<a-plane
static-body
position="0 2.5 0"
width="20"
height="20"
rotation="90 0 0"
color="lightgray"
></a-plane>
<a-box static-body width="2" color="red" position="0 0.5 2"></a-box>
<a-gltf-model
static-body
position="3.2 0.45 2"
scale="0.07 0.07 0.07"
src="#table-model"
></a-gltf-model>
</a-entity>
<a-entity
id="player"
kinematic-body="radius: 0.5"
movement-controls
look-controls
>
<a-entity
id="camera"
camera
position="0 1.6 0"
rotation="0 0 0"
></a-entity>
</a-entity>
</a-scene>
</body>
</html>