Implement with three-devtools

[SiegeSailor]

Here is the example code for three-devtools to observe our scene and renderer.

if (typeof __THREE_DEVTOOLS__ !== 'undefined') {
  __THREE_DEVTOOLS__.dispatchEvent(new CustomEvent('observe', { detail: scene }));
  __THREE_DEVTOOLS__.dispatchEvent(new CustomEvent('observe', { detail: renderer }));
}

The question is, how do we imply this tool with react-three-fiber since we are using JSX? From my understanding, <Canvas /> is equivalent to renderer, and the way we insert components into the <Canvas /> tag is equivalent to the way we use scene.add(). In that way, we actually don't have a declarative variable for both scene and renderer, so what do we use three-devtools with react-three-fiber?

[drcmda]

in its essence r3f is just a custom renderer that takes jsx components and renders them into a target, which is a regular threejs scene.

<Canvas onCreated={state => {
  if (typeof __THREE_DEVTOOLS__ !== 'undefined') {
    __THREE_DEVTOOLS__.dispatchEvent(new CustomEvent('observe', { detail: state.scene }));
    __THREE_DEVTOOLS__.dispatchEvent(new CustomEvent('observe', { detail: state.gl }));
  }
})>

notice that react users have dev tools for free https://twitter.com/0xca0a/status/1135583842683838464 though threes are certainly more specific and relevant.

[drcmda]

i could make this a default btw - are there any downsides to this? for instance performance and such? "observe" sounds pretty heavy ... @gsimone @RenaudRohlinger

[RenaudRohlinger]

@drcmda It would mean this bit code goes into production too. I'd rather put that in the doc since we already got the react dev tool to analyze the scene and now r3f-perf for monitoring performances. I think users of this dev tool isn't a majority and should use it as an extension (so as the implementation should be too) to r3f.
For instance, we could support it in the starters. I like the idea to keep r3f only for the essential.

[SiegeSailor]

@drcmda Thanks for offering the solution. The following is what I have done with TypeScript.

import { Canvas, CanvasContext } from 'react-three-fiber';
import { withControls } from 'react-three-gui';

/**
 * Assign type `CanvasContent` here if you have wrapped `Canvas` with HOC such as `withControls` from `react-three-gui`.
 */
onCreated={(state: CanvasContext) => {
        const __THREE_DEVTOOLS__ = window['__THREE_DEVTOOLS__'];

        if (typeof __THREE_DEVTOOLS__ !== 'undefined') {
          __THREE_DEVTOOLS__.dispatchEvent(new CustomEvent('observe', { detail: state.scene }));
          __THREE_DEVTOOLS__.dispatchEvent(new CustomEvent('observe', { detail: state.gl }));
        }
      }}