From ae19fddccaa818b4ab6eeb437299e4dcafc029ce Mon Sep 17 00:00:00 2001
From: s <s.looi2@outlook.com>
Date: Wed, 18 Sep 2024 01:06:02 +0900
Subject: [PATCH] :sparkles: add translate z ui slider

---
 src/App.tsx | 14 ++++++++------
 1 file changed, 8 insertions(+), 6 deletions(-)

diff --git a/src/App.tsx b/src/App.tsx
index 2cdae9d..2cd1a00 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -7,7 +7,7 @@ import { createWebglRenderer } from './webgl'
 
 function App() {
   const [scale, setScale] = useState<number>(1)
-  const [translation, setTranslation] = useState<[number, number]>([0, 0])
+  const [translation, setTranslation] = useState<{ x: number, y: number, z: number }>({ x: 0, y: 0, z: 0 })
   const [rotation, setRotation] = useState<{ x: number, y: number, z: number }>({ x: 0, y: 0, z: 0 })
 
   const [renderer, setRenderer] = useState<ReturnType<typeof createWebglRenderer> | null>(null)
@@ -28,7 +28,7 @@ function App() {
     renderer.rotateX(rotation.x)
     renderer.rotateY(rotation.y)
     renderer.rotateZ(rotation.z)
-    renderer.translate(translation[0], translation[1])
+    renderer.translate(translation.x, translation.y, translation.z)
     renderer.draw()
   }, [scale, translation, rotation])
 
@@ -45,10 +45,12 @@ function App() {
           <input value={rotation.y} type="range" onChange={e => setRotation(v => ({ ...v, y: Number(e.target.value) }))} min="0" max="300" step="1" />
           <p>rotate Z: {rotation.z}</p>
           <input value={rotation.z} type="range" onChange={e => setRotation(v => ({ ...v, z: Number(e.target.value) }))} min="0" max="300" step="1" />
-          <p>translate x : {translation[0]}</p>
-          <input value={translation[0]} type="range" onChange={e => setTranslation(t => [Number(e.target.value), t[1]])} min="0" max="300" step="1" />
-          <p>translate y : {translation[1]}</p>
-          <input value={translation[1]} type="range" onChange={e => setTranslation(t => [t[0], Number(e.target.value)])} min="0" max="300" step="1" />
+          <p>translate x : {translation.x}</p>
+          <input value={translation.x} type="range" onChange={e => setTranslation(v => ({ ...v, x: Number(e.target.value) }))} min="0" max="300" step="1" />
+          <p>translate y : {translation.y}</p>
+          <input value={translation.y} type="range" onChange={e => setTranslation(v => ({ ...v, y: Number(e.target.value) }))} min="0" max="300" step="1" />
+          <p>translate z : {translation.z}</p>
+          <input value={translation.z} type="range" onChange={e => setTranslation(v => ({ ...v, z: Number(e.target.value) }))} min="0" max="300" step="1" />
         </div>
       </div>
     </>