Skip to content
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension


Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
24 changes: 18 additions & 6 deletions README.md
Original file line number Diff line number Diff line change
Expand Up @@ -31,21 +31,33 @@ This library has dependencies to the following libs:
npm i videx-3d
```

You also need to install the peer-dependencies:
You also need to install the required peer-dependencies.

First, if not already installed, you'll need React version 18 or later:
```
// react
npm i react@18 react-dom@18
npm i react react-dom
```

React Three Fiber (R3F):
```
// react three fiber
npm i @react-three/fiber
```
Note that if using React 18, you need `@react-three/fiber` version 8.

Depending on your needs you might consider installing the following additional packages:
```
// three js
npm i three

// react three fiber
npm i @react-three/fiber
// drei
npm i @react-three/drei

// comlink
// comlink - if using web workers
npm i comlink
```

Note that if using React 18, you need `@react-three/drei` version 9.

## Configure
Rendering complex scenes in the browser (single threaded) can quickly become bottlenecked, degrading user experience. For this reason, most of the components have been decoupled from data management and processing, by depending on a _store interface_ and _generator_ functions. This allows the heavy work to be offloaded to web workers (but not required).
Expand Down
23 changes: 10 additions & 13 deletions documents/getting-started.md
Original file line number Diff line number Diff line change
Expand Up @@ -2,22 +2,23 @@

## Creating a React app

First, we need a basic React web application running. At the time being this must be React v18 due to missing support for v19 in peer dependencies.

To create a new React v18 app, you can use Next.js:
First, we need a basic React web application running. Quickest and easiest way to do so it to use Vite:

```
npx create-next-app@14
npm create vite@latest my-app --template react
cd my-app
npm install
npm run dev
```

Please note that we have to use next version 14 for react v18!
Note that we need react v18 or later, and typescript is recommended.

## Installing peer dependencies

Besides React, we will also need threejs, react three fiber and comlink:
Besides React, we will also need to install react three fiber:

```
npm install three @react-three/fiber comlink
npm install three @react-three/fiber
```

## Make a simple 3d scene
Expand All @@ -27,8 +28,6 @@ Before adding the `videx-3d` components library we should create a basic 3d scen
In this example, we will be using typescript. We start by creating a new file for a component named "Test.tsx":

```tsx
'use client' // <-- if using next

// Test.tsx
import { Canvas } from '@react-three/fiber'

Expand All @@ -47,10 +46,10 @@ export const Test = () => {
Then import this file and render the Scene component in your app:

```tsx
// page.tsx
// App.tsx
import { Test } from './Test'

export default function Home() {
export default function App() {
return (
<div style={{ width: `100vw`, height: `100vh` }}>
<Test />
Expand Down Expand Up @@ -308,10 +307,8 @@ We return a mesh element, this time passing the generated geometry as a prop to
Let's replace the cubes from our earlier example with the new Tube component:

```tsx
'use client' // <-- if using next

// Test.tsx

import { CameraControls } from '@react-three/drei'
import { Canvas } from '@react-three/fiber'
import { Tube } from './Tube'
Expand Down
Loading