Camera controls

src/app/components/Camera/OrthographicControls.tsx

@@ -0,0 +1,9 @@
+import { FC } from "react";
+
+const OrthographicControls: FC<{}> = () => {
+  return (
+    <div className="absolute bottom-0 text-white">OrthographicControls</div>
+  );
+};
+
+export default OrthographicControls;

src/app/components/Camera/PerspectiveControls.tsx

@@ -0,0 +1,9 @@
+import { FC } from "react";
+
+const PerspectiveControls: FC<{}> = () => {
+  return (
+    <div className="absolute bottom-0 text-white">PerspectiveControls</div>
+  );
+};
+
+export default PerspectiveControls;

src/app/components/Camera.tsx → src/app/components/Camera/index.tsx

@@ -3,8 +3,10 @@
 import * as THREE from "three";
 import { OrbitControls } from "three/examples/jsm/controls/OrbitControls";
 import clsx from "clsx";
-import { FC, useCallback, useEffect, useRef, useState } from "react";
+import { FC, useEffect, useRef, useState } from "react";
 import { CameraView } from "@/app/lib/cameraWorld";
+import PerspectiveControls from "./PerspectiveControls";
+import OrthographicControls from "./OrthographicControls";
 
 const Camera: FC<{
   cameraView: CameraView;
@@ -17,6 +19,10 @@ const Camera: FC<{
   const [orbitControls, setOrbitControls] = useState<OrbitControls | null>(
     null
   );
+  const cameraType =
+    cameraView.camera instanceof THREE.PerspectiveCamera
+      ? "perspective"
+      : "orthographic";
 
   useEffect(() => {
     if (ref.current && canvas && !ref.current.contains(canvas)) {
@@ -42,14 +48,20 @@ const Camera: FC<{
   return (
     <div
       ref={ref}
-      className={clsx("rounded", "overflow-hidden", "w-80", "h-80", {
+      className={clsx("overflow-hidden", "w-80", "h-80", "relative", {
         "border-2 border-red-500": underControl,
 
         "md:w-[40rem]": large,
         "md:h-[40rem]": large,
       })}
       onClick={_onClick}
-    ></div>
+    >
+      {cameraType === "perspective" ? (
+        <PerspectiveControls />
+      ) : (
+        <OrthographicControls />
+      )}
+    </div>
   );
 };
 

src/app/lib/cameraWorld.ts

@@ -7,7 +7,7 @@ import genStarParticles from "./genStarParticles";
 export type CameraView = {
   canvas: HTMLCanvasElement;
   camera: THREE.Camera;
-  cameraHelper: THREE.CameraHelper;
+  cameraHelper: THREE.CameraHelper | null;
 };
 
 type CameraArgs = {
@@ -175,7 +175,7 @@ export const initWorld = (): CameraView => {
   renderer = createRenderer(CONTAINER_WIDTH, CONTAINER_HEIGHT);
 
   // add to cameraViews
-  cameraViews.push({ camera, canvas: createCanvas() });
+  cameraViews.push({ camera, canvas: createCanvas(), cameraHelper: null });
 
   // kick off render loop
   requestAnimationFrame((time) => render(time, renderer, scene));
@@ -221,7 +221,7 @@ export const addCamera = ({
 export const removeCamera = (cameraView: CameraView) => {
   const { camera, cameraHelper } = cameraView;
   scene.remove(camera);
-  scene.remove(cameraHelper);
+  if (cameraHelper) scene.remove(cameraHelper);
   cameraViews = cameraViews.filter((c) => c !== cameraView);
   renderer.setSize(CONTAINER_WIDTH, CONTAINER_HEIGHT * cameraViews.length);
   return cameraViews;