# Offscreen canvas and orbit controls

**URL:** <https://discourse.threejs.org/t/offscreen-canvas-and-orbit-controls/8173>\
**Category:** Questions\
**Tags:** offscreen-canvas\
**Created:** [June 19, 2019, 10:39am UTC](https://discourse.threejs.org/t/offscreen-canvas-and-orbit-controls/8173 "2019-06-19T10:39:49Z")\
**Posts on this page:** 5\
**Page:** 1

<div class="post-metadata">

**Author:** ![Alejandro\_Insua](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/alejandro_insua/32/3958_2.png) [@Alejandro\_Insua](https://discourse.threejs.org/u/Alejandro_Insua)\
**Post date:** [June 19, 2019, 10:39am UTC](https://discourse.threejs.org/t/offscreen-canvas-and-orbit-controls/8173/1 "2019-06-19T10:39:49Z")

</div>

Hi all.

I am trying to use the offscreen canvas in my 3d threejs based viewer.

One of my problems is that I don’t know how to interact with my scene with an orbitControls in the webworker thread.

As far as I know, webworkers cannot interact with dom objects.

Is there any workarraound for this?

Best regards

---

<div class="post-metadata">

**Author:** ![Fyrestar](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/fyrestar/32/52793_2.png) [@Fyrestar](https://discourse.threejs.org/u/Fyrestar)\
**Post date:** [June 19, 2019, 10:44am UTC](https://discourse.threejs.org/t/offscreen-canvas-and-orbit-controls/8173/2 "2019-06-19T10:44:27Z")

</div>

Only thing you need is the camera in your worker, so use the OrbitControls in your main thread and just snycrhonize the camera quaternion and world position with your thread.

---

<div class="post-metadata">

**Author:** ![Alejandro\_Insua](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/alejandro_insua/32/3958_2.png) [@Alejandro\_Insua](https://discourse.threejs.org/u/Alejandro_Insua)\
**Post date:** [June 19, 2019, 10:44am UTC](https://discourse.threejs.org/t/offscreen-canvas-and-orbit-controls/8173/3 "2019-06-19T10:44:41Z")

</div>

I have found an example:

[https://threejsfundamentals.org/threejs/threejs-offscreencanvas-w-orbitcontrols.html](https://threejsfundamentals.org/threejs/threejs-offscreencanvas-w-orbitcontrols.html)

Best regards

---

<div class="post-metadata">

**Author:** ![puxiao](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/puxiao/32/17266_2.png) [@puxiao](https://discourse.threejs.org/u/puxiao)\
**Post date:** [March 24, 2021, 4:42am UTC](https://discourse.threejs.org/t/offscreen-canvas-and-orbit-controls/8173/4 "2021-03-24T04:42:25Z")

</div>

I wrote an example, you can view:  
[https://github.com/puxiao/using-orbitcontrols-in-worker](https://github.com/puxiao/using-orbitcontrols-in-worker)

---

<div class="post-metadata">

**Author:** ![BenedictLang](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/benedictlang/32/26387_2.png) [@BenedictLang](https://discourse.threejs.org/u/BenedictLang)\
**Post date:** [November 20, 2023, 8:32pm UTC](https://discourse.threejs.org/t/offscreen-canvas-and-orbit-controls/8173/5 "2023-11-20T20:32:42Z")

</div>

What if I have a raycasting, TransformControls and Keyevents?

- Keep user interactions, event handling (like OrbitControls), and any operations directly related to the DOM or user input in the main thread.
- Synchronize changes in the camera’s properties (position, rotation, etc.) between the main thread and the worker thread for rendering updates.
- Handle interactions like raycasting or object transformations in the main thread and communicate the necessary data or results to the worker for rendering updates.

This means it is not necessary to have proxies for the controls like [puxiao](https://discourse.threejs.org/u/puxiao) suggests in his example to pass the events if the controls are camera related?