Merge pull request #73 from cgtuebingen/feature/20-fun-camera-positions

Teleportation to fun locations

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,30 @@ const CanvasLayer = () => {
 
   const splatOptions = useControls('Admin Panel', options);
 
+  const handleTeleport = () => {
+    if (teleportControlsRef.current) {
+      // Test cooordinates
+      // (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
+    }
+  };
+
 
   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" /> }

app/components/TeleportControls.tsx

@@ -0,0 +1,31 @@
+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 [teleportData, setTeleportData] = useState<{
+    position: THREE.Vector3;
+    lookAt: THREE.Vector3;
+  } | null>(null);
+
+  useImperativeHandle(ref, () => ({
+    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 (teleportData) {
+      camera.position.copy(teleportData.position);
+      camera.lookAt(teleportData.lookAt);
+      setTeleportData(null);
+    }
+  });
+
+  return null;
+});
+
+export default TeleportControls;