Skip to content

Commit

Permalink
Camera updates (#47)
Browse files Browse the repository at this point in the history
* on create move camera to empty space, fix for camera scroll bounds

* get minz and maxz from the pebblestore

* add default values for pebblesExtent and remove unused settr

* fix bug when currentstory is null

---------

Co-authored-by: wdobry <[email protected]>
  • Loading branch information
danieleguido and wdobry authored Jan 24, 2024
1 parent c282e4b commit 9609084
Show file tree
Hide file tree
Showing 4 changed files with 39 additions and 24 deletions.
25 changes: 13 additions & 12 deletions src/components/Hero/components/Camera.jsx
Original file line number Diff line number Diff line change
Expand Up @@ -10,7 +10,8 @@ const CAMERA_OFFSET = [-12, 10, -12]
const TARGET_OFFSET = [-2, 6, 4]

export const Camera = () => {
const pebblesExtent = usePebblesStore((state) => state.pebblesExtent)
// this is an array [min, max]
const [minZ, maxZ] = usePebblesStore((state) => state.pebblesExtent)
const cameraRef = useRef()

const targetPositionRef = useRef(new THREE.Vector3(0, 8, 0))
Expand All @@ -28,7 +29,6 @@ export const Camera = () => {

const selectedTarget = usePebblesStore((state) => state.selectedPebble)
const hasStarted = usePebblesStore((state) => state.hasStarted)
const hasCreate = usePebblesStore((state) => state.hasCreate)

const [signedPosition, setSignedPosition] = useState(1)

Expand Down Expand Up @@ -91,22 +91,24 @@ export const Camera = () => {
window.removeEventListener('touchmove', handleTouchMove)
window.removeEventListener('mousemove', handleMouseMove)
}
})
}, [])

const calculateSpeed = (delta, time) => {
return THREE.MathUtils.clamp((delta / time) * 1000, -2, 2)
}

const cameraScroll = (delta) => {
// Calculate the potential new position
let potentialNewZ = targetPositionRef.current.z + scrollSpeedRef.current * delta * -50
// Clamp the new position to be within the min and max Z bounds
potentialNewZ = THREE.MathUtils.clamp(potentialNewZ, minZ - 48, maxZ - 48)
// Update the target position
targetPositionRef.current.z = potentialNewZ

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
}
Expand Down Expand Up @@ -171,9 +173,8 @@ export const Camera = () => {

useSafeFrame((_, delta) => {
if (!cameraRef.current) return
if (hasCreate) {
cameraForward()
} else if (hasStarted) {

if (hasStarted) {
if (selectedTarget) {
cameraToTarget()
} else {
Expand Down
4 changes: 2 additions & 2 deletions src/components/Hero/store.js
Original file line number Diff line number Diff line change
Expand Up @@ -32,8 +32,8 @@ export const createNewPebble = (userName, message, color, bioId, lastPositionX,

export const usePebblesStore = create((set, get) => ({
pebblesData: [],
pebblesExtent: [],
setPebblesEstent: (value) => set({ pebblesExtent: value }),
// default Z extents of the pebbles
pebblesExtent: [-100, 0],
// UI STATES:
hasStarted: false,
hasCreate: false,
Expand Down
32 changes: 23 additions & 9 deletions src/components/Hero/ui/ModalCreateNew.jsx
Original file line number Diff line number Diff line change
Expand Up @@ -33,6 +33,7 @@ const ModalCreate = ({ withCarousel = false }) => {
const createPebble = usePebblesStore((state) => state.createPebble)
const setUserInteracted = usePebblesStore((state) => state.setUserInteracted)
const setHasCreate = usePebblesStore((state) => state.setHasCreate)
const setSelected = usePebblesStore((state) => state.setSelected)
const setHasDetails = usePebblesStore((state) => state.setHasDetails)
const setShowConfirmationModal = usePebblesStore((state) => state.setShowConfirmationModal)

Expand Down Expand Up @@ -70,8 +71,6 @@ const ModalCreate = ({ withCarousel = false }) => {

// If the prev postion was rejected, use the suggested position:
if (retry && suggested_position) {
console.log('-------------------------retrying-------------------------')
console.log(suggested_position)
positionX = parseFloat(suggested_position[0])
positionZ = parseFloat(suggested_position[2])
}
Expand All @@ -96,29 +95,45 @@ const ModalCreate = ({ withCarousel = false }) => {
token,
position: newPebbleData.position,
rotation: newPebbleData.rotation,
scale: [1, 1, 1],
scale: newPebbleData.scale,
color: PebbleColors[selectedColor],
})
}

useEffect(() => {
let { positionX, positionZ } = usePebblesStore.getState().lastPebbleData
if(!currentStory) return
const previewPebble = createNewPebble(
createdBy,
message,
PebbleColors[selectedColor],
currentStory.slug,
positionX,
positionZ,
)

setSelected(previewPebble)

if (status === 'success') {
createPebble(newPebbleData)
setUserInteracted(true)
setSelected(newPebbleData)
// only direct interaction can set it to false
// setHasCreate(false)
setHasDetails(true)
}
console.log(status)
}, [
status,
createdBy,
currentStory,
createPebble,
setUserInteracted,
setHasCreate,
setHasDetails,
createdBy,
currentStory?.slug,
message,
newPebbleData,
selectedColor,
setHasDetails,
setSelected,
setUserInteracted,
])

console.debug(
Expand Down Expand Up @@ -194,7 +209,6 @@ const ModalCreate = ({ withCarousel = false }) => {
</button>
<button
className="btn btn-secondary btn-lg SearchField_inputSubmit"
disabled={!token}
onClick={() => {
setHasCreate(false)
}}
Expand Down
2 changes: 1 addition & 1 deletion src/index.jsx
Original file line number Diff line number Diff line change
Expand Up @@ -32,7 +32,7 @@ console.debug(
// on slow devices
// (e.g. iPhone 6)

axios.get('/api/pebbles/extent').then((response) => {
axios.get('/api/pebbles/extent-z').then((response) => {
console.debug('[index] extent', response.data)
const root = ReactDOM.createRoot(document.getElementById('root'))
usePebblesStore.setState({ pebblesExtent: response.data })
Expand Down

0 comments on commit 9609084

Please sign in to comment.