Added a cube with gravity and a plane to land on.

package.json

@@ -31,6 +31,8 @@
   "type": "module",
   "dependencies": {
     "@compai/font-mako": "^0.0.2",
+    "cannon-es": "^0.19.0",
+    "svelte-cannon": "^0.8.0",
     "svelte-cubed": "^0.2.1",
     "three": "^0.138.3"
   }

pnpm-lock.yaml

@@ -6,12 +6,14 @@ specifiers:
   '@sveltejs/kit': next
   '@typescript-eslint/eslint-plugin': ^5.10.1
   '@typescript-eslint/parser': ^5.10.1
+  cannon-es: ^0.19.0
   eslint: ^7.32.0
   eslint-config-prettier: ^8.3.0
   eslint-plugin-svelte3: ^3.2.1
   prettier: ^2.5.1
   prettier-plugin-svelte: ^2.5.0
   svelte: ^3.44.0
+  svelte-cannon: ^0.8.0
   svelte-check: ^2.2.6
   svelte-cubed: ^0.2.1
   svelte-preprocess: ^4.10.1
@@ -21,6 +23,8 @@ specifiers:
 
 dependencies:
   '@compai/font-mako': 0.0.2
+  cannon-es: 0.19.0
+  svelte-cannon: 0.8.0_cannon-es@0.19.0
   svelte-cubed: 0.2.1
   three: 0.138.3
 
@@ -468,6 +472,10 @@ packages:
     engines: {node: '>=6'}
     dev: true
 
+  /cannon-es/0.19.0:
+    resolution: {integrity: sha512-fu9UXrjFmAQXq3JyBVPbtyc53suX+QHzikZEJykxroVNnIx1xHq0jZenK8qwhdwbBAtDL9n/47TyPELuSQwZuA==}
+    dev: false
+
   /chalk/2.4.2:
     resolution: {integrity: sha512-Mti+f9lpJNcwF4tWV8/OrTTtF1gZi+f8FqlyAdouralcFWFQWF2+NgCHShjkCb+IFBLq9buZwE1xckQU4peSuQ==}
     engines: {node: '>=4'}
@@ -1599,6 +1607,14 @@ packages:
     engines: {node: '>= 0.4'}
     dev: true
 
+  /svelte-cannon/0.8.0_cannon-es@0.19.0:
+    resolution: {integrity: sha512-LtWtCbFlBIHZq5HR0L8KlmBlicNb5nqTg3PjOp+CYKsQ5xLRWkafSn1Fae1v4GaouOK3d7qe/COf0NQQI0r3qw==}
+    peerDependencies:
+      cannon-es: '*'
+    dependencies:
+      cannon-es: 0.19.0
+    dev: false
+
   /svelte-check/2.7.0_svelte@3.48.0:
     resolution: {integrity: sha512-GrvG24j0+i8AOm0k0KyJ6Dqc+TAR2yzB7rtS4nljHStunVxCTr/1KYlv4EsOeoqtHLzeWMOd5D2O6nDdP/yw4A==}
     hasBin: true

src/lib/Box.svelte

@@ -0,0 +1,13 @@
+<script>
+  import * as SC from 'svelte-cubed';
+  import * as THREE from 'three';
+  import * as PE from 'svelte-cannon';
+
+  const position = PE.writableVec3(0,5,0);
+</script>
+
+<PE.Body mass={1} bind:position={$position}>
+  <PE.Box size={[1,1,1]} />
+</PE.Body>
+
+<SC.Mesh geometry={new THREE.BoxGeometry()} position={$position.toArray()} />

src/routes/index.svelte

@@ -1,42 +1,22 @@
 <script>
-  import { onMount } from 'svelte';
   import * as SC from 'svelte-cubed';
   import * as THREE from 'three';
-  import { SVGLoader } from 'three/examples/jsm/loaders/SVGLoader';
+  import * as PE from 'svelte-cannon';
-  import logo from '$lib/logo.svg?raw';
+  import Box from '$lib/Box.svelte';
-
-  const svgLogo = new SVGLoader().parse(logo);
-  
-  let x = Math.PI;
-  let y = 0;
-  let z = 0;
 </script>
 
-<SC.Canvas alpha>
+<PE.World gravity={[0, -9.8 ,0]}>
-  <SC.Group scale={0.05} rotation={[x, y, z]}>
+  <SC.Canvas antialias shadows>
-    {#each svgLogo.paths as logoPath}
+    <PE.Body mass={0} rotation={[-Math.PI / 2, 0, 0]}>
-      <SC.Mesh
+      <PE.Plane />
-        geometry={new THREE.ExtrudeGeometry(logoPath.toShapes(false), {
+    </PE.Body>
-          depth: 40
+    <SC.Mesh
-        })}
+      geometry={new THREE.PlaneGeometry(50, 50)}
-      />
+      rotation={[-Math.PI / 2, 0, 0]}
-    {/each}
+      material={new THREE.MeshStandardMaterial({ color: "grey"})}
-  </SC.Group>
+    />
-  <SC.PerspectiveCamera position={[ 10, 0, 100 ]} />
+    <Box />
-  <SC.OrbitControls />
+    <SC.AmbientLight intensity={1} />
-</SC.Canvas>
+    <SC.PerspectiveCamera position={[ 2, 2, 15 ]} target={[0,0,0]} />
-
+  </SC.Canvas>
-<div class="controls">
+</PE.World>
-  <label for="x">X: <input id="x" name="x" type="range" bind:value={x} min={0} max={5} step={0.01} /></label>
-  <label for="y">Y: <input id="y" name="y" type="range" bind:value={y} min={0} max={5} step={0.01} /></label>
-  <label for="z">Z: <input id="z" name="z" type="range" bind:value={z} min={0} max={5} step={0.01} /></label>
-</div>
-
-<style>
-  .controls { 
-    position: absolute;
-    top: 0;
-    left: 0;
-    z-index: 10;
-  }
-</style>

src/routes/svg3D.svelte

@@ -0,0 +1,42 @@
+x<script>
+  import { onMount } from 'svelte';
+  import * as SC from 'svelte-cubed';
+  import * as THREE from 'three';
+  import { SVGLoader } from 'three/examples/jsm/loaders/SVGLoader';
+  import logo from '$lib/logo.svg?raw';
+
+  const svgLogo = new SVGLoader().parse(logo);
+  
+  let x = Math.PI;
+  let y = 0;
+  let z = 0;
+</script>
+
+<SC.Canvas alpha>
+  <SC.Group scale={0.05} rotation={[x, y, z]}>
+    {#each svgLogo.paths as logoPath}
+      <SC.Mesh
+        geometry={new THREE.ExtrudeGeometry(logoPath.toShapes(false), {
+          depth: 40
+        })}
+      />
+    {/each}
+  </SC.Group>
+  <SC.PerspectiveCamera position={[ 10, 0, 100 ]} />
+  <SC.OrbitControls />
+</SC.Canvas>
+
+<div class="controls">
+  <label for="x">X: <input id="x" name="x" type="range" bind:value={x} min={0} max={5} step={0.01} /></label>
+  <label for="y">Y: <input id="y" name="y" type="range" bind:value={y} min={0} max={5} step={0.01} /></label>
+  <label for="z">Z: <input id="z" name="z" type="range" bind:value={z} min={0} max={5} step={0.01} /></label>
+</div>
+
+<style>
+  .controls { 
+    position: absolute;
+    top: 0;
+    left: 0;
+    z-index: 10;
+  }
+</style>