From 0eb1ed69bd093efe96ee4ea75df00d409478fb2f Mon Sep 17 00:00:00 2001
From: VsevolodX <79542055+VsevolodX@users.noreply.github.com>
Date: Mon, 21 Aug 2023 12:40:31 -0700
Subject: [PATCH] update: edit camera

---
 src/components/ThreejsEditor.tsx | 20 +++++++++++++++++---
 1 file changed, 17 insertions(+), 3 deletions(-)

diff --git a/src/components/ThreejsEditor.tsx b/src/components/ThreejsEditor.tsx
index 5b2ab60..be78942 100644
--- a/src/components/ThreejsEditor.tsx
+++ b/src/components/ThreejsEditor.tsx
@@ -2,7 +2,7 @@
 import { Made } from "@exabyte-io/made.js";
 import { Box } from "@mui/material";
 import { Canvas, useThree } from "@react-three/fiber";
-import React, { useEffect } from "react";
+import React, { useEffect, useRef } from "react";
 import * as THREE from "three";
 
 import { materialsToThreeDSceneData } from "../utils";
@@ -10,6 +10,7 @@ import { materialsToThreeDSceneData } from "../utils";
 interface ThreejsSceneProps {
     materials: Made.Material[];
 }
+
 function ThreejsScene({ materials }: ThreejsSceneProps): JSX.Element | null {
     const { scene } = useThree();
 
@@ -21,13 +22,22 @@ function ThreejsScene({ materials }: ThreejsSceneProps): JSX.Element | null {
         scene.add(...loadedScene.children);
     }, [materials, scene]);
 
-    return null; // This component is just for side effects, it doesn't render anything
+    return null; // This component doesn't render anything visually itself
 }
 
 interface ThreejsEditorProps {
     materials: Made.Material[];
 }
+
 export function ThreejsEditor({ materials }: ThreejsEditorProps): JSX.Element {
+    const cameraRef = useRef<THREE.PerspectiveCamera | null>(null);
+
+    useEffect(() => {
+        if (cameraRef.current) {
+            cameraRef.current.lookAt(new THREE.Vector3(0, 0, 0));
+        }
+    }, []);
+
     useEffect(() => {
         return () => {
             // Cleanup actions (equivalent to componentWillUnmount)
@@ -40,7 +50,11 @@ export function ThreejsEditor({ materials }: ThreejsEditorProps): JSX.Element {
             <Canvas style={{ background: "black" }}>
                 <ambientLight />
                 <pointLight position={[10, 10, 10]} />
-                <camera position={[-20, 0, 10]} lookAt={} />
+                <perspectiveCamera
+                    ref={cameraRef}
+                    position={new THREE.Vector3(-20, 0, 10)}
+                    up={new THREE.Vector3(0, 0, 1)}
+                />
                 <ThreejsScene materials={materials} />
             </Canvas>
         </Box>