Skip to content

Commit

Permalink
docs: two gotchas
Browse files Browse the repository at this point in the history
  • Loading branch information
drcmda committed Jul 12, 2024
1 parent 4cfe9ef commit 9931589
Show file tree
Hide file tree
Showing 2 changed files with 21 additions and 1 deletion.
6 changes: 6 additions & 0 deletions docs/API/objects.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -180,6 +180,12 @@ function Component() {
return <primitive object={mesh} position={[10, 0, 0]} />
```
<Hint>
Scene objects can only ever be added once in Threejs. If you attempt to add one and the same object in two places Threejs will remove the first instance automatically. This will also happen with primitive! If you want to re-use an existing object, you must clone it first.
</Hint>
## Using 3rd-party objects declaratively
The `extend` function extends React Three Fiber's catalogue of JSX elements. Components added this way can then be referenced in the scene-graph using camel casing similar to other primitives.
Expand Down
16 changes: 15 additions & 1 deletion docs/advanced/scaling-performance.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -53,6 +53,20 @@ Think of it as a flag to tell the system that something has changed.
</Hint>
### Sync animations with on-demand-rendering and invalidate
Since `invalidate()` is only a flag that schedules render, you might bump into syncing issues when you run animations that are synchronous (as in, they start immediately). By the time fiber renders the first frame the animation has already progressed which leads to a visible jump. In such cases you should pre-emptively schedule a render and then start the animation in the next frame.
```jsx
<mesh
onClick={() => {
// Pre-emptively schedule a render
invalidate()
// Wait for the next frame to start the animation
requestAnimationFrame(() => controls.dolly(1, true))
}}
```
## Re-using geometries and materials
Each geometry and material means additional overhead for the GPU. You should try to re-use resources if you know they will repeat.
Expand Down Expand Up @@ -228,7 +242,7 @@ If you still experience flip flops despite the bounds you can define a limit of
PerformanceMonitor can also have children, if you wrap your app in it you get to use usePerformanceMonitor which allows individual components down the nested tree to respond to performance changes on their own.
```jsx
<PerformanceMonitor>
;<PerformanceMonitor>
<Effects />
</PerformanceMonitor>

Expand Down

0 comments on commit 9931589

Please sign in to comment.