limit camera movement

fix #30 Limit camera movement using extent loaded at the very beginning

src/components/Hero/components/Camera.jsx

@@ -10,6 +10,7 @@ const CAMERA_OFFSET = [-12, 10, -12]
 const TARGET_OFFSET = [-2, 6, 4]
 
 export const Camera = () => {
+  const pebblesExtent = usePebblesStore((state) => state.pebblesExtent)
   const cameraRef = useRef()
 
   const targetPositionRef = useRef(new THREE.Vector3(0, 8, 0))
@@ -98,7 +99,13 @@ export const Camera = () => {
 
   const cameraScroll = (delta) => {
     targetPositionRef.current.z += scrollSpeedRef.current * delta * -50
+    if (targetPositionRef.current.z > pebblesExtent[1].z) {
+      targetPositionRef.current.z = pebblesExtent[1].z
+    } else if (targetPositionRef.current.z < pebblesExtent[0].z) {
+      targetPositionRef.current.z = pebblesExtent[0].z
+    }
     targetLookAtRef.current.z += scrollSpeedRef.current * delta * -50
+
     scrollSpeedRef.current *= 1 - delta * 5
     if (Math.abs(scrollSpeedRef.current) < 0.01) {
       scrollSpeedRef.current = 0

src/components/Hero/store.js

@@ -32,6 +32,8 @@ export const createNewPebble = (userName, message, color, bioId, lastPositionX,
 
 export const usePebblesStore = create((set, get) => ({
   pebblesData: [],
+  pebblesExtent: [],
+  setPebblesEstent: (value) => set({ pebblesExtent: value }),
   // UI STATES:
   hasStarted: false,
   hasCreate: false,

src/index.jsx

@@ -5,6 +5,8 @@ import 'bootstrap/dist/css/bootstrap.min.css'
 import './index.css'
 import App from './App'
 import reportWebVitals from './reportWebVitals'
+import axios from 'axios'
+import { usePebblesStore } from './components/Hero/store'
 
 // replace console.* for disable log debug on production
 if (
@@ -30,18 +32,22 @@ console.debug(
 // on slow devices
 // (e.g. iPhone 6)
 
-setTimeout(() => {
-  clearInterval(window.memorialShoahParagraphLoop)
-  document.getElementById('loading').classList.add('hide')
-}, Math.max(3600 - loadingTime, 1000))
-
-const root = ReactDOM.createRoot(document.getElementById('root'))
-root.render(
-  <React.StrictMode>
-    <App />
-  </React.StrictMode>,
-)
-
+axios.get('/api/pebbles/extent').then((response) => {
+  console.debug('[index] extent', response.data)
+  const root = ReactDOM.createRoot(document.getElementById('root'))
+  usePebblesStore.setState({ pebblesExtent: response.data })
+
+  setTimeout(() => {
+    clearInterval(window.memorialShoahParagraphLoop)
+    document.getElementById('loading').classList.add('hide')
+  }, Math.max(3600 - loadingTime, 1000))
+
+  root.render(
+    <React.StrictMode>
+      <App />
+    </React.StrictMode>,
+  )
+})
 // If you want to start measuring performance in your app, pass a function
 // to log results (for example: reportWebVitals(console.log))
 // or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals