pmndrs / react-three-fiber

🇨🇭 A React renderer for Three.js
https://docs.pmnd.rs/react-three-fiber
MIT License
27.4k stars 1.57k forks source link

Not render when the dev tool is open #828

Closed Albert-Gao closed 3 years ago

Albert-Gao commented 3 years ago

ENV

    "react-three-fiber": "^5.3.1",
    "three": "^0.122.0",

How to re-produce

  1. npx create-react-app my-app
  2. cd my app
  3. yarn add three react-three-fiber
  4. replace the App.js with the following
  5. yarn start
  6. In the browse, open dev tool, inspect the screen, no cube being rendered, resize the dev tool, a cube is there
    • if you think it is working, for example, in Chrome, right-click the refresh button, click the Empty Cache and Hard Reload, try it for a few times, it will sometimes after a certain times.
// App.js
import { Canvas } from "react-three-fiber";
import "./App.css";

function App() {
  return (
    <div style={{ height: "100vh" }}>
      <Canvas camera={{ position: [-1, 2, 5], fov: 50 }}>
        <mesh position={[0, 0, 0]}>
          <boxBufferGeometry attach="geometry" args={[1, 1, 1]} />
          <meshStandardMaterial attach="material" />
        </mesh>
      </Canvas>
    </div>
  );
}

export default App;
drcmda commented 3 years ago

can you reproduce it with 5.3.3?

Albert-Gao commented 3 years ago

Fixed by 5.3.3, thanks!