diff --git a/docs/API/testing.mdx b/docs/API/testing.mdx index 4434f34ec1..221ae98454 100644 --- a/docs/API/testing.mdx +++ b/docs/API/testing.mdx @@ -116,4 +116,4 @@ If you want to learn more about React Three Test Renderer you can checkout the r - Check the color of the Box we created - Check the rotation using the `advanceFrames` method. - + diff --git a/docs/advanced/scaling-performance.mdx b/docs/advanced/scaling-performance.mdx index 01ee98a31a..ca211f875b 100644 --- a/docs/advanced/scaling-performance.mdx +++ b/docs/advanced/scaling-performance.mdx @@ -14,7 +14,7 @@ But if the moving parts in your scene are allowed to come to rest, then it would Open the sandbox below in a full screen and look into dev tools, you will see that it is completely idle when nothing is going on. It renders only when you move the model. - + All you need to do is set the canvas `frameloop` prop to `demand`. It will render frames whenever it detects prop changes throughout the component tree. @@ -101,7 +101,7 @@ THREE.ColorManagement.legacyMode = false If you access a resource via useLoader with the same URL, throughout the component tree, then you will always refer to the same asset and thereby re-use it. This is especially useful if you run your GLTF assets through [GLTFJSX](https://github.com/pmndrs/gltfjsx) because it links up geometries and materials and thereby creates re-usable models. - + ```jsx function Shoe(props) { @@ -121,7 +121,7 @@ function Shoe(props) { Each mesh is a draw call, you should be mindful of how many of these you employ: no more than 1000 as the very maximum, and optimally a few hundred or less. You can win performance back by reducing draw calls, for example by instancing repeating objects. This way you can have hundreds of thousands of objects in a single draw call. - + Setting up instancing is not so hard, consult [the three.js docs](https://threejs.org/docs/#api/en/objects/InstancedMesh) if you need help. @@ -153,7 +153,7 @@ Sometimes it can be beneficial to reduce the quality of an object the further it Scroll in and out to see the effect: - + There is a small component in Drei called `` which sets up LOD without boilerplate. You load or prepare a couple of resolution stages, as many as you like, and then give them the same amount of distances from the camera, starting from highest quality to lowest. @@ -182,7 +182,7 @@ The following sandbox goes through three loading stages: - Low quality - High quality - + And this is how easy it is to achieve it, you can nest suspense and even use it as a fallback: @@ -257,7 +257,7 @@ Websites like Sketchfab make sure the scene is always fluid, running at 60 fps, The following sandbox uses expensive lights and post-processing. In order for it to run relatively smooth it will scale the pixel ratio on movement and also skip heavy post-processing effects like ambient occlusion. - + When you inspect the state model you will notice an object called `performance`. diff --git a/docs/getting-started/community-r3f-components.mdx b/docs/getting-started/community-r3f-components.mdx index 32edbf726c..2ea3a77290 100644 --- a/docs/getting-started/community-r3f-components.mdx +++ b/docs/getting-started/community-r3f-components.mdx @@ -51,7 +51,7 @@ This page showcases some React Three Fiber/r3f community components that have no
  • [Luma Gaussian Splats](https://cdn-luma.com/public/lumalabs.ai/luma-web-library/0.2/fefe154/index.html#react-three-fiber) - +
  • [NYTimes/three-loader-3dtiles](https://github.com/nytimes/three-loader-3dtiles/blob/dev/examples/r3f/src/index.tsx) @@ -60,11 +60,11 @@ This page showcases some React Three Fiber/r3f community components that have no
  • [Looking Glass](https://docs.lookingglassfactory.com/developer-tools/webxr/react-three-fiber) - +
  • [Theatre-js](https://github.com/theatre-js/theatre) - +
  • [Farazz/CustomShaderMaterial](https://github.com/FarazzShaikh/THREE-CustomShaderMaterial) @@ -78,11 +78,11 @@ This page showcases some React Three Fiber/r3f community components that have no
  • [utsuboco/r3f-perf](https://github.com/utsuboco/r3f-perf) - +
  • [pmndrs/THREE.MeshLine](https://github.com/pmndrs/meshline) - +
  • [ektogamat/R3F-Ultimate-Lens-Flare](https://github.com/ektogamat/R3F-Ultimate-Lens-Flare) diff --git a/docs/getting-started/examples.mdx b/docs/getting-started/examples.mdx index da03ced745..020d8657ef 100644 --- a/docs/getting-started/examples.mdx +++ b/docs/getting-started/examples.mdx @@ -72,7 +72,7 @@ nav: 3

    [![cards demo](https://pmndrs.github.io/examples/cards/thumbnail.webp)](https://pmndrs.github.io/examples/cards) -- cards, image

  • - +

  • [![image-gallery demo](https://pmndrs.github.io/examples/image-gallery/thumbnail.webp)](https://pmndrs.github.io/examples/image-gallery) -- reflections, annotations

    @@ -370,7 +370,7 @@ nav: 3

    [![basic-demo demo](https://pmndrs.github.io/examples/basic-demo/thumbnail.webp)](https://pmndrs.github.io/examples/basic-demo)

  • - +

  • [![drei-rendertexture demo](https://pmndrs.github.io/examples/drei-rendertexture/thumbnail.webp)](https://pmndrs.github.io/examples/drei-rendertexture)

    diff --git a/docs/images/sandboxes/12nmp.png b/docs/images/sandboxes/12nmp.png new file mode 100644 index 0000000000..47ae134a52 Binary files /dev/null and b/docs/images/sandboxes/12nmp.png differ diff --git a/docs/images/sandboxes/29gxw.png b/docs/images/sandboxes/29gxw.png new file mode 100644 index 0000000000..d2e7241bd0 Binary files /dev/null and b/docs/images/sandboxes/29gxw.png differ diff --git a/docs/images/sandboxes/3ywzzx.png b/docs/images/sandboxes/3ywzzx.png new file mode 100644 index 0000000000..2931739e88 Binary files /dev/null and b/docs/images/sandboxes/3ywzzx.png differ diff --git a/docs/images/sandboxes/51zks.png b/docs/images/sandboxes/51zks.png new file mode 100644 index 0000000000..bbe61c5e91 Binary files /dev/null and b/docs/images/sandboxes/51zks.png differ diff --git a/docs/images/sandboxes/6etx1.png b/docs/images/sandboxes/6etx1.png new file mode 100644 index 0000000000..42a7f1e97b Binary files /dev/null and b/docs/images/sandboxes/6etx1.png differ diff --git a/docs/images/sandboxes/7duy8.png b/docs/images/sandboxes/7duy8.png new file mode 100644 index 0000000000..934ea4d2de Binary files /dev/null and b/docs/images/sandboxes/7duy8.png differ diff --git a/docs/images/sandboxes/98ppy.png b/docs/images/sandboxes/98ppy.png new file mode 100644 index 0000000000..f4d9e099eb Binary files /dev/null and b/docs/images/sandboxes/98ppy.png differ diff --git a/docs/images/sandboxes/dix1y.png b/docs/images/sandboxes/dix1y.png new file mode 100644 index 0000000000..c391216b19 Binary files /dev/null and b/docs/images/sandboxes/dix1y.png differ diff --git a/docs/images/sandboxes/h2fkgq.png b/docs/images/sandboxes/h2fkgq.png new file mode 100644 index 0000000000..0e9154757d Binary files /dev/null and b/docs/images/sandboxes/h2fkgq.png differ diff --git a/docs/images/sandboxes/h873k.png b/docs/images/sandboxes/h873k.png new file mode 100644 index 0000000000..6d4b8dcf08 Binary files /dev/null and b/docs/images/sandboxes/h873k.png differ diff --git a/docs/images/sandboxes/hqut4.png b/docs/images/sandboxes/hqut4.png new file mode 100644 index 0000000000..612b6f7cc0 Binary files /dev/null and b/docs/images/sandboxes/hqut4.png differ diff --git a/docs/images/sandboxes/m6p73.png b/docs/images/sandboxes/m6p73.png new file mode 100644 index 0000000000..0d42a7f443 Binary files /dev/null and b/docs/images/sandboxes/m6p73.png differ diff --git a/docs/images/sandboxes/nn2m7.png b/docs/images/sandboxes/nn2m7.png new file mode 100644 index 0000000000..f1efb5afcf Binary files /dev/null and b/docs/images/sandboxes/nn2m7.png differ diff --git a/docs/images/sandboxes/pz0q6.png b/docs/images/sandboxes/pz0q6.png new file mode 100644 index 0000000000..2e50f2a82e Binary files /dev/null and b/docs/images/sandboxes/pz0q6.png differ diff --git a/docs/images/sandboxes/rusfd.png b/docs/images/sandboxes/rusfd.png new file mode 100644 index 0000000000..7cddb73d4a Binary files /dev/null and b/docs/images/sandboxes/rusfd.png differ diff --git a/docs/images/sandboxes/ssrfg.png b/docs/images/sandboxes/ssrfg.png new file mode 100644 index 0000000000..db934e0fa1 Binary files /dev/null and b/docs/images/sandboxes/ssrfg.png differ diff --git a/docs/images/sandboxes/vbnbf.png b/docs/images/sandboxes/vbnbf.png new file mode 100644 index 0000000000..15c2624551 Binary files /dev/null and b/docs/images/sandboxes/vbnbf.png differ diff --git a/docs/images/sandboxes/vl221.png b/docs/images/sandboxes/vl221.png new file mode 100644 index 0000000000..04fe29c296 Binary files /dev/null and b/docs/images/sandboxes/vl221.png differ diff --git a/docs/images/sandboxes/wvgxp.png b/docs/images/sandboxes/wvgxp.png new file mode 100644 index 0000000000..479c70badc Binary files /dev/null and b/docs/images/sandboxes/wvgxp.png differ diff --git a/docs/images/sandboxes/ykfpwf.png b/docs/images/sandboxes/ykfpwf.png new file mode 100644 index 0000000000..99dcd693ce --- /dev/null +++ b/docs/images/sandboxes/ykfpwf.png @@ -0,0 +1 @@ +{"status":"fail","data":{"url":"The request reached timeout after 28s."},"code":"ETIMEOUT","more":"https://microlink.io/etimeout","report":"mailto:hello@microlink.io?subject=%5Bmicrolink%5D%20Request%20failed&body=Hello%2C%20The%20following%20API%20request%20wasn't%20processed%20properly%3A%0A%0A%20%20-%20request%20id%20%20%3A%20c5ef3bb6-f381-4095-8058-f06a24e345e0%0A%20%20-%20request%20uri%20%3A%20https%3A%2F%2Fapi.microlink.io%2F%3Fembed%3Dscreenshot.url%26meta%3Dfalse%26screenshot%3Dtrue%26url%3Dhttps%3A%2F%2Fcodesandbox.io%2Fs%2Fykfpwf%0A%20%20-%20error%20code%20%20%3A%20ETIMEOUT%20(https%3A%2F%2Fmicrolink.io%2Fetimeout).%0A%0ACan%20you%20take%20a%20look%3F%20Thanks!%0A","message":"The request has been not processed. See the errors above to know why."} \ No newline at end of file diff --git a/docs/images/sandboxes/yup2o.png b/docs/images/sandboxes/yup2o.png new file mode 100644 index 0000000000..5cad74be8f Binary files /dev/null and b/docs/images/sandboxes/yup2o.png differ diff --git a/docs/tutorials/basic-animations.mdx b/docs/tutorials/basic-animations.mdx index ab74ca7510..b8bcc500f5 100644 --- a/docs/tutorials/basic-animations.mdx +++ b/docs/tutorials/basic-animations.mdx @@ -76,7 +76,7 @@ Let's have a closer look: - We are accessing the `rotation.x` property of `myMesh.current` object, which is a reference to our mesh object - We are assigning our time-dependent value `a` to the `rotation` on the `x` axis, meaning our object will now infinitely rotate between -1 and 1 radians around the x axis! - + **Exercises** diff --git a/docs/tutorials/events-and-interaction.mdx b/docs/tutorials/events-and-interaction.mdx index a437393c2f..a5139bf653 100644 --- a/docs/tutorials/events-and-interaction.mdx +++ b/docs/tutorials/events-and-interaction.mdx @@ -66,7 +66,7 @@ What we did in this chapter was: - Added some state to track if the mesh is currently active - Changed the scale based on that state - + **Exercises** diff --git a/docs/tutorials/loading-models.mdx b/docs/tutorials/loading-models.mdx index ea997e4e28..2e7e32a86c 100644 --- a/docs/tutorials/loading-models.mdx +++ b/docs/tutorials/loading-models.mdx @@ -32,7 +32,7 @@ function Scene() { You can play with the sandbox and see how it looks here after I added an HDRI background: - + ### Loading GLTF models as JSX Components @@ -91,7 +91,7 @@ export default function App() { You can play with the sandbox here: - + ## Loading OBJ models @@ -115,7 +115,7 @@ And here we go, we have an OBJ model showing on the web! Pretty cool ah? You can play with the sandbox here: - + ## Loading FBX models @@ -137,7 +137,7 @@ function Scene() { You can play with the sandbox here: - + ### Loading FBX models using `useFBX` @@ -152,7 +152,7 @@ function Scene() { You can play with the sandbox here: - + ## Showing a loader @@ -188,4 +188,4 @@ export default function App() { The hook returns much more than just the progress so there is a lot you can do there to give the user more information about the loading status of the application. You can play with all of them in this sandbox: - + diff --git a/docs/tutorials/loading-textures.mdx b/docs/tutorials/loading-textures.mdx index 0cc20ed460..c27e55a585 100644 --- a/docs/tutorials/loading-textures.mdx +++ b/docs/tutorials/loading-textures.mdx @@ -147,4 +147,4 @@ return ( You can play with the sandbox and see how it looks: - +