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])
}
```