Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
feat(events)!: pointerevents manager and state (#529)
* new file: playground/src/components/Box.vue
new file: playground/src/pages/raycaster/Propogation.vue
* Started work on interactive Event Propogation playground example
modified: src/components/TresCanvas.vue
* Import and use `useEventStore`
* defineEmits for all expected pointer events so we may emit propogated events off of the canvasa
modified: src/composables/index.ts
new file: src/composables/useEventStore/index.ts
* Started work on an event store. I'm not sure this counts as a store just yet
* Wired up majority of pointer events
* Added event propogation
* Does not require using userData scene props or nodeOps for registering objects to scene
modified: src/composables/useRaycaster/index.ts
* Added new event listeners to power newly supported pointer events. We now check whole scene/children when calling intersectObjects.
* Created new EventHooks for new events
* Added `forceUpdate` function that allows for pointer-move events to work without mouth movement (good for when camera is moving but mouse is not)
modified: src/core/nodeOps.ts
* Added supported events to array so they don't get received as props
* (temporarily) unhook current pointer event solution to iterate on useEventStore
modified: src/utils/index.ts
* Added Camel-to-kebab case util
* Support multiple event listeners, add support for .stop event modifier
* Set stopProgation variable to false by default, whoops
* fix typo
* fix: remove `createGlobalState` from `useEventStore`, allowing events to work while multiple TresCanvas' are being used
* fix(perf): remove extraneous intersectObjects/getIntersects calls by moving intersects into a ref that is updated on pointer-move
* chore(lint): fix lint issues
* feat: enhance events manager to include duplicates checking, pointer-missed support, and forced updating
Per file changelog:
modified: playground/src/components/Box.vue
* Added a pointer-missed handler for testing
modified: playground/src/pages/TheBasic.vue
* uses forceUpdate from EventManager to fire events even when the mouse hasn't moved
modified: playground/src/pages/raycaster/Propagation.vue
* Didn't mean to undo the lint changes, adds a pointer-missed event on the canvas for extra testing
modified: src/components/TresCanvas.vue
* Adds `pointer-missed` as possible event for canvas emits
modified: src/composables/index.ts
* Update export
deleted: src/composables/useEventStore/index.ts
* Rename `useEventStore` to `useTresEventManager`
modified: src/composables/useRaycaster/index.ts
* Check for empty intersects on hit test, wire up pointerMissed events eventHook
* Fix forceUpdate to call onPointerMove instead of triggering an EventHook
modified: src/composables/useTresContextProvider/index.ts
* Add TresEventManager type
new file: src/composables/useTresEventManager/index.ts
* add onPointerMissed
* create (de)registerPointerMissedObj methods so we can track objects in the scene listening to this event
* Note: These are passed to nodeOps via TresContext
* Implement duplicates checking for eventPropogation
modified: src/core/nodeOps.ts
* register/deregister pointerMissed objects
* chore: lint
* docs: new event docs
* chore: fix lint
* feat: enhance event object details and use in Box example to change material color. Add ability to force event system updates even when mouse hasn't moved. Enhance pointer-enter/leave events. Update types
Box.vue
* Added pointer-missed handler
* set the materials flash color using the object coming off of the event instead of a ref
UseRaycaster
* Flesh out event details to include
* all mouse event properties
* intersections
* tres camera
* camera raycaster
* source event
* mouse position delta
* stopPropagating stub
* and unprojectedPoint (this needs work, cant get the math to work)
UseTresContextProvider
* Add TresEventManager type to TresContext
useTresEventManager
* Add forceUpdate method to allow apps to force an event system update even when the mouse hasnt moved
* Add pointerMissed event
* Properly implement pointer-enter/pointer-leave events
* Before now, pointer-enter | leave were only called on first object in intersection, now we execute the events for all entered/left objects
* Use stopPropagating property included on event object
* chore: lint
* chore: fix lint issues
---------
Co-authored-by: alvarosabu <alvaro.saburido@gmail.com>- Loading branch information
1 parent
cdf6b6f
commit b536ab1
Showing
14 changed files
with
776 additions
and
113 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,44 @@ | ||
| <script setup lang="ts"> | ||
| import { ref, shallowRef } from 'vue' | ||
| import { useRenderLoop } from '@tresjs/core' | ||
| import { Color } from 'three' | ||
| const props = defineProps(['position', 'name']) | ||
| // TODO: Once we have troika text in cientos, display the count over each box | ||
| const count = ref(0) | ||
| const boxRef = shallowRef() | ||
| // Event Testing Colors | ||
| const black = new Color('black') | ||
| const green = new Color('green') | ||
| const blue = new Color('blue') | ||
| // Once the box has flashed green, lerp it back to black | ||
| const { onLoop } = useRenderLoop() | ||
| onLoop(() => { | ||
| boxRef.value?.material.color.lerp(black, 0.1) | ||
| }) | ||
| // onClick flash the box a color and update the counter | ||
| function handleClick(color: Color, ev) { | ||
| count.value++ | ||
| ev?.eventObject?.material.color.set(color) | ||
| // eslint-disable-next-line no-console | ||
| console.log(`Box ${boxRef.value.name} count=${count.value}`) | ||
| } | ||
| </script> | ||
|
|
||
| <template> | ||
| <TresMesh | ||
| ref="boxRef" | ||
| v-bind="props" | ||
| @click.self="ev => handleClick(green, ev)" | ||
| @pointer-missed="ev => handleClick(blue, ev)" | ||
| > | ||
| <TresBoxGeometry /> | ||
| <TresMeshStandardMaterial /> | ||
| <slot></slot> | ||
| </TresMesh> | ||
| </template> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,188 @@ | ||
| <script setup lang="ts"> | ||
| import { onUnmounted, ref } from 'vue' | ||
| import { | ||
| TresCanvas, | ||
| } from '@tresjs/core' | ||
| import { BasicShadowMap, NoToneMapping, SRGBColorSpace } from 'three' | ||
| import { OrbitControls } from '@tresjs/cientos' | ||
| import '@tresjs/leches/styles' | ||
| import Box from '../../components/Box.vue' | ||
| const gl = { | ||
| clearColor: '#202020', | ||
| shadows: true, | ||
| alpha: false, | ||
| shadowMapType: BasicShadowMap, | ||
| outputColorSpace: SRGBColorSpace, | ||
| toneMapping: NoToneMapping, | ||
| } | ||
| const showBox = ref(true) | ||
| const intervalRef = setInterval(() => { | ||
| // showBox.value = !showBox.value; | ||
| }, 1000) | ||
| onUnmounted(() => { | ||
| clearInterval(intervalRef) | ||
| }) | ||
| </script> | ||
|
|
||
| <template> | ||
| <TresCanvas | ||
| window-size | ||
| v-bind="gl" | ||
| @pointer-missed="event => console.log('pointer-missed', event)" | ||
| > | ||
| <TresPerspectiveCamera | ||
| :position="[0, 0, 6]" | ||
| :look-at="[0, 0, 0]" | ||
| /> | ||
| <OrbitControls /> | ||
|
|
||
| <TresDirectionalLight | ||
| :intensity="1" | ||
| :position="[1, 1, 1]" | ||
| /> | ||
| <TresAmbientLight :intensity="1" /> | ||
| <Box | ||
| :position="[0, 1.5, 0]" | ||
| name="A0" | ||
| > | ||
| <Box | ||
| :position="[-0.66, -1, 0]" | ||
| name="B0" | ||
| > | ||
| <Box | ||
| :position="[-0.66, -1, 0]" | ||
| name="C0" | ||
| > | ||
| <Box | ||
| :position="[-0.66, -1, 0]" | ||
| name="D0" | ||
| /> | ||
| <Box | ||
| :position="[0.66, -1, 0]" | ||
| name="D1" | ||
| /> | ||
| </Box> | ||
| <Box | ||
| :position="[0.66, -1, 0]" | ||
| name="C1" | ||
| > | ||
| <Box | ||
| :position="[0.66, -1, 0]" | ||
| name="D2" | ||
| /> | ||
| </Box> | ||
| </Box> | ||
| <Box | ||
| :position="[0.66, -1, 0]" | ||
| name="B1" | ||
| > | ||
| <Box | ||
| :position="[0.66, -1, 0]" | ||
| name="C2" | ||
| > | ||
| <Box | ||
| v-if="showBox" | ||
| :position="[0.66, -1, 0]" | ||
| name="D3" | ||
| /> | ||
| </Box> | ||
| </Box> | ||
| </Box> | ||
| <Box | ||
| :position="[0, 1.5, -3]" | ||
| name="A0" | ||
| > | ||
| <Box | ||
| :position="[-0.66, -1, 0]" | ||
| name="B0" | ||
| > | ||
| <Box | ||
| :position="[-0.66, -1, 0]" | ||
| name="C0" | ||
| > | ||
| <Box | ||
| :position="[-0.66, -1, 0]" | ||
| name="D0" | ||
| /> | ||
| <Box | ||
| :position="[0.66, -1, 0]" | ||
| name="D1" | ||
| /> | ||
| </Box> | ||
| <Box | ||
| :position="[0.66, -1, 0]" | ||
| name="C1" | ||
| > | ||
| <Box | ||
| :position="[0.66, -1, 0]" | ||
| name="D2" | ||
| /> | ||
| </Box> | ||
| </Box> | ||
| <Box | ||
| :position="[0.66, -1, 0]" | ||
| name="B1" | ||
| > | ||
| <Box | ||
| :position="[0.66, -1, 0]" | ||
| name="C2" | ||
| > | ||
| <Box | ||
| :position="[0.66, -1, 0]" | ||
| name="D3" | ||
| /> | ||
| </Box> | ||
| </Box> | ||
| </Box> | ||
| <Box | ||
| :position="[0, 1.5, -6]" | ||
| name="A0" | ||
| > | ||
| <Box | ||
| :position="[-0.66, -1, 0]" | ||
| name="B0" | ||
| > | ||
| <Box | ||
| :position="[-0.66, -1, 0]" | ||
| name="C0" | ||
| > | ||
| <Box | ||
| :position="[-0.66, -1, 0]" | ||
| name="D0" | ||
| /> | ||
| <Box | ||
| :position="[0.66, -1, 0]" | ||
| name="D1" | ||
| /> | ||
| </Box> | ||
| <Box | ||
| :position="[0.66, -1, 0]" | ||
| name="C1" | ||
| > | ||
| <Box | ||
| :position="[0.66, -1, 0]" | ||
| name="D2" | ||
| /> | ||
| </Box> | ||
| </Box> | ||
| <Box | ||
| :position="[0.66, -1, 0]" | ||
| name="B1" | ||
| > | ||
| <Box | ||
| :position="[0.66, -1, 0]" | ||
| name="C2" | ||
| > | ||
| <Box | ||
| :position="[0.66, -1, 0]" | ||
| name="D3" | ||
| /> | ||
| </Box> | ||
| </Box> | ||
| </Box> | ||
| </TresCanvas> | ||
| </template> |
Oops, something went wrong.