React-three-fiber: Adding, removing, re-adding <primitive object={scene} /> causes no rendering

Created on 19 Jan 2020  路  5Comments  路  Source: pmndrs/react-three-fiber

Here's a codesandbox: https://codesandbox.io/s/scene-issue-nhqmn

You can see there are two objects that should flash on and off screen, one is a scene created manually by new THREE.Scene(), and the other is native r3f

      {visible && <primitive object={sceneState} />}
      {visible && (
        <mesh position={[2, 2, 0]}>
          <boxBufferGeometry attach="geometry" args={[1, 1, 1]} />
          <meshStandardMaterial attach="material" />
        </mesh>
      )}

You can see that after the first flash, only the box reappears. The scene does not.

I suspect this may be a Threejs "issue" (not even sure if bug), but wanted to file for visibility in case anyone else hits it.

Where this is affecting me is during hot reloading. I lose my mounted hand-created scene during hot reloading. The scene comes loading an external 3d model, which is turned into a Scene at runtime

Most helpful comment

Have you tried dispose={null} ? When objects are unmounted dispose is called on them, which can result in the loss of materials and geometries.

It's recursive, you could put it onto the group and no contents will be disposed.

If that doesn't work I would need a sandbox.

All 5 comments

Hmmm, I also tried doing

<group>
            <primitive object={scene.children[0]} />
            <primitive object={scene.children[1]} />
            <primitive object={scene.children[2]} />
</group>

but now hot reloading raises the error:

Uncaught TypeError: Cannot set property '__instance' of undefined
    at createInstance (web.js:180)
    at completeWork (react-reconciler.development.js:10855)
    at completeUnitOfWork (react-reconciler.development.js:14731)
    at performUnitOfWork (react-reconciler.development.js:14704)

Have you tried dispose={null} ? When objects are unmounted dispose is called on them, which can result in the loss of materials and geometries.

It's recursive, you could put it onto the group and no contents will be disposed.

If that doesn't work I would need a sandbox.

Adding dispose=null fixes it, thanks!

Is there any other fix to this hot reloading issue? All of my groups have dispose={null} but I still get the type error referenced on every file save - which makes development nearly unbearable.

@garretteklof could you make a quick codesandbox because this should long be fixed. his sandbox works: https://codesandbox.io/s/scene-issue-forked-zetnx?file=/src/index.js:1367-1377

primitive does not dispose any longer by default (in r3f version 5), no need for dispose or anything.

Was this page helpful?
0 / 5 - 0 ratings

Related issues

Darkensses picture Darkensses  路  6Comments

regalstreak picture regalstreak  路  5Comments

dghez picture dghez  路  5Comments

ghost picture ghost  路  6Comments

brandonreid picture brandonreid  路  3Comments