# \#events

**URL:** https://discourse.threejs.org/tag/events/538.md

[Latest](https://discourse.threejs.org/latest.md) · [Categories](https://discourse.threejs.org/categories.md) · [Tags](https://discourse.threejs.org/tags.md)

---

## [BatchedMesh recursive raycasting](https://discourse.threejs.org/t/batchedmesh-recursive-raycasting/89738)

<div class="topic-metadata">

**Author:** [@marluc](https://discourse.threejs.org/u/marluc)\
**Replies:** 1\
**Last updated:** [February 9, 2026, 9:03pm UTC](https://discourse.threejs.org/t/batchedmesh-recursive-raycasting/89738 "2026-02-09T21:03:40Z")

</div>

Hi, I’m working on an app with R3F where a lot of the model handling is based on BatchedMesh. I managed to implement per-batch clipping, but I’m now stuck with intersections between batches that are not clipped but are…

---

## [How to set events on \<PresentationControls\> React three fiber drei plugin?](https://discourse.threejs.org/t/how-to-set-events-on-presentationcontrols-react-three-fiber-drei-plugin/73681)

<div class="topic-metadata">

**Author:** [@prenx4x](https://discourse.threejs.org/u/prenx4x)\
**Replies:** 0\
**Last updated:** [November 5, 2024, 9:11pm UTC](https://discourse.threejs.org/t/how-to-set-events-on-presentationcontrols-react-three-fiber-drei-plugin/73681 "2024-11-05T21:11:45Z")

</div>

Hello, I have code like this - \<Canvas gl={{ preserveDrawingBuffer: false, antialias: true, }} \> \<PresentationControls polar={\[-Math.PI / 2, Math.PI / 2\]} …

---

## [onClick rapier physics](https://discourse.threejs.org/t/onclick-rapier-physics/65939)

<div class="topic-metadata">

**Author:** [@AMJAD](https://discourse.threejs.org/u/AMJAD)\
**Replies:** 1\
**Last updated:** [May 24, 2024, 6:28pm UTC](https://discourse.threejs.org/t/onclick-rapier-physics/65939 "2024-05-24T18:28:33Z")

</div>

please how to add onClick to this rigid body I mean to all the content it have when I click it should console something or have treger I try to put onClick on the mesh but it don’t work ever \<RigidBody ref={api}…

---

## [Mouseup problem with orbit controls](https://discourse.threejs.org/t/mouseup-problem-with-orbit-controls/64589)

<div class="topic-metadata">

**Author:** [@Achim\_Rautenberg](https://discourse.threejs.org/u/Achim_Rautenberg)\
**Replies:** 0\
**Last updated:** [April 25, 2024, 7:20am UTC](https://discourse.threejs.org/t/mouseup-problem-with-orbit-controls/64589 "2024-04-25T07:20:58Z")

</div>

I had the issue of the mouseup event not fireing for an unkown reason. Using the chrome dev tool I was able to see that orbit controls use the mouse events as well. Then I removed these events in the dev tools, just for…

---

## [Detect pointerUp outside object](https://discourse.threejs.org/t/detect-pointerup-outside-object/62628)

<div class="topic-metadata">

**Author:** [@brunoat2](https://discourse.threejs.org/u/brunoat2)\
**Replies:** 2\
**Last updated:** [March 11, 2024, 7:41pm UTC](https://discourse.threejs.org/t/detect-pointerup-outside-object/62628 "2024-03-11T19:41:06Z")

</div>

My objective is very simple, but for some reason I am having trouble with it. I have an implementation where I click and drag on a mesh, and change its height according to the mouse position. At first I used the stardard…

---

## [Three.ez - library for events, drag & drop, binding, focus management, smart rendering, tweening and more](https://discourse.threejs.org/t/three-ez-library-for-events-drag-drop-binding-focus-management-smart-rendering-tweening-and-more/56007)

<div class="topic-metadata">

**Author:** [@agargaro](https://discourse.threejs.org/u/agargaro)\
**Replies:** 5\
**Last updated:** [March 10, 2024, 11:51am UTC](https://discourse.threejs.org/t/three-ez-library-for-events-drag-drop-binding-focus-management-smart-rendering-tweening-and-more/56007 "2024-03-10T11:51:24Z")

</div>

three.ez Simplify your three.js application development with three.ez! Extend the functionalities of Object3D and Scene classes, making their usage more straightforward, and introduce utility classes. import { Scene,…

---

## [Interactive gltf animations and parameters with mouse and external events](https://discourse.threejs.org/t/interactive-gltf-animations-and-parameters-with-mouse-and-external-events/15982)

<div class="topic-metadata">

**Author:** [@wassfila](https://discourse.threejs.org/u/wassfila)\
**Replies:** 1\
**Last updated:** [February 27, 2024, 6:51am UTC](https://discourse.threejs.org/t/interactive-gltf-animations-and-parameters-with-mouse-and-external-events/15982 "2024-02-27T06:51:45Z")

</div>

Hi all, I would like to introduce this project that has some 12 isolated examples that gradually introduce interactivity concepts. Hard coding parameter update rules in js is easy but have to be done for every object. My…

---

## [WebXR Controller Event - "selectstart" fired before the controller position/orientation has been updated](https://discourse.threejs.org/t/webxr-controller-event-selectstart-fired-before-the-controller-position-orientation-has-been-updated/44430)

<div class="topic-metadata">

**Author:** [@gianoseduto](https://discourse.threejs.org/u/gianoseduto)\
**Replies:** 2\
**Last updated:** [December 18, 2023, 9:25am UTC](https://discourse.threejs.org/t/webxr-controller-event-selectstart-fired-before-the-controller-position-orientation-has-been-updated/44430 "2023-12-18T09:25:06Z")

</div>

Hi, I’m using WebXR, I already read every single post here and tried out every single example available. Now I’m stuck. My task: I have to check if the interaction on the scene with the controller start pointing a spec…

---

## [Get position of pointer event \*relative to canvas height\*](https://discourse.threejs.org/t/get-position-of-pointer-event-relative-to-canvas-height/57047)

<div class="topic-metadata">

**Author:** [@mhfaust](https://discourse.threejs.org/u/mhfaust)\
**Replies:** 2\
**Last updated:** [October 16, 2023, 1:51pm UTC](https://discourse.threejs.org/t/get-position-of-pointer-event-relative-to-canvas-height/57047 "2023-10-16T13:51:53Z")

</div>

I need to know whether or not a downPointer event was registered within the upper-half of the canvas. I don’t see any information in the event object that indicates the height of the canvas relative to the measure of the…

---

## [How to live stream animations of gltf and achieve frame rate independence](https://discourse.threejs.org/t/how-to-live-stream-animations-of-gltf-and-achieve-frame-rate-independence/38412)

<div class="topic-metadata">

**Author:** [@r0bert0](https://discourse.threejs.org/u/r0bert0)\
**Replies:** 4\
**Last updated:** [August 23, 2023, 8:20am UTC](https://discourse.threejs.org/t/how-to-live-stream-animations-of-gltf-and-achieve-frame-rate-independence/38412 "2023-08-23T08:20:03Z")

</div>

Hello there, I have a gltf model and receive animation data from a server for that model. I periodically receive frames from the server. Each frame consists of morph Targets and bone transforms. My goal is to animate t…

---

## [Make only the ThreeJS model and elements underneath the canvas interactive](https://discourse.threejs.org/t/make-only-the-threejs-model-and-elements-underneath-the-canvas-interactive/54865)

<div class="topic-metadata">

**Author:** [@oldboy](https://discourse.threejs.org/u/oldboy)\
**Replies:** 5\
**Last updated:** [August 13, 2023, 1:45pm UTC](https://discourse.threejs.org/t/make-only-the-threejs-model-and-elements-underneath-the-canvas-interactive/54865 "2023-08-13T13:45:20Z")

</div>

I am new to ThreeJS, so excuse me if this is a dumb question. I have a canvas that takes up the whole viewport to keep things simple. The canvas is placed at the top of the stacking context so that the model is always vi…

---

## [R3f events is not working in ios 12](https://discourse.threejs.org/t/r3f-events-is-not-working-in-ios-12/53488)

<div class="topic-metadata">

**Author:** [@neciszhang](https://discourse.threejs.org/u/neciszhang)\
**Replies:** 4\
**Last updated:** [July 6, 2023, 11:06am UTC](https://discourse.threejs.org/t/r3f-events-is-not-working-in-ios-12/53488 "2023-07-06T11:06:13Z")

</div>

Hi, r3f events is not working in ios 12.2. I use pepjs polyfill and set canvas with “touch-action: none” ,but it’s not work. basic demo

---

## [EventEmitter failing when uploading website](https://discourse.threejs.org/t/eventemitter-failing-when-uploading-website/52735)

<div class="topic-metadata">

**Author:** [@Alexander\_Rubino](https://discourse.threejs.org/u/Alexander_Rubino)\
**Replies:** 8\
**Last updated:** [June 12, 2023, 9:03pm UTC](https://discourse.threejs.org/t/eventemitter-failing-when-uploading-website/52735 "2023-06-12T21:03:40Z")

</div>

Hello. I don’t know if this is ok for this forum. But I have recently published my Three.js website, where I use EventEmitter. I have implemented this with node.js (npm), and this works great. But now that I have launch…

---

## [Trigger when a new object is added or removed of the scene](https://discourse.threejs.org/t/trigger-when-a-new-object-is-added-or-removed-of-the-scene/46166)

<div class="topic-metadata">

**Author:** [@TheCatalan](https://discourse.threejs.org/u/TheCatalan)\
**Replies:** 1\
**Last updated:** [December 24, 2022, 5:51pm UTC](https://discourse.threejs.org/t/trigger-when-a-new-object-is-added-or-removed-of-the-scene/46166 "2022-12-24T17:51:42Z")

</div>

Hi, I’m creating a ground plane to project the shadow, and I would like to detect when a new object is added or removed, in other to update the Z of that ground plane. Is this possible? Like an event watcher to detect …

---

## [Performance issue after adding onClick event](https://discourse.threejs.org/t/performance-issue-after-adding-onclick-event/46023)

<div class="topic-metadata">

**Author:** [@lukas2](https://discourse.threejs.org/u/lukas2)\
**Replies:** 3\
**Last updated:** [December 20, 2022, 4:05pm UTC](https://discourse.threejs.org/t/performance-issue-after-adding-onclick-event/46023 "2022-12-20T16:05:56Z")

</div>

I have already spent many hours on this, but I have no idea why this is happening. When I try to add any event to group or mesh (for example simple onClick), performance drops drastically. Zooming takes a few seconds. F…

---

## [zoomEnd, zoomStart events](https://discourse.threejs.org/t/zoomend-zoomstart-events/45707)

<div class="topic-metadata">

**Author:** [@gmiliotis](https://discourse.threejs.org/u/gmiliotis)\
**Replies:** 3\
**Last updated:** [December 13, 2022, 6:40pm UTC](https://discourse.threejs.org/t/zoomend-zoomstart-events/45707 "2022-12-13T18:40:59Z")

</div>

I want to take some action right after zooming has finished, something like document.addEventListener('zoomEnd', onZoomEnd, false) This obviously doesnt work. How can I do this please. Does the scene or the camera (or …

---

## [How to morph on click?](https://discourse.threejs.org/t/how-to-morph-on-click/45515)

<div class="topic-metadata">

**Author:** [@VOX](https://discourse.threejs.org/u/VOX)\
**Replies:** 8\
**Last updated:** [December 10, 2022, 8:20pm UTC](https://discourse.threejs.org/t/how-to-morph-on-click/45515 "2022-12-10T20:20:56Z")

</div>

Hey everyone! I’m extremely new to threejs and have been teaching myself everything this far. But I have a question I can’t seem to find the answer to. I have two click eventListeners that change my perlin noise from on…

---

## [Handling multiple mouse move events](https://discourse.threejs.org/t/handling-multiple-mouse-move-events/44668)

<div class="topic-metadata">

**Author:** [@Nikhil\_Shaji](https://discourse.threejs.org/u/Nikhil_Shaji)\
**Replies:** 2\
**Last updated:** [November 14, 2022, 11:06am UTC](https://discourse.threejs.org/t/handling-multiple-mouse-move-events/44668 "2022-11-14T11:06:17Z")

</div>

Hi, The project in work on requires multiple mouse move events which need to be handled at once. For example: 1: MouseMove event which run a real-time coordinated updater using ray caster 2: MouseMove event which all…

---

## [How to click on a cube in the threejs.org/editor?](https://discourse.threejs.org/t/how-to-click-on-a-cube-in-the-threejs-org-editor/44277)

<div class="topic-metadata">

**Author:** [@sergeylysov](https://discourse.threejs.org/u/sergeylysov)\
**Replies:** 0\
**Last updated:** [November 2, 2022, 6:29pm UTC](https://discourse.threejs.org/t/how-to-click-on-a-cube-in-the-threejs-org-editor/44277 "2022-11-02T18:29:59Z")

</div>

Hello, I’m a beginner. How can I make it so that when you click on the cube, a message is printed to the console?

---

## [How to remove event listeners after you've clicked another event listener](https://discourse.threejs.org/t/how-to-remove-event-listeners-after-youve-clicked-another-event-listener/43990)

<div class="topic-metadata">

**Author:** [@Vornzy](https://discourse.threejs.org/u/Vornzy)\
**Replies:** 2\
**Last updated:** [October 25, 2022, 12:48pm UTC](https://discourse.threejs.org/t/how-to-remove-event-listeners-after-youve-clicked-another-event-listener/43990 "2022-10-25T12:48:49Z")

</div>

Hi guys, I have event listeners for when I want to hover over something, the cursor will turn into a pointer, and similarly, when mouseout it returns to default. And that’s great and works perfectly. but then I have an…

---

## [Adding event listener to the mesh object?](https://discourse.threejs.org/t/adding-event-listener-to-the-mesh-object/43845)

<div class="topic-metadata">

**Author:** [@Uros\_Cvijanovic](https://discourse.threejs.org/u/Uros_Cvijanovic)\
**Replies:** 3\
**Last updated:** [October 21, 2022, 9:31am UTC](https://discourse.threejs.org/t/adding-event-listener-to-the-mesh-object/43845 "2022-10-21T09:31:06Z")

</div>

Is it possible to add the event Listener on a particular Mesh object or the only method to make the interactive clickable event is using raycaster?

---

## [Mouse click not working in button](https://discourse.threejs.org/t/mouse-click-not-working-in-button/43667)

<div class="topic-metadata">

**Author:** [@Pravin\_Poudel](https://discourse.threejs.org/u/Pravin_Poudel)\
**Replies:** 11\
**Last updated:** [October 16, 2022, 1:56pm UTC](https://discourse.threejs.org/t/mouse-click-not-working-in-button/43667 "2022-10-16T13:56:04Z")

</div>

i am trying to add this code in my code where i want to have this button in my scene ! function performAnnotation(event: MouseEvent) { console.log(event) console.log('hello') } function loadAnnotationIntoScene()…

---

## [Listening to an click event inside this OOP file structure](https://discourse.threejs.org/t/listening-to-an-click-event-inside-this-oop-file-structure/40445)

<div class="topic-metadata">

**Author:** [@JimYuan](https://discourse.threejs.org/u/JimYuan)\
**Replies:** 7\
**Last updated:** [July 18, 2022, 2:37pm UTC](https://discourse.threejs.org/t/listening-to-an-click-event-inside-this-oop-file-structure/40445 "2022-07-18T14:37:29Z")

</div>

Hi, I would like to utilize Bruno Simon’s OOP file structure to my personal project. @HsiaoYao A Three.js Boilerplate based on OOP - Showcase - three.js forum (threejs.org) One thing I’ve been working on is by clickin…

---

## [Is It Possible Array IMG's to TextureLoader (Script Edit)](https://discourse.threejs.org/t/is-it-possible-array-imgs-to-textureloader-script-edit/39323)

<div class="topic-metadata">

**Author:** [@sawacrow](https://discourse.threejs.org/u/sawacrow)\
**Replies:** 0\
**Last updated:** [June 16, 2022, 11:06am UTC](https://discourse.threejs.org/t/is-it-possible-array-imgs-to-textureloader-script-edit/39323 "2022-06-16T11:06:22Z")

</div>

Hi guys. I am a beginner on Three.js. I need some help. I want to use that script. When IMG hovers, the image does glitch effects. if I understood correctly, The following codes update the object’s Texture. When it …

---

## [Raycast threejs touch event not working](https://discourse.threejs.org/t/raycast-threejs-touch-event-not-working/34227)

<div class="topic-metadata">

**Author:** [@naonao\_naonvl](https://discourse.threejs.org/u/naonao_naonvl)\
**Replies:** 10\
**Last updated:** [June 14, 2022, 8:00am UTC](https://discourse.threejs.org/t/raycast-threejs-touch-event-not-working/34227 "2022-06-14T08:00:03Z")

</div>

I’ve been working on threejs mouse raycast with fabricjs, and it is working now here but the problem is the object didn’t move if i was using smartphone which is using touch. Should i create another event listener for to…

---

## [How to detect pure click on mesh?](https://discourse.threejs.org/t/how-to-detect-pure-click-on-mesh/38667)

<div class="topic-metadata">

**Author:** [@Tanjil\_Hossain](https://discourse.threejs.org/u/Tanjil_Hossain)\
**Replies:** 5\
**Last updated:** [May 30, 2022, 1:09pm UTC](https://discourse.threejs.org/t/how-to-detect-pure-click-on-mesh/38667 "2022-05-30T13:09:28Z")

</div>

I’m trying to detect pure click on any mesh. I can move the model freely using the SHIFT+Dragging mouse. But there is an onClick event. So when I’m dragging the model pressing the SHIFT key it is fine but when I release …

---

## [How can I detect click outside of the model?](https://discourse.threejs.org/t/how-can-i-detect-click-outside-of-the-model/38205)

<div class="topic-metadata">

**Author:** [@Tanjil\_Hossain](https://discourse.threejs.org/u/Tanjil_Hossain)\
**Replies:** 0\
**Last updated:** [May 17, 2022, 5:25am UTC](https://discourse.threejs.org/t/how-can-i-detect-click-outside-of-the-model/38205 "2022-05-17T05:25:04Z")

</div>

I want to fire an event when I click outside of the model. I can handle event on click of the model but I need to detect click outside of the model. When I click outside of the model I want to fire an event that will res…

---

## [ScrollY animation on iphone incorrect after first bounce on bottom of page](https://discourse.threejs.org/t/scrolly-animation-on-iphone-incorrect-after-first-bounce-on-bottom-of-page/35367)

<div class="topic-metadata">

**Author:** [@Yogi\_Parish](https://discourse.threejs.org/u/Yogi_Parish)\
**Replies:** 0\
**Last updated:** [February 27, 2022, 8:17am UTC](https://discourse.threejs.org/t/scrolly-animation-on-iphone-incorrect-after-first-bounce-on-bottom-of-page/35367 "2022-02-27T08:17:09Z")

</div>

I am using the window.scrollY event listener to get the scroll amount on my page and I set an animatino fram accordingly: scroll = window.scrollY //inside the event listener ... function animationLoop() { ... s…

---

## [Draw polyline in realtime and exit on condition](https://discourse.threejs.org/t/draw-polyline-in-realtime-and-exit-on-condition/33997)

<div class="topic-metadata">

**Author:** [@NHQue](https://discourse.threejs.org/u/NHQue)\
**Replies:** 3\
**Last updated:** [January 23, 2022, 8:54pm UTC](https://discourse.threejs.org/t/draw-polyline-in-realtime-and-exit-on-condition/33997 "2022-01-23T20:54:13Z")

</div>

Hello :slight\_smile: maybe this is a little bit more JavaScript related, but I really got stuck on that one. I have a function drawLine() that adds points on click-events and then visualizes the line in real time. Now…

---

## [Onclick is not working on CSS3DObject](https://discourse.threejs.org/t/onclick-is-not-working-on-css3dobject/31108)

<div class="topic-metadata">

**Author:** [@RSpeekenbrink](https://discourse.threejs.org/u/RSpeekenbrink)\
**Replies:** 3\
**Last updated:** [October 23, 2021, 7:20pm UTC](https://discourse.threejs.org/t/onclick-is-not-working-on-css3dobject/31108 "2021-10-23T19:20:25Z")

</div>

Hi! When I make a CSS3DObject as follows: element = document.createElement('div'); element.innerHTML = 'Test'; element.setAttribute('onclick', 'alert(1)'); const object = new CSS3DObject(element); object.po…

[Next page](https://discourse.threejs.org/tag/events/538.md?match_all_tags=true&page=1&tags%5B%5D=events)
