@react-three/fiber 8.0.0-beta-01 → 8.0.0-beta-05
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/CHANGELOG.md +48 -0
- package/dist/declarations/src/core/events.d.ts +5 -4
- package/dist/declarations/src/{web → core}/index.d.ts +6 -8
- package/dist/declarations/src/core/loop.d.ts +2 -1
- package/dist/declarations/src/core/renderer.d.ts +5 -5
- package/dist/declarations/src/core/store.d.ts +15 -7
- package/dist/declarations/src/core/utils.d.ts +8 -1
- package/dist/declarations/src/index.d.ts +4 -2
- package/dist/declarations/src/native/Canvas.d.ts +2 -5
- package/dist/declarations/src/native/events.d.ts +0 -1
- package/dist/declarations/src/native.d.ts +4 -2
- package/dist/declarations/src/three-types.d.ts +12 -24
- package/dist/declarations/src/web/Canvas.d.ts +2 -2
- package/dist/declarations/src/web/events.d.ts +0 -1
- package/dist/{hooks-c89a6f88.esm.js → index-3f4e5f46.esm.js} +459 -163
- package/dist/{hooks-e01f12ec.cjs.prod.js → index-95c17855.cjs.dev.js} +478 -175
- package/dist/{hooks-dd693347.cjs.dev.js → index-ff8b5912.cjs.prod.js} +478 -175
- package/dist/react-three-fiber.cjs.dev.js +83 -300
- package/dist/react-three-fiber.cjs.prod.js +83 -300
- package/dist/react-three-fiber.esm.js +56 -273
- package/native/dist/react-three-fiber-native.cjs.dev.js +160 -392
- package/native/dist/react-three-fiber-native.cjs.prod.js +160 -392
- package/native/dist/react-three-fiber-native.esm.js +135 -367
- package/package.json +21 -13
- package/readme.md +10 -10
- package/dist/declarations/src/native/hooks.d.ts +0 -9
- package/dist/declarations/src/native/index.d.ts +0 -37
package/readme.md
CHANGED
|
@@ -156,7 +156,7 @@ ReactDOM.render(
|
|
|
156
156
|
You need to be versed in both React and Threejs before rushing into this. If you are unsure about React consult the official [React docs](https://reactjs.org/docs/getting-started.html), especially [the section about hooks](https://reactjs.org/docs/hooks-reference.html). As for Threejs, make sure you at least glance over the following links:
|
|
157
157
|
|
|
158
158
|
1. Make sure you have a [basic grasp of Threejs](https://threejs.org/docs/index.html#manual/en/introduction/Creating-a-scene). Keep that site open.
|
|
159
|
-
2. When you know what a scene is, a camera, mesh, geometry, material, fork the [demo above](https://github.com/
|
|
159
|
+
2. When you know what a scene is, a camera, mesh, geometry, material, fork the [demo above](https://github.com/pmndrs/react-three-fiber#what-does-it-look-like).
|
|
160
160
|
3. [Look up](https://threejs.org/docs/index.html#api/en/objects/Mesh) the JSX elements that you see (mesh, ambientLight, etc), _all_ threejs exports are native to three-fiber.
|
|
161
161
|
4. Try changing some values, scroll though our [Api](/markdown/api.md) to see what the various settings and hooks do.
|
|
162
162
|
|
|
@@ -171,15 +171,15 @@ Some reading material:
|
|
|
171
171
|
|
|
172
172
|
# Ecosystem
|
|
173
173
|
|
|
174
|
-
- [`@react-three/gltfjsx`](https://github.com/
|
|
175
|
-
- [`@react-three/drei`](https://github.com/
|
|
176
|
-
- [`@react-three/postprocessing`](https://github.com/
|
|
177
|
-
- [`@react-three/flex`](https://github.com/
|
|
178
|
-
- [`@react-three/xr`](https://github.com/
|
|
179
|
-
- [`@react-three/cannon`](https://github.com/
|
|
180
|
-
- [`zustand`](https://github.com/
|
|
181
|
-
- [`react-spring`](https://github.com/
|
|
182
|
-
- [`react-use-gesture`](https://github.com/
|
|
174
|
+
- [`@react-three/gltfjsx`](https://github.com/pmndrs/gltfjsx) – turns GLTFs into JSX components
|
|
175
|
+
- [`@react-three/drei`](https://github.com/pmndrs/drei) – useful helpers for react-three-fiber
|
|
176
|
+
- [`@react-three/postprocessing`](https://github.com/pmndrs/react-postprocessing) – post-processing effects
|
|
177
|
+
- [`@react-three/flex`](https://github.com/pmndrs/react-three-flex) – flexbox for react-three-fiber
|
|
178
|
+
- [`@react-three/xr`](https://github.com/pmndrs/react-xr) – VR/AR controllers and events
|
|
179
|
+
- [`@react-three/cannon`](https://github.com/pmndrs/use-cannon) – physics based hooks
|
|
180
|
+
- [`zustand`](https://github.com/pmndrs/zustand) – state management
|
|
181
|
+
- [`react-spring`](https://github.com/pmndrs/react-spring) – a spring-physics-based animation library
|
|
182
|
+
- [`react-use-gesture`](https://github.com/pmndrs/react-use-gesture) – mouse/touch gestures
|
|
183
183
|
|
|
184
184
|
# How to contribute
|
|
185
185
|
|
|
@@ -1,9 +0,0 @@
|
|
|
1
|
-
import { GLTF } from 'three/examples/jsm/loaders/GLTFLoader';
|
|
2
|
-
import { ObjectMap } from '../core/utils';
|
|
3
|
-
import { Extensions, LoaderResult, BranchingReturn, useStore, useThree, useFrame, useGraph } from '../core/hooks';
|
|
4
|
-
declare function useLoader<T, U extends string | string[]>(Proto: new () => LoaderResult<T>, input: U, extensions?: Extensions, onProgress?: (event: ProgressEvent<EventTarget>) => void): U extends any[] ? BranchingReturn<T, GLTF, GLTF & ObjectMap>[] : BranchingReturn<T, GLTF, GLTF & ObjectMap>;
|
|
5
|
-
declare namespace useLoader {
|
|
6
|
-
var preload: <T, U extends string | string[]>(Proto: new () => LoaderResult<T>, input: U, extensions?: Extensions | undefined) => undefined;
|
|
7
|
-
var clear: <T, U extends string | string[]>(Proto: new () => LoaderResult<T>, input: U) => void;
|
|
8
|
-
}
|
|
9
|
-
export { useStore, useThree, useFrame, useGraph, useLoader };
|
|
@@ -1,37 +0,0 @@
|
|
|
1
|
-
/// <reference types="react-reconciler" />
|
|
2
|
-
import * as THREE from 'three';
|
|
3
|
-
import * as React from 'react';
|
|
4
|
-
import { UseStore } from 'zustand';
|
|
5
|
-
import { dispose } from '../core/utils';
|
|
6
|
-
import { Renderer, StoreProps, context, RootState, Size } from '../core/store';
|
|
7
|
-
import { extend, Root } from '../core/renderer';
|
|
8
|
-
import { addEffect, addAfterEffect, addTail } from '../core/loop';
|
|
9
|
-
import { createTouchEvents as events } from './events';
|
|
10
|
-
import { Canvas } from './Canvas';
|
|
11
|
-
import { EventManager } from '../core/events';
|
|
12
|
-
import { View } from 'react-native';
|
|
13
|
-
import { ExpoWebGLRenderingContext } from 'expo-gl';
|
|
14
|
-
export declare type GLContext = ExpoWebGLRenderingContext | WebGLRenderingContext;
|
|
15
|
-
declare type Properties<T> = Pick<T, {
|
|
16
|
-
[K in keyof T]: T[K] extends (_: any) => any ? never : K;
|
|
17
|
-
}[keyof T]>;
|
|
18
|
-
declare type GLProps = Renderer | ((canvas: HTMLCanvasElement, context: GLContext) => Renderer) | Partial<Properties<THREE.WebGLRenderer> | THREE.WebGLRendererParameters> | undefined;
|
|
19
|
-
declare const roots: Map<GLContext, Root>;
|
|
20
|
-
declare const invalidate: (state?: RootState | undefined) => void, advance: (timestamp: number, runGlobalEffects?: boolean, state?: RootState | undefined) => void;
|
|
21
|
-
declare const reconciler: import("react-reconciler").Reconciler<unknown, unknown, unknown, unknown, unknown>, applyProps: typeof import("../core/utils").applyProps;
|
|
22
|
-
export declare type RenderProps<TView extends View> = Omit<StoreProps, 'gl' | 'events' | 'size' | 'dpr'> & {
|
|
23
|
-
gl?: GLProps;
|
|
24
|
-
events?: (store: UseStore<RootState>) => EventManager<TView>;
|
|
25
|
-
size?: Size;
|
|
26
|
-
onCreated?: (state: RootState) => void;
|
|
27
|
-
};
|
|
28
|
-
declare function createRoot<TView extends View>(context: GLContext, config?: RenderProps<TView>): {
|
|
29
|
-
render: (element: React.ReactNode) => UseStore<RootState>;
|
|
30
|
-
unmount: () => void;
|
|
31
|
-
};
|
|
32
|
-
declare function render<TView extends View>(element: React.ReactNode, context: GLContext, { gl, size, events, onCreated, ...props }?: RenderProps<TView>): UseStore<RootState>;
|
|
33
|
-
declare function unmountComponentAtNode(context: GLContext, callback?: (context: GLContext) => void): void;
|
|
34
|
-
declare const act: (callback: () => import("react-reconciler").Thenable<unknown>) => import("react-reconciler").Thenable<void>;
|
|
35
|
-
declare function createPortal(children: React.ReactNode, container: THREE.Object3D): React.ReactNode;
|
|
36
|
-
export * from './hooks';
|
|
37
|
-
export { context, render, createRoot, unmountComponentAtNode, createPortal, events, reconciler, applyProps, dispose, invalidate, advance, extend, addEffect, addAfterEffect, addTail, Canvas, act, roots as _roots, };
|