feat: Implement editor and live programmable mechanism

src/App.css

@@ -0,0 +1,26 @@
+.cube-scene {
+    /*width: 800px;*/
+    height: 600px;
+    border: 1px solid black;
+    /*margin: 20px auto;*/
+}
+
+.code-editor {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+}
+
+.code-editor textarea {
+    width: 90%;
+    height: 200px;
+    resize: none;
+    margin-top: 10px;
+    /*border: none;*/
+    /*outline: none;*/
+    font-size: 14px;
+    font-family: Consolas, monospace;
+    padding: 10px;
+    background-color: #f8f8f8;
+}

src/App.js

@@ -1,10 +1,22 @@
 import './App.css';
 import CubeScene from './components/CubeScene';
+import CodeEditor from './components/CodeEditor';
+import {useState} from "react";
+
 
 function App() {
-  return (
+
+    const [code, setCode] = useState("")
+
+    const handleExecuteCode = (newCode) => {
+        setCode(newCode);
+    };
+
+
+    return (
     <div className="App">
-        <CubeScene />
+        <CubeScene code={code} />
+        <CodeEditor onExecute={handleExecuteCode} />
     </div>
   );
 }

src/components/CodeEditor.js

@@ -0,0 +1,27 @@
+import React, {useState} from "react";
+
+
+const CodeEditor = ({ onExecute }) => {
+
+    const [code, setCode] = useState("")
+
+    const handleChange = (e) => {
+        setCode(e.target.value);
+    };
+
+    const handleExecute = () => {
+        onExecute(code);
+    };
+
+    return (
+        <div className="code-editor">
+            <textarea
+                value={code}
+                onChange={handleChange}
+            />
+            <button onClick={handleExecute}>Execute Code</button>
+        </div>
+    );
+}
+
+export default CodeEditor;

src/components/CubeScene.js

@@ -2,8 +2,9 @@
 import React, { useRef, useEffect } from 'react';
 import * as THREE from 'three';
 import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls';
+import './../App.css';
 
-const CubeScene = () => {
+const CubeScene = ({ code }) => {
     const mountRef = useRef(null);
 
     useEffect(() => {
@@ -12,16 +13,16 @@ const CubeScene = () => {
 
         const scene = new THREE.Scene();
         const camera = new THREE.PerspectiveCamera(
-            20, window.innerWidth / window.innerHeight, 0.01, 1000
+            20, currentMount.clientWidth / currentMount.clientHeight, 0.01, 1000
         );
         camera.position.z = 10;
 
         const renderer = new THREE.WebGLRenderer({
             antialias: true,
-            // alpha: true
+            alpha: true
         });
 
-        renderer.setSize(window.innerWidth, window.innerHeight);
+        renderer.setSize(currentMount.clientWidth, currentMount.clientHeight);
         currentMount.appendChild(renderer.domElement);
 
         const colorYellow = new THREE.Color("hsl(40, 100%, 60%)");
@@ -48,17 +49,21 @@ const CubeScene = () => {
         const controls = new OrbitControls(camera, renderer.domElement);
 
         const animate = () => {
+            try {
+                eval(code);
+            } catch (error) {
+                console.error("Error executing code: ", error);
+            }
+            // cube.rotation.y += 0.01;
             renderer.render(scene, camera);
-            // cube.rotation.x += 0.01;
-            // cube.rotation.z -= 0.01;
             controls.update();
             requestAnimationFrame(animate);
         }
 
         const handleResize = () => {
-            camera.aspect = window.innerWidth / window.innerHeight;
+            camera.aspect = currentMount.clientWidth / currentMount.clientHeight;
             camera.updateProjectionMatrix();
-            renderer.setSize(window.innerWidth, window.innerHeight);
+            renderer.setSize(currentMount.clientWidth, currentMount.clientHeight);
         };
 
         animate();
@@ -71,9 +76,9 @@ const CubeScene = () => {
                 currentMount.removeChild(renderer.domElement);
             }
         };
-    }, []);
+    }, [code]);
 
-    return <div ref={mountRef}></div>;
+    return <div className="cube-scene" ref={mountRef}></div>;
 };
 
 export default CubeScene;