From 6649508aabdd91d44b26741f17e24b96f5186e22 Mon Sep 17 00:00:00 2001
From: Hayk Martiros <hayk.mart@gmail.com>
Date: Sat, 26 Nov 2022 11:26:19 -0800
Subject: [PATCH] pull out proper camera

---
 components/ThreeCanvas.tsx | 10 +++++++++-
 pages/index.tsx            |  1 +
 2 files changed, 10 insertions(+), 1 deletion(-)

diff --git a/components/ThreeCanvas.tsx b/components/ThreeCanvas.tsx
index 54c54f9..48d76fb 100644
--- a/components/ThreeCanvas.tsx
+++ b/components/ThreeCanvas.tsx
@@ -2,6 +2,7 @@ import { Canvas } from "@react-three/fiber";
 
 import { InferenceResult } from "../types";
 import SpectrogramViewer from "./SpectrogramViewer";
+import { PerspectiveCamera } from "@react-three/drei";
 
 interface CanvasProps {
   paused: boolean;
@@ -20,9 +21,16 @@ export default function ThreeCanvas({
   audioLength,
 }: CanvasProps) {
   return (
-    <Canvas camera={{ position: [0, 0, 8], rotation: [0.4, 0, 0] }}>
+    <Canvas>
       <ambientLight intensity={2} />
       <pointLight position={[40, 40, 40]} />
+      <PerspectiveCamera
+        makeDefault
+        position={[0, 0, 8]}
+        rotation={[0.4, 0, 0]}
+        fov={70}
+      />
+
       <SpectrogramViewer
         paused={paused}
         inferenceResults={inferenceResults}
diff --git a/pages/index.tsx b/pages/index.tsx
index 7150c4c..68e6f39 100644
--- a/pages/index.tsx
+++ b/pages/index.tsx
@@ -12,6 +12,7 @@ import { InferenceResult, PromptInput } from "../types";
 
 import * as Tone from "tone";
 
+// TODO(hayk): Get this into a configuration.
 const SERVER_URL = "http://129.146.52.68:3013/run_inference/";
 
 const defaultPromptInputs = [