Example with props #8

stripuramallu3 · 2023-05-01T18:42:34Z

Could an example be provided where the Scene component has to receive props (for example for the mesh position)?
How does the worker.jsx file to pass the props to the Scene?

// Scene.jsx (a self contained webgl app)
export default function App() {
  return (
    <mesh>
      <boxGeometry />
    </mesh>
  )
}

drcmda · 2023-05-06T14:57:08Z

dom and canvas run into two different threads, it's up to you how you bridge that. broadcasts maybe, but there's no conventional way.

stripuramallu3 · 2023-05-10T22:56:38Z

Thank you! Was hoping there was a better/conventional way

sshmaxime · 2023-05-12T18:38:03Z

It would be so beautiful to pass a ref to the worker canvas and manipulate it from the main thread.

drcmda · 2023-05-14T16:46:02Z

if you guys have any ideas go ahead, would love to have a standard interface of some sort. i have never used broadcasts before but it's gotta be something that works both in a worker and in a main thread.

mhmdjaw · 2023-12-18T21:27:29Z

Does that also mean that <Html> from drei doesn't work in offscreen canvas? I tried it and it doesn't show any HTML elements.

rob-myers · 2024-03-03T23:30:51Z

To get this working, we can patch @react-three/[email protected] as follows:

Show patches/@react-three+offscreen+0.0.8.patch

diff --git a/node_modules/@react-three/offscreen/dist/Canvas.d.ts b/node_modules/@react-three/offscreen/dist/Canvas.d.ts
index 7084e67..e79c825 100644
--- a/node_modules/@react-three/offscreen/dist/Canvas.d.ts
+++ b/node_modules/@react-three/offscreen/dist/Canvas.d.ts
@@ -13,5 +13,6 @@ export interface CanvasProps extends Omit<RenderProps<HTMLCanvasElement>, 'size'
     eventSource?: HTMLElement | React.MutableRefObject<HTMLElement>;
     /** The event prefix that is cast into canvas pointer x/y events, default: "offset" */
     eventPrefix?: 'offset' | 'client' | 'page' | 'layer' | 'screen';
+    sceneProps?: Record<string, any>;
 }
 export declare function Canvas({ eventSource, worker, fallback, style, className, id, ...props }: CanvasProps): JSX.Element;
diff --git a/node_modules/@react-three/offscreen/dist/index.mjs b/node_modules/@react-three/offscreen/dist/index.mjs
index acf1918..9282957 100644
--- a/node_modules/@react-three/offscreen/dist/index.mjs
+++ b/node_modules/@react-three/offscreen/dist/index.mjs
@@ -86,6 +86,7 @@ function Canvas({
   style,
   className,
   id,
+  sceneProps = {},
   ...props
 }) {
   const [shouldFallback, setFallback] = React.useState(false);
@@ -111,7 +112,7 @@ function Canvas({
     worker.postMessage({
       type: 'init',
       payload: {
-        props,
+        props: { sceneProps, ...props },
         drawingSurface: offscreen,
         width: canvas.clientWidth,
         height: canvas.clientHeight,
@@ -181,9 +182,9 @@ function Canvas({
     if (!worker) return;
     worker.postMessage({
       type: 'props',
-      payload: props
+      payload: { sceneProps, ...props }
     });
-  }, [worker, props]);
+  }, [worker, props, sceneProps]);
   return shouldFallback ? /*#__PURE__*/React.createElement(Canvas$1, _extends({
     id: id,
     className: className,
@@ -203,7 +204,7 @@ function Canvas({
   });
 }
 
-function render(children) {
+function render(component) {
   extend(THREE);
   let root;
   let dpr = [1, 2];
@@ -218,6 +219,7 @@ function render(children) {
   const handleInit = payload => {
     const {
       props,
+      sceneProps,
       drawingSurface: canvas,
       width,
       top,
@@ -281,7 +283,7 @@ function render(children) {
       });
 
       // Render children once
-      root.render(children);
+      root.render(React.createElement(component, sceneProps));
     } catch (e) {
       postMessage({
         type: 'error',
@@ -317,14 +319,15 @@ function render(children) {
       stopPropagation() {}
     });
   };
-  const handleProps = payload => {
+  const handleProps = ({ sceneProps, ...payload }) => {
     if (!root) return;
     if (payload.dpr) dpr = payload.dpr;
     root.configure({
       size,
       dpr,
-      ...payload
+      ...payload,
     });
+    root.render(React.createElement(component, sceneProps));
   };
   const handlerMap = {
     resize: handleResize,
diff --git a/node_modules/@react-three/offscreen/dist/render.d.ts b/node_modules/@react-three/offscreen/dist/render.d.ts
index 2be3f9c..0cceb2b 100644
--- a/node_modules/@react-three/offscreen/dist/render.d.ts
+++ b/node_modules/@react-three/offscreen/dist/render.d.ts
@@ -1,2 +1,2 @@
 /// <reference types="react" />
-export declare function render(children: React.ReactNode): void;
+export declare function render<P extends {}>(component: React.FunctionComponent<P> | React.ComponentClass<P>): void;

Finally, restructure the project a bit:

// create-worker.js
// separate file fixes HMR
export const worker = new Worker(new URL('./worker.jsx', import.meta.url), { type: 'module' });

// App.jsx
import { worker } from "./create-worker";
// ...

  return (
      <Canvas
        fallback={<Scene testProp="hello, world! (fallback)" />}
        worker={worker}
        sceneProps={{ foo: "hello, world!" }}
      />
  );

// worker.jsx
import { render } from '@react-three/offscreen';
import Scene from "./Scene";

// Send component instead of ReactElement
render(Scene);

richi-coder · 2024-05-03T16:54:40Z

Does that also mean that <Html> from drei doesn't work in offscreen canvas? I tried it and it doesn't show any HTML elements.

How have you dealt with this so far? @mhmdjaw

ShivanshVij mentioned this issue Aug 11, 2024

feat: passing props to worker #22

Closed

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Example with props #8

Example with props #8

stripuramallu3 commented May 1, 2023 •

edited

Loading

drcmda commented May 6, 2023

stripuramallu3 commented May 10, 2023

sshmaxime commented May 12, 2023 •

edited

Loading

drcmda commented May 14, 2023 •

edited

Loading

mhmdjaw commented Dec 18, 2023

rob-myers commented Mar 3, 2024

richi-coder commented May 3, 2024

Example with props #8

Example with props #8

Comments

stripuramallu3 commented May 1, 2023 • edited Loading

drcmda commented May 6, 2023

stripuramallu3 commented May 10, 2023

sshmaxime commented May 12, 2023 • edited Loading

drcmda commented May 14, 2023 • edited Loading

mhmdjaw commented Dec 18, 2023

rob-myers commented Mar 3, 2024

richi-coder commented May 3, 2024

stripuramallu3 commented May 1, 2023 •

edited

Loading

sshmaxime commented May 12, 2023 •

edited

Loading

drcmda commented May 14, 2023 •

edited

Loading