diff --git a/docs/docs/guides/SKYBOX.mdx b/docs/docs/guides/SKYBOX.mdx index 407dc110..99fdac57 100644 --- a/docs/docs/guides/SKYBOX.mdx +++ b/docs/docs/guides/SKYBOX.mdx @@ -17,7 +17,7 @@ be filled with the skybox. The Skybox can be rendered from either: ```tsx import { Skybox } from 'react-native-filament'; - + ``` ### 🏞️ A [cubemap texture](https://learnopengl.com/img/advanced/cubemaps_skybox.png) @@ -28,7 +28,7 @@ function Scene() { return ( - + ) } \ No newline at end of file diff --git a/docs/docs/guides/TRANSFORMATION.mdx b/docs/docs/guides/TRANSFORMATION.mdx index f58e5230..247111e6 100644 --- a/docs/docs/guides/TRANSFORMATION.mdx +++ b/docs/docs/guides/TRANSFORMATION.mdx @@ -43,7 +43,7 @@ const rotationInDegree = 45; const angleInRadians = rotationInDegree * (Math.PI / 180); const rotateOnAxis = [0, angleInRadians, 0]; // Rotate on the y-axis - + ``` The `rotation` props expects a 3D vector (called `Float3` in RNF), where each value represents the rotation in radians around the x, y and z axis respectively. @@ -93,7 +93,7 @@ When matrix multiplication is **enabled (default)** all transform operations wil ## Animate the transform props -You may want to change the transformation props very frequently (e.g. every frame). To avoid performance issues, you should **not** update the props uusing `useState` directly, but use shared values. +You may want to change the transformation props very frequently (e.g. every frame). To avoid performance issues, you should **not** update the props using `useState` directly, but use shared values. You may know shared values from `reanimated`. We are using the shared values from `react-native-worklets-core`, but they work very similary. @@ -114,9 +114,9 @@ You can pass a shared value to any of the transformation props: ```tsx function MyScene() { - const rotation = useSharedValue([0, 0, 0]); + const rotation = useSharedValue([0, 0, 0]); - return + return } ``` @@ -125,10 +125,10 @@ Now, lets update the rotation value every frame: ```tsx import { useCallback } from 'react' import { useSharedValue } from "react-native-worklets-core" -import { RenderCallback, FilamentView, Model } from "react-native-filament" +import { RenderCallback, FilamentView, Model, Float3 } from "react-native-filament" function MyScene() { - const rotation = useSharedValue([0, 0, 0]); + const rotation = useSharedValue([0, 0, 0]); const renderCallback: RenderCallback = useCallback(() => { "worklet" @@ -142,7 +142,7 @@ function MyScene() { return ( - + ) } @@ -193,7 +193,7 @@ function MyScene() { // We get the transformManager for the filament context. // For this to work needs to be wrapped with a - const { transformManager } = useFilamentConext() + const { transformManager } = useFilamentContext() const renderCallback: RenderCallback = useCallback(() => { "worklet" @@ -204,7 +204,7 @@ function MyScene() { // Add a rotation of 1 degree every frame on the y-axis and // multiply it with the current transform by setting `true` as last argument transformManager.setEntityRotation(rootEntity, 0.01, [0, 1, 0], true) - }, []) + }, [rootEntity, transformManager]) } ```