From 2e3174e9a9fb396030b4037943ab709781bb8744 Mon Sep 17 00:00:00 2001
From: NorbiPDF <noba023@gmail.com>
Date: Thu, 27 Jun 2024 14:21:59 +0200
Subject: [PATCH 1/2] Added teleportation to given coordinates

---
 app/components/CanvasLayer.tsx      | 14 ++++++++++++++
 app/components/TeleportControls.tsx | 25 +++++++++++++++++++++++++
 2 files changed, 39 insertions(+)
 create mode 100644 app/components/TeleportControls.tsx

diff --git a/app/components/CanvasLayer.tsx b/app/components/CanvasLayer.tsx
index 2907a37..6d70e92 100644
--- a/app/components/CanvasLayer.tsx
+++ b/app/components/CanvasLayer.tsx
@@ -5,6 +5,7 @@ import {
     StatsGl
 } from '@react-three/drei';
 import { FirstPersonControls } from './FirstPersonControls.tsx'
+import TeleportControls from './TeleportControls.tsx';
 
 import { Splat } from './Splat.tsx';
 import { Leva, useControls } from 'leva';
@@ -17,6 +18,8 @@ const CanvasLayer = () => {
   const handleOverlayEnter = () => setIsPointerLocked(false);
   const handleOverlayLeave = () => setIsPointerLocked(true);
 
+  const teleportControlsRef = useRef();
+
   useEffect(() => {
     const checkFileExists = async () => {
       try {
@@ -43,17 +46,28 @@ const CanvasLayer = () => {
 
   const splatOptions = useControls('Admin Panel', options);
 
+  const handleTeleport = () => {
+    if (teleportControlsRef.current) {
+      // Test cooordinates
+      teleportControlsRef.current.teleport(1, 1, 1);
+    }
+  };
+
 
   return (
     <div className="absolute w-full h-full">
       <div onMouseEnter={handleOverlayEnter} onMouseLeave={handleOverlayLeave}>
         <Leva oneLineLabels />
+        <button onClick={handleTeleport} style={{ margin: '0px 450px', position: 'absolute', zIndex: 10 }}>
+          Teleport
+        </button>
       </div>
       <Canvas>
         <StatsGl />
         <ambientLight />
         <pointLight position={[0, 0, 0]} />
         <FirstPersonControls speed={splatOptions.speed} />
+        <TeleportControls ref={teleportControlsRef} />
         {isPointerLocked && <PointerLockControls />}
         {splatExists &&
         <Splat  position={[0, 2, 1]} src="splat.splat" /> }
diff --git a/app/components/TeleportControls.tsx b/app/components/TeleportControls.tsx
new file mode 100644
index 0000000..bc242b8
--- /dev/null
+++ b/app/components/TeleportControls.tsx
@@ -0,0 +1,25 @@
+import React, { useImperativeHandle, useState } from 'react';
+import * as THREE from 'three';
+import { useThree, useFrame } from '@react-three/fiber';
+
+const TeleportControls = React.forwardRef((props, ref) => {
+  const { camera } = useThree();
+  const [teleportPosition, setTeleportPosition] = useState<THREE.Vector3 | null>(null);
+
+  useImperativeHandle(ref, () => ({
+    teleport: (x, y, z) => {
+      setTeleportPosition(new THREE.Vector3(x, y, z));
+    }
+  }));
+
+  useFrame(() => {
+    if (teleportPosition) {
+      camera.position.copy(teleportPosition);
+      setTeleportPosition(null);
+    }
+  });
+
+  return null;
+});
+
+export default TeleportControls;
\ No newline at end of file

From 09477fb3c85cf09450172fdff4a494b808b03e3c Mon Sep 17 00:00:00 2001
From: NorbiPDF <noba023@gmail.com>
Date: Thu, 27 Jun 2024 15:02:27 +0200
Subject: [PATCH 2/2] Added variables to modify view direction

---
 app/components/CanvasLayer.tsx      |  4 +++-
 app/components/TeleportControls.tsx | 20 +++++++++++++-------
 2 files changed, 16 insertions(+), 8 deletions(-)

diff --git a/app/components/CanvasLayer.tsx b/app/components/CanvasLayer.tsx
index 6d70e92..af50d25 100644
--- a/app/components/CanvasLayer.tsx
+++ b/app/components/CanvasLayer.tsx
@@ -49,7 +49,9 @@ const CanvasLayer = () => {
   const handleTeleport = () => {
     if (teleportControlsRef.current) {
       // Test cooordinates
-      teleportControlsRef.current.teleport(1, 1, 1);
+      // (posX, posY, posZ, lookAtX, lookAtY, lookAtZ)
+      teleportControlsRef.current.teleport(0, 0, 0, 0, 2, 1);
+      // here you teleprot to pos 0,0,0 and look at pos 0,2,1
     }
   };
 
diff --git a/app/components/TeleportControls.tsx b/app/components/TeleportControls.tsx
index bc242b8..5cdd5dd 100644
--- a/app/components/TeleportControls.tsx
+++ b/app/components/TeleportControls.tsx
@@ -4,22 +4,28 @@ import { useThree, useFrame } from '@react-three/fiber';
 
 const TeleportControls = React.forwardRef((props, ref) => {
   const { camera } = useThree();
-  const [teleportPosition, setTeleportPosition] = useState<THREE.Vector3 | null>(null);
+  const [teleportData, setTeleportData] = useState<{
+    position: THREE.Vector3;
+    lookAt: THREE.Vector3;
+  } | null>(null);
 
   useImperativeHandle(ref, () => ({
-    teleport: (x, y, z) => {
-      setTeleportPosition(new THREE.Vector3(x, y, z));
+    teleport: (x, y, z, lookAtX, lookAtY, lookAtZ) => {
+      const position = new THREE.Vector3(x, y, z);
+      const lookAt = new THREE.Vector3(lookAtX, lookAtY, lookAtZ);
+      setTeleportData({ position, lookAt });
     }
   }));
 
   useFrame(() => {
-    if (teleportPosition) {
-      camera.position.copy(teleportPosition);
-      setTeleportPosition(null);
+    if (teleportData) {
+      camera.position.copy(teleportData.position);
+      camera.lookAt(teleportData.lookAt);
+      setTeleportData(null);
     }
   });
 
   return null;
 });
 
-export default TeleportControls;
\ No newline at end of file
+export default TeleportControls;