Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

fix: raycaster does not work properly when scene is not in full screen #304

Merged
merged 21 commits into from
Jun 19, 2023
Merged

fix: raycaster does not work properly when scene is not in full screen #304

Show file tree
Hide file tree
Changes from 1 commit
Commits
Show all changes
21 commits
Select commit Hold shift + click to select a range
efcfcbf
chore: tinkering on possible solutions concerning pointer event handling
Tinoooo Jun 1, 2023
bbd9fbe
chore: made click listeners work with changed architectures concernin…
Tinoooo Jun 1, 2023
06be907
chore: changed callback structure
Tinoooo Jun 13, 2023
62af8e0
chore: made pointer move work
Tinoooo Jun 13, 2023
f069d36
chore: made other pointer events work
Tinoooo Jun 13, 2023
c8d32bd
chore: code cleanup
Tinoooo Jun 13, 2023
d2cca14
chore: added deregistration of pointer event handlers for when an Oje…
Tinoooo Jun 14, 2023
ba9aedc
chore: handled the case when the pointer leaves an Object3D but also …
Tinoooo Jun 14, 2023
0625dda
Merge remote-tracking branch 'origin/main' into bugfix/282-raycaster-…
Tinoooo Jun 14, 2023
d2ef57a
chore: replaced useRaycaster
Tinoooo Jun 14, 2023
27a774e
Merge branch 'main' into bugfix/282-raycaster-does-not-work-properly-…
alvarosabu Jun 15, 2023
a740a8e
fix: raycaster works properly when scene does not take up the whole v…
Tinoooo Jun 16, 2023
11d5bff
chore: made types in nodeOps a little more specific
Tinoooo Jun 16, 2023
8a4c3f4
chore: improved click event handling
Tinoooo Jun 16, 2023
d540591
docs: adjusted events page
Tinoooo Jun 16, 2023
41a32b9
chore: fixed typo
Tinoooo Jun 16, 2023
51c3a70
chore: cleanup
Tinoooo Jun 16, 2023
de1bb54
chore: adjusted code so tests pass
Tinoooo Jun 16, 2023
ee80ee9
Merge branch 'main' into bugfix/282-raycaster-does-not-work-properly-…
Tinoooo Jun 16, 2023
80f6a5d
chore: merge latest main
alvarosabu Jun 19, 2023
7766fce
Merge remote-tracking branch 'origin/main' into bugfix/282-raycaster-…
alvarosabu Jun 19, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
Prev Previous commit
Next Next commit
chore: handled the case when the pointer leaves an Object3D but also … 
…the canvas
  • Loading branch information
@Tinoooo
Tinoooo committed Jun 14, 2023
commit ba9aedc579dfcd369d7fae1262003f947e1a8530
6 changes: 3 additions & 3 deletions playground/src/components/TheEvents.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -15,7 +15,7 @@ const state = reactive({

function onClick(ev) {
if (ev) {
// console.log('click', ev)
console.log('click', ev)
ev.object.material.color.set('#008080')
}
}
Expand All @@ -29,13 +29,13 @@ function onPointerEnter(ev) {

function onPointerMove(ev) {
if (ev) {
// console.log('move', ev)
console.log('move', ev)
}
}

function onPointerLeave(ev) {
if (ev) {
// console.log('leave', ev)
console.log('leave', ev)
/* ev.object.material.color.set('#efefef') */
}
}
Expand Down
2 changes: 0 additions & 2 deletions src/composables/usePointerEventHandler/index.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -15,8 +15,6 @@ type EventProps = {
onPointerLeave?: CallbackFnPointerLeave
}

//TODO make pointerLeave trigger when canvas is left

export const usePointerEventHandler = () => {
const objectsWithEventListeners = {
click: new Map<Object3D, CallbackFn>(),
Expand Down
6 changes: 6 additions & 0 deletions src/composables/useRaycaster2/index.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -83,12 +83,17 @@ export const useRaycaster2 = (objects: Ref<THREE.Object3D[]>) => {
if (clicked) triggerEventHook(eventHookClick, event)
}

const onPointerLeave = (event: PointerEvent) => {
eventHookPointerMove.trigger({ event, intersects: [] })
}

const unwatch = watchEffect(() => {
if (!canvas?.value) return

canvas.value.addEventListener('pointerdown', onPointerDown)
canvas.value.addEventListener('pointermove', onPointerMove)
canvas.value.addEventListener('pointerup', onPointerUp)
canvas.value.addEventListener('pointerleave', onPointerLeave)

unwatch()
})
Expand All @@ -98,6 +103,7 @@ export const useRaycaster2 = (objects: Ref<THREE.Object3D[]>) => {
canvas.value.removeEventListener('pointerdown', onPointerDown)
canvas.value.removeEventListener('pointermove', onPointerMove)
canvas.value.removeEventListener('pointerup', onPointerUp)
canvas.value.removeEventListener('pointerleave', onPointerLeave)
})

return {
Expand Down