Add collision to the cubes and rotation to cubes.

src/lib/Box.svelte

@@ -2,12 +2,20 @@
   import * as SC from 'svelte-cubed';
   import * as THREE from 'three';
   import * as PE from 'svelte-cannon';
+  import * as CANNON from 'cannon-es';
 
-  const position = PE.writableVec3(0,5,0);
+  const position = PE.writableVec3(0, 5, 0);
+  let rotation = PE.writableVec3(0, 0, 0);
+  let velocity = new CANNON.Vec3(1, 1, 1);
 </script>
 
-<PE.Body mass={1} bind:position={$position}>
-  <PE.Box size={[1,1,1]} />
+<PE.Body on:collide={(e) => console.log(e)} mass={1} bind:position={$position} bind:rotation={$rotation} {velocity}>
+  <PE.Box size={[0.5,0.5,0.5]} />
 </PE.Body>
 
-<SC.Mesh geometry={new THREE.BoxGeometry()} position={$position.toArray()} />
+<SC.Mesh
+  castShadow
+  rotation={$rotation.toArray()}
+  geometry={new THREE.BoxGeometry()}
+  position={$position.toArray()}
+/>

src/routes/index.svelte

@@ -3,20 +3,29 @@
   import * as THREE from 'three';
   import * as PE from 'svelte-cannon';
   import Box from '$lib/Box.svelte';
+
+  let count = 1;
 </script>
 
+<svelte:window on:click={() => count += 1} />
+
 <PE.World gravity={[0, -9.8 ,0]}>
   <SC.Canvas antialias shadows>
     <PE.Body mass={0} rotation={[-Math.PI / 2, 0, 0]}>
       <PE.Plane />
     </PE.Body>
     <SC.Mesh
+      receiveShadow
       geometry={new THREE.PlaneGeometry(50, 50)}
       rotation={[-Math.PI / 2, 0, 0]}
       material={new THREE.MeshStandardMaterial({ color: "grey"})}
     />
-    <Box />
+    {#each {length: count } as _}
+      <Box />
+    {/each}
+    <SC.DirectionalLight intensity={1} position={[15,15,15]} shadow={{ mapSize: [2048, 2048]}} />
     <SC.AmbientLight intensity={1} />
     <SC.PerspectiveCamera position={[ 2, 2, 15 ]} target={[0,0,0]} />
+    <SC.OrbitControls />
   </SC.Canvas>
 </PE.World>