https://github.com/danielesteban/r3f-voxels
https://github.com/danielesteban/r3f-voxels
Last synced: about 1 year ago
JSON representation
- Host: GitHub
- URL: https://github.com/danielesteban/r3f-voxels
- Owner: danielesteban
- License: mit
- Created: 2024-06-23T11:19:23.000Z (about 2 years ago)
- Default Branch: master
- Last Pushed: 2024-06-27T09:46:59.000Z (about 2 years ago)
- Last Synced: 2025-06-24T10:06:10.202Z (about 1 year ago)
- Language: TypeScript
- Homepage:
- Size: 69.3 KB
- Stars: 19
- Watchers: 2
- Forks: 2
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
r3f-voxels
==
### Examples
* [Basic](https://codesandbox.io/p/sandbox/r3f-voxels-basic-8xd52s)
* [Advanced](https://codesandbox.io/p/sandbox/r3f-voxels-advanced-fpp9j3)
### Installation
```bash
npm install r3f-voxels
```
### Basic usage
```jsx
import { Canvas } from '@react-three/fiber';
import { Voxels, VoxelsApi } from 'r3f-voxels';
import { Vector3 } from 'three';
const Scene = () => {
const voxels = useRef(null!);
useLayoutEffect(() => {
voxels.current.setVoxel(new Vector3(0, 0, 0), 1);
}, []);
return (
);
};
const App = () => (
);
```
### Api
```ts
type VoxelsApi = {
clearChunks: () => void;
exportChunks: () => { [key: string]: Uint8Array };
importChunks: (chunks: { [key: string]: Uint8Array }) => void;
getMaterials: () => { opaque: ChunkMaterial; transparent: ChunkMaterial };
getVoxel: (position: Vector3) => number;
setVoxel: (position: Vector3, value: number) => void;
};
```
### Props
```ts
type VoxelsProps = {
atlas?: DataArrayTexture | Texture;
normalAtlas?: DataArrayTexture | Texture;
occlusionRoughnessMetalnessAtlas?: DataArrayTexture | Texture;
bounds?: Box3;
followCamera?: boolean;
generator?: (x: number, y: number, z: number) => number;
getPhysics?: () => RapierContext;
getTexture?: (voxel: number, face: VoxelFace, isTop: boolean) => number;
getTransparent?: (voxel: number) => boolean;
metalness?: number;
roughness?: number;
};
```