You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
Copy file name to clipboardexpand all lines: README.md
+7-2
Original file line number
Diff line number
Diff line change
@@ -2,12 +2,12 @@
2
2
3
3
A simple wrapper to run vanilla ThreeJS code inside a React component.
4
4
5
-
- Uses React 18 and Vite server. (Latest as of Aug 2023).
5
+
- Uses React 18 and Vite. Also a branch showing use with Next.js.
6
6
- Uses [Leva](https://github.com/pmndrs/leva) React GUI to show passing props from React -> ThreeJS.
7
7
8
8
## Philosophy
9
9
10
-
[React-three-fiber](https://github.com/pmndrs/react-three-fiber) is great if you want to write your ThreeJS code with JSX. If you prefer coding ThreeJS with vanilla JS, this template might be useful for you.
10
+
[React-three-fiber](https://github.com/pmndrs/react-three-fiber) is great if you want to write your ThreeJS code with JSX. If you prefer coding ThreeJS with vanilla JS, this template might be useful for you. Any of the [ThreeJS examples](https://threejs.org/examples/) can be loaded into this wrapper.
11
11
12
12
## Available Scripts
13
13
@@ -21,6 +21,11 @@ In the project directory, you can run:
21
21
22
22
In Dev mode you will notice the ThreeJS init() and dispose() calls are fired twice on mount. This is caused by using [React.StrictMode](https://react.dev/reference/react/StrictMode#fixing-bugs-found-by-double-rendering-in-development) which causes components to be rendered twice. Since the dispose() function cleans up properly you can safely ignore this issue. Double render does not happen in production mode.
23
23
24
+
## Branches
25
+
26
+
-`main` - Uses the [Vite](https://vitejs.dev/) build tool.
27
+
-`nextjs-build` - Uses the [Next.js](https://nextjs.org/) framework. Based off of `npx create-next-app`.
28
+
24
29
## Note on Resizing
25
30
26
31
In this example, the ThreeJS canvas size is defined by the `#canvas-container` CSS. ThreeJS resizing logic is fired by a `ResizeObserver` to allow changing the size of the canvas from React.
0 commit comments