From 4fffb79d433d1052e4b3c9cce0215cf81eba9b11 Mon Sep 17 00:00:00 2001
From: Kevin Ingersoll <kingersoll@gmail.com>
Date: Mon, 23 Sep 2024 12:20:27 +0000
Subject: [PATCH] fix(create-mud): add missing three deps, fix types (#3221)

---
 .changeset/empty-walls-attend.md              |  5 +++++
 .../threejs/packages/client/package.json      |  4 +++-
 templates/threejs/packages/client/src/App.tsx | 20 +++++++++----------
 3 files changed, 18 insertions(+), 11 deletions(-)
 create mode 100644 .changeset/empty-walls-attend.md

diff --git a/.changeset/empty-walls-attend.md b/.changeset/empty-walls-attend.md
new file mode 100644
index 0000000000..8b14359fc1
--- /dev/null
+++ b/.changeset/empty-walls-attend.md
@@ -0,0 +1,5 @@
+---
+"create-mud": patch
+---
+
+Fixed types in threejs template after dependency bump.
diff --git a/templates/threejs/packages/client/package.json b/templates/threejs/packages/client/package.json
index 69fd2627d1..2ace770a6d 100644
--- a/templates/threejs/packages/client/package.json
+++ b/templates/threejs/packages/client/package.json
@@ -19,16 +19,18 @@
     "@latticexyz/store-sync": "link:../../../../packages/store-sync",
     "@latticexyz/utils": "link:../../../../packages/utils",
     "@latticexyz/world": "link:../../../../packages/world",
-    "@react-three/fiber": "^8.15.19",
+    "@react-three/fiber": "^8.17.8",
     "contracts": "workspace:*",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "rxjs": "7.5.5",
+    "three": "^0.168.0",
     "viem": "2.21.6"
   },
   "devDependencies": {
     "@types/react": "18.2.22",
     "@types/react-dom": "18.2.7",
+    "@types/three": "^0.168.0",
     "@vitejs/plugin-react": "^3.1.0",
     "eslint-plugin-react": "7.31.11",
     "eslint-plugin-react-hooks": "4.6.0",
diff --git a/templates/threejs/packages/client/src/App.tsx b/templates/threejs/packages/client/src/App.tsx
index 89e1c207ff..d464bf8a8a 100644
--- a/templates/threejs/packages/client/src/App.tsx
+++ b/templates/threejs/packages/client/src/App.tsx
@@ -16,52 +16,52 @@ const Plane = () => {
     <>
       <mesh position={[0, -1, 0]}>
         <boxGeometry args={[20, 0.1, 20]} />
-        <meshStandardMaterial color="#000" opacity="0.9" transparent />
+        <meshStandardMaterial color="#000" opacity={0.9} transparent />
       </mesh>
 
       <mesh position={[0, 3, -10]}>
         <boxGeometry args={[20, 5, 0.1]} />
-        <meshStandardMaterial color="#F00" opacity="0.5" transparent />
+        <meshStandardMaterial color="#F00" opacity={0.5} transparent />
       </mesh>
 
       <mesh position={[10, 3, 0]}>
         <boxGeometry args={[0.1, 5, 20]} />
-        <meshStandardMaterial color="#0F0" opacity="0.5" transparent />
+        <meshStandardMaterial color="#0F0" opacity={0.5} transparent />
       </mesh>
 
       <mesh position={[5, 2, 0]}>
         <sphereGeometry args={[2, 10, 10]} />
-        <meshStandardMaterial color="#FF0" opacity="0.8" transparent />
+        <meshStandardMaterial color="#FF0" opacity={0.8} transparent />
       </mesh>
 
       <mesh position={[0, 2, 5]}>
         <sphereGeometry args={[2, 10, 10]} />
-        <meshStandardMaterial color="#FF0" opacity="0.8" transparent />
+        <meshStandardMaterial color="#FF0" opacity={0.8} transparent />
       </mesh>
 
       <mesh position={[-5, 2, 0]}>
         <sphereGeometry args={[2, 10, 10]} />
-        <meshStandardMaterial color="#FF0" opacity="0.8" transparent />
+        <meshStandardMaterial color="#FF0" opacity={0.8} transparent />
       </mesh>
 
       <mesh position={[0, 2, -5]}>
         <sphereGeometry args={[2, 10, 10]} />
-        <meshStandardMaterial color="#FF0" opacity="0.8" transparent />
+        <meshStandardMaterial color="#FF0" opacity={0.8} transparent />
       </mesh>
 
       <mesh position={[5, 2, -5]}>
         <sphereGeometry args={[1, 10, 10]} />
-        <meshStandardMaterial color="#008" opacity="0.8" transparent />
+        <meshStandardMaterial color="#008" opacity={0.8} transparent />
       </mesh>
 
       <mesh position={[5, 2, 5]}>
         <sphereGeometry args={[1, 10, 10]} />
-        <meshStandardMaterial color="#008" opacity="0.8" transparent />
+        <meshStandardMaterial color="#008" opacity={0.8} transparent />
       </mesh>
 
       <mesh position={[-5, 2, -5]}>
         <sphereGeometry args={[1, 10, 10]} />
-        <meshStandardMaterial color="#008" opacity="0.8" transparent />
+        <meshStandardMaterial color="#008" opacity={0.8} transparent />
       </mesh>
     </>
   );