From 97d810592d9e89b791e37a9b86108ab1fa3045eb Mon Sep 17 00:00:00 2001
From: Bradley Shellnut <bradleyshellnut@protonmail.com>
Date: Thu, 5 May 2022 10:36:35 -0700
Subject: [PATCH] Added a cube with gravity and a plane to land on.

---
 package.json            |  2 ++
 pnpm-lock.yaml          | 16 ++++++++++++
 src/lib/Box.svelte      | 13 ++++++++++
 src/routes/index.svelte | 54 +++++++++++++----------------------------
 src/routes/svg3D.svelte | 42 ++++++++++++++++++++++++++++++++
 5 files changed, 90 insertions(+), 37 deletions(-)
 create mode 100644 src/lib/Box.svelte
 create mode 100644 src/routes/svg3D.svelte

diff --git a/package.json b/package.json
index d9c09e5..5d92991 100644
--- a/package.json
+++ b/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"
   }
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index da052bb..6bdf231 100644
--- a/pnpm-lock.yaml
+++ b/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
diff --git a/src/lib/Box.svelte b/src/lib/Box.svelte
new file mode 100644
index 0000000..7fd05bd
--- /dev/null
+++ b/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()} />
\ No newline at end of file
diff --git a/src/routes/index.svelte b/src/routes/index.svelte
index a745f06..caea7a4 100644
--- a/src/routes/index.svelte
+++ b/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 logo from '$lib/logo.svg?raw';
-
-  const svgLogo = new SVGLoader().parse(logo);
-  
-  let x = Math.PI;
-  let y = 0;
-  let z = 0;
+  import * as PE from 'svelte-cannon';
+  import Box from '$lib/Box.svelte';
 </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>
\ No newline at end of file
+<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
+      geometry={new THREE.PlaneGeometry(50, 50)}
+      rotation={[-Math.PI / 2, 0, 0]}
+      material={new THREE.MeshStandardMaterial({ color: "grey"})}
+    />
+    <Box />
+    <SC.AmbientLight intensity={1} />
+    <SC.PerspectiveCamera position={[ 2, 2, 15 ]} target={[0,0,0]} />
+  </SC.Canvas>
+</PE.World>
\ No newline at end of file
diff --git a/src/routes/svg3D.svelte b/src/routes/svg3D.svelte
new file mode 100644
index 0000000..59d00cd
--- /dev/null
+++ b/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>
\ No newline at end of file