@react-three/fiber 9.4.2 → 10.0.0-alpha.0
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/LICENSE +21 -0
- package/dist/index.cjs +14832 -0
- package/dist/index.d.cts +3350 -0
- package/dist/index.d.mts +3350 -0
- package/dist/index.d.ts +3350 -0
- package/dist/index.mjs +14747 -0
- package/dist/legacy.cjs +14820 -0
- package/dist/legacy.d.cts +3347 -0
- package/dist/legacy.d.mts +3347 -0
- package/dist/legacy.d.ts +3347 -0
- package/dist/legacy.mjs +14735 -0
- package/dist/webgpu/index.cjs +15274 -0
- package/dist/webgpu/index.d.cts +3470 -0
- package/dist/webgpu/index.d.mts +3470 -0
- package/dist/webgpu/index.d.ts +3470 -0
- package/dist/webgpu/index.mjs +15177 -0
- package/package.json +44 -44
- package/react-reconciler/constants.d.ts +7 -0
- package/react-reconciler/constants.js +9 -0
- package/react-reconciler/index.d.ts +1044 -0
- package/react-reconciler/index.js +224 -0
- package/readme.md +98 -33
- package/CHANGELOG.md +0 -1186
- package/dist/declarations/src/core/events.d.ts +0 -92
- package/dist/declarations/src/core/hooks.d.ts +0 -53
- package/dist/declarations/src/core/index.d.ts +0 -13
- package/dist/declarations/src/core/loop.d.ts +0 -31
- package/dist/declarations/src/core/reconciler.d.ts +0 -50
- package/dist/declarations/src/core/renderer.d.ts +0 -89
- package/dist/declarations/src/core/store.d.ts +0 -130
- package/dist/declarations/src/core/utils.d.ts +0 -191
- package/dist/declarations/src/index.d.ts +0 -6
- package/dist/declarations/src/native/Canvas.d.ts +0 -13
- package/dist/declarations/src/native/events.d.ts +0 -4
- package/dist/declarations/src/native.d.ts +0 -6
- package/dist/declarations/src/three-types.d.ts +0 -68
- package/dist/declarations/src/web/Canvas.d.ts +0 -23
- package/dist/declarations/src/web/events.d.ts +0 -4
- package/dist/events-1eccaf1c.esm.js +0 -2510
- package/dist/events-5c8d1731.cjs.prod.js +0 -2569
- package/dist/events-c80effae.cjs.dev.js +0 -2569
- package/dist/react-three-fiber.cjs.d.ts +0 -2
- package/dist/react-three-fiber.cjs.dev.js +0 -222
- package/dist/react-three-fiber.cjs.js +0 -7
- package/dist/react-three-fiber.cjs.prod.js +0 -222
- package/dist/react-three-fiber.esm.js +0 -167
- package/native/dist/react-three-fiber-native.cjs.d.ts +0 -2
- package/native/dist/react-three-fiber-native.cjs.dev.js +0 -569
- package/native/dist/react-three-fiber-native.cjs.js +0 -7
- package/native/dist/react-three-fiber-native.cjs.prod.js +0 -569
- package/native/dist/react-three-fiber-native.esm.js +0 -517
- package/native/package.json +0 -5
|
@@ -1,2 +0,0 @@
|
|
|
1
|
-
export * from "./declarations/src/index";
|
|
2
|
-
//# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoicmVhY3QtdGhyZWUtZmliZXIuY2pzLmQudHMiLCJzb3VyY2VSb290IjoiIiwic291cmNlcyI6WyIuL2RlY2xhcmF0aW9ucy9zcmMvaW5kZXguZC50cyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFBQSJ9
|
|
@@ -1,222 +0,0 @@
|
|
|
1
|
-
'use strict';
|
|
2
|
-
|
|
3
|
-
Object.defineProperty(exports, '__esModule', { value: true });
|
|
4
|
-
|
|
5
|
-
var events = require('./events-c80effae.cjs.dev.js');
|
|
6
|
-
var React = require('react');
|
|
7
|
-
var THREE = require('three');
|
|
8
|
-
var useMeasure = require('react-use-measure');
|
|
9
|
-
var itsFine = require('its-fine');
|
|
10
|
-
var jsxRuntime = require('react/jsx-runtime');
|
|
11
|
-
require('react-reconciler/constants');
|
|
12
|
-
require('zustand/traditional');
|
|
13
|
-
require('suspend-react');
|
|
14
|
-
require('react-reconciler');
|
|
15
|
-
require('scheduler');
|
|
16
|
-
|
|
17
|
-
function _interopDefault (e) { return e && e.__esModule ? e : { 'default': e }; }
|
|
18
|
-
|
|
19
|
-
function _interopNamespace(e) {
|
|
20
|
-
if (e && e.__esModule) return e;
|
|
21
|
-
var n = Object.create(null);
|
|
22
|
-
if (e) {
|
|
23
|
-
Object.keys(e).forEach(function (k) {
|
|
24
|
-
if (k !== 'default') {
|
|
25
|
-
var d = Object.getOwnPropertyDescriptor(e, k);
|
|
26
|
-
Object.defineProperty(n, k, d.get ? d : {
|
|
27
|
-
enumerable: true,
|
|
28
|
-
get: function () { return e[k]; }
|
|
29
|
-
});
|
|
30
|
-
}
|
|
31
|
-
});
|
|
32
|
-
}
|
|
33
|
-
n["default"] = e;
|
|
34
|
-
return Object.freeze(n);
|
|
35
|
-
}
|
|
36
|
-
|
|
37
|
-
var React__namespace = /*#__PURE__*/_interopNamespace(React);
|
|
38
|
-
var THREE__namespace = /*#__PURE__*/_interopNamespace(THREE);
|
|
39
|
-
var useMeasure__default = /*#__PURE__*/_interopDefault(useMeasure);
|
|
40
|
-
|
|
41
|
-
function CanvasImpl({
|
|
42
|
-
ref,
|
|
43
|
-
children,
|
|
44
|
-
fallback,
|
|
45
|
-
resize,
|
|
46
|
-
style,
|
|
47
|
-
gl,
|
|
48
|
-
events: events$1 = events.createPointerEvents,
|
|
49
|
-
eventSource,
|
|
50
|
-
eventPrefix,
|
|
51
|
-
shadows,
|
|
52
|
-
linear,
|
|
53
|
-
flat,
|
|
54
|
-
legacy,
|
|
55
|
-
orthographic,
|
|
56
|
-
frameloop,
|
|
57
|
-
dpr,
|
|
58
|
-
performance,
|
|
59
|
-
raycaster,
|
|
60
|
-
camera,
|
|
61
|
-
scene,
|
|
62
|
-
onPointerMissed,
|
|
63
|
-
onCreated,
|
|
64
|
-
...props
|
|
65
|
-
}) {
|
|
66
|
-
// Create a known catalogue of Threejs-native elements
|
|
67
|
-
// This will include the entire THREE namespace by default, users can extend
|
|
68
|
-
// their own elements by using the createRoot API instead
|
|
69
|
-
React__namespace.useMemo(() => events.extend(THREE__namespace), []);
|
|
70
|
-
const Bridge = events.useBridge();
|
|
71
|
-
const [containerRef, containerRect] = useMeasure__default["default"]({
|
|
72
|
-
scroll: true,
|
|
73
|
-
debounce: {
|
|
74
|
-
scroll: 50,
|
|
75
|
-
resize: 0
|
|
76
|
-
},
|
|
77
|
-
...resize
|
|
78
|
-
});
|
|
79
|
-
const canvasRef = React__namespace.useRef(null);
|
|
80
|
-
const divRef = React__namespace.useRef(null);
|
|
81
|
-
React__namespace.useImperativeHandle(ref, () => canvasRef.current);
|
|
82
|
-
const handlePointerMissed = events.useMutableCallback(onPointerMissed);
|
|
83
|
-
const [block, setBlock] = React__namespace.useState(false);
|
|
84
|
-
const [error, setError] = React__namespace.useState(false);
|
|
85
|
-
|
|
86
|
-
// Suspend this component if block is a promise (2nd run)
|
|
87
|
-
if (block) throw block;
|
|
88
|
-
// Throw exception outwards if anything within canvas throws
|
|
89
|
-
if (error) throw error;
|
|
90
|
-
const root = React__namespace.useRef(null);
|
|
91
|
-
events.useIsomorphicLayoutEffect(() => {
|
|
92
|
-
const canvas = canvasRef.current;
|
|
93
|
-
if (containerRect.width > 0 && containerRect.height > 0 && canvas) {
|
|
94
|
-
if (!root.current) root.current = events.createRoot(canvas);
|
|
95
|
-
async function run() {
|
|
96
|
-
await root.current.configure({
|
|
97
|
-
gl,
|
|
98
|
-
scene,
|
|
99
|
-
events: events$1,
|
|
100
|
-
shadows,
|
|
101
|
-
linear,
|
|
102
|
-
flat,
|
|
103
|
-
legacy,
|
|
104
|
-
orthographic,
|
|
105
|
-
frameloop,
|
|
106
|
-
dpr,
|
|
107
|
-
performance,
|
|
108
|
-
raycaster,
|
|
109
|
-
camera,
|
|
110
|
-
size: containerRect,
|
|
111
|
-
// Pass mutable reference to onPointerMissed so it's free to update
|
|
112
|
-
onPointerMissed: (...args) => handlePointerMissed.current == null ? void 0 : handlePointerMissed.current(...args),
|
|
113
|
-
onCreated: state => {
|
|
114
|
-
// Connect to event source
|
|
115
|
-
state.events.connect == null ? void 0 : state.events.connect(eventSource ? events.isRef(eventSource) ? eventSource.current : eventSource : divRef.current);
|
|
116
|
-
// Set up compute function
|
|
117
|
-
if (eventPrefix) {
|
|
118
|
-
state.setEvents({
|
|
119
|
-
compute: (event, state) => {
|
|
120
|
-
const x = event[eventPrefix + 'X'];
|
|
121
|
-
const y = event[eventPrefix + 'Y'];
|
|
122
|
-
state.pointer.set(x / state.size.width * 2 - 1, -(y / state.size.height) * 2 + 1);
|
|
123
|
-
state.raycaster.setFromCamera(state.pointer, state.camera);
|
|
124
|
-
}
|
|
125
|
-
});
|
|
126
|
-
}
|
|
127
|
-
// Call onCreated callback
|
|
128
|
-
onCreated == null ? void 0 : onCreated(state);
|
|
129
|
-
}
|
|
130
|
-
});
|
|
131
|
-
root.current.render( /*#__PURE__*/jsxRuntime.jsx(Bridge, {
|
|
132
|
-
children: /*#__PURE__*/jsxRuntime.jsx(events.ErrorBoundary, {
|
|
133
|
-
set: setError,
|
|
134
|
-
children: /*#__PURE__*/jsxRuntime.jsx(React__namespace.Suspense, {
|
|
135
|
-
fallback: /*#__PURE__*/jsxRuntime.jsx(events.Block, {
|
|
136
|
-
set: setBlock
|
|
137
|
-
}),
|
|
138
|
-
children: children != null ? children : null
|
|
139
|
-
})
|
|
140
|
-
})
|
|
141
|
-
}));
|
|
142
|
-
}
|
|
143
|
-
run();
|
|
144
|
-
}
|
|
145
|
-
});
|
|
146
|
-
React__namespace.useEffect(() => {
|
|
147
|
-
const canvas = canvasRef.current;
|
|
148
|
-
if (canvas) return () => events.unmountComponentAtNode(canvas);
|
|
149
|
-
}, []);
|
|
150
|
-
|
|
151
|
-
// When the event source is not this div, we need to set pointer-events to none
|
|
152
|
-
// Or else the canvas will block events from reaching the event source
|
|
153
|
-
const pointerEvents = eventSource ? 'none' : 'auto';
|
|
154
|
-
return /*#__PURE__*/jsxRuntime.jsx("div", {
|
|
155
|
-
ref: divRef,
|
|
156
|
-
style: {
|
|
157
|
-
position: 'relative',
|
|
158
|
-
width: '100%',
|
|
159
|
-
height: '100%',
|
|
160
|
-
overflow: 'hidden',
|
|
161
|
-
pointerEvents,
|
|
162
|
-
...style
|
|
163
|
-
},
|
|
164
|
-
...props,
|
|
165
|
-
children: /*#__PURE__*/jsxRuntime.jsx("div", {
|
|
166
|
-
ref: containerRef,
|
|
167
|
-
style: {
|
|
168
|
-
width: '100%',
|
|
169
|
-
height: '100%'
|
|
170
|
-
},
|
|
171
|
-
children: /*#__PURE__*/jsxRuntime.jsx("canvas", {
|
|
172
|
-
ref: canvasRef,
|
|
173
|
-
style: {
|
|
174
|
-
display: 'block'
|
|
175
|
-
},
|
|
176
|
-
children: fallback
|
|
177
|
-
})
|
|
178
|
-
})
|
|
179
|
-
});
|
|
180
|
-
}
|
|
181
|
-
|
|
182
|
-
/**
|
|
183
|
-
* A DOM canvas which accepts threejs elements as children.
|
|
184
|
-
* @see https://docs.pmnd.rs/react-three-fiber/api/canvas
|
|
185
|
-
*/
|
|
186
|
-
function Canvas(props) {
|
|
187
|
-
return /*#__PURE__*/jsxRuntime.jsx(itsFine.FiberProvider, {
|
|
188
|
-
children: /*#__PURE__*/jsxRuntime.jsx(CanvasImpl, {
|
|
189
|
-
...props
|
|
190
|
-
})
|
|
191
|
-
});
|
|
192
|
-
}
|
|
193
|
-
|
|
194
|
-
exports.ReactThreeFiber = events.threeTypes;
|
|
195
|
-
exports._roots = events._roots;
|
|
196
|
-
exports.act = events.act;
|
|
197
|
-
exports.addAfterEffect = events.addAfterEffect;
|
|
198
|
-
exports.addEffect = events.addEffect;
|
|
199
|
-
exports.addTail = events.addTail;
|
|
200
|
-
exports.advance = events.advance;
|
|
201
|
-
exports.applyProps = events.applyProps;
|
|
202
|
-
exports.buildGraph = events.buildGraph;
|
|
203
|
-
exports.context = events.context;
|
|
204
|
-
exports.createEvents = events.createEvents;
|
|
205
|
-
exports.createPortal = events.createPortal;
|
|
206
|
-
exports.createRoot = events.createRoot;
|
|
207
|
-
exports.dispose = events.dispose;
|
|
208
|
-
exports.events = events.createPointerEvents;
|
|
209
|
-
exports.extend = events.extend;
|
|
210
|
-
exports.flushGlobalEffects = events.flushGlobalEffects;
|
|
211
|
-
exports.flushSync = events.flushSync;
|
|
212
|
-
exports.getRootState = events.getRootState;
|
|
213
|
-
exports.invalidate = events.invalidate;
|
|
214
|
-
exports.reconciler = events.reconciler;
|
|
215
|
-
exports.unmountComponentAtNode = events.unmountComponentAtNode;
|
|
216
|
-
exports.useFrame = events.useFrame;
|
|
217
|
-
exports.useGraph = events.useGraph;
|
|
218
|
-
exports.useInstanceHandle = events.useInstanceHandle;
|
|
219
|
-
exports.useLoader = events.useLoader;
|
|
220
|
-
exports.useStore = events.useStore;
|
|
221
|
-
exports.useThree = events.useThree;
|
|
222
|
-
exports.Canvas = Canvas;
|
|
@@ -1,222 +0,0 @@
|
|
|
1
|
-
'use strict';
|
|
2
|
-
|
|
3
|
-
Object.defineProperty(exports, '__esModule', { value: true });
|
|
4
|
-
|
|
5
|
-
var events = require('./events-5c8d1731.cjs.prod.js');
|
|
6
|
-
var React = require('react');
|
|
7
|
-
var THREE = require('three');
|
|
8
|
-
var useMeasure = require('react-use-measure');
|
|
9
|
-
var itsFine = require('its-fine');
|
|
10
|
-
var jsxRuntime = require('react/jsx-runtime');
|
|
11
|
-
require('react-reconciler/constants');
|
|
12
|
-
require('zustand/traditional');
|
|
13
|
-
require('suspend-react');
|
|
14
|
-
require('react-reconciler');
|
|
15
|
-
require('scheduler');
|
|
16
|
-
|
|
17
|
-
function _interopDefault (e) { return e && e.__esModule ? e : { 'default': e }; }
|
|
18
|
-
|
|
19
|
-
function _interopNamespace(e) {
|
|
20
|
-
if (e && e.__esModule) return e;
|
|
21
|
-
var n = Object.create(null);
|
|
22
|
-
if (e) {
|
|
23
|
-
Object.keys(e).forEach(function (k) {
|
|
24
|
-
if (k !== 'default') {
|
|
25
|
-
var d = Object.getOwnPropertyDescriptor(e, k);
|
|
26
|
-
Object.defineProperty(n, k, d.get ? d : {
|
|
27
|
-
enumerable: true,
|
|
28
|
-
get: function () { return e[k]; }
|
|
29
|
-
});
|
|
30
|
-
}
|
|
31
|
-
});
|
|
32
|
-
}
|
|
33
|
-
n["default"] = e;
|
|
34
|
-
return Object.freeze(n);
|
|
35
|
-
}
|
|
36
|
-
|
|
37
|
-
var React__namespace = /*#__PURE__*/_interopNamespace(React);
|
|
38
|
-
var THREE__namespace = /*#__PURE__*/_interopNamespace(THREE);
|
|
39
|
-
var useMeasure__default = /*#__PURE__*/_interopDefault(useMeasure);
|
|
40
|
-
|
|
41
|
-
function CanvasImpl({
|
|
42
|
-
ref,
|
|
43
|
-
children,
|
|
44
|
-
fallback,
|
|
45
|
-
resize,
|
|
46
|
-
style,
|
|
47
|
-
gl,
|
|
48
|
-
events: events$1 = events.createPointerEvents,
|
|
49
|
-
eventSource,
|
|
50
|
-
eventPrefix,
|
|
51
|
-
shadows,
|
|
52
|
-
linear,
|
|
53
|
-
flat,
|
|
54
|
-
legacy,
|
|
55
|
-
orthographic,
|
|
56
|
-
frameloop,
|
|
57
|
-
dpr,
|
|
58
|
-
performance,
|
|
59
|
-
raycaster,
|
|
60
|
-
camera,
|
|
61
|
-
scene,
|
|
62
|
-
onPointerMissed,
|
|
63
|
-
onCreated,
|
|
64
|
-
...props
|
|
65
|
-
}) {
|
|
66
|
-
// Create a known catalogue of Threejs-native elements
|
|
67
|
-
// This will include the entire THREE namespace by default, users can extend
|
|
68
|
-
// their own elements by using the createRoot API instead
|
|
69
|
-
React__namespace.useMemo(() => events.extend(THREE__namespace), []);
|
|
70
|
-
const Bridge = events.useBridge();
|
|
71
|
-
const [containerRef, containerRect] = useMeasure__default["default"]({
|
|
72
|
-
scroll: true,
|
|
73
|
-
debounce: {
|
|
74
|
-
scroll: 50,
|
|
75
|
-
resize: 0
|
|
76
|
-
},
|
|
77
|
-
...resize
|
|
78
|
-
});
|
|
79
|
-
const canvasRef = React__namespace.useRef(null);
|
|
80
|
-
const divRef = React__namespace.useRef(null);
|
|
81
|
-
React__namespace.useImperativeHandle(ref, () => canvasRef.current);
|
|
82
|
-
const handlePointerMissed = events.useMutableCallback(onPointerMissed);
|
|
83
|
-
const [block, setBlock] = React__namespace.useState(false);
|
|
84
|
-
const [error, setError] = React__namespace.useState(false);
|
|
85
|
-
|
|
86
|
-
// Suspend this component if block is a promise (2nd run)
|
|
87
|
-
if (block) throw block;
|
|
88
|
-
// Throw exception outwards if anything within canvas throws
|
|
89
|
-
if (error) throw error;
|
|
90
|
-
const root = React__namespace.useRef(null);
|
|
91
|
-
events.useIsomorphicLayoutEffect(() => {
|
|
92
|
-
const canvas = canvasRef.current;
|
|
93
|
-
if (containerRect.width > 0 && containerRect.height > 0 && canvas) {
|
|
94
|
-
if (!root.current) root.current = events.createRoot(canvas);
|
|
95
|
-
async function run() {
|
|
96
|
-
await root.current.configure({
|
|
97
|
-
gl,
|
|
98
|
-
scene,
|
|
99
|
-
events: events$1,
|
|
100
|
-
shadows,
|
|
101
|
-
linear,
|
|
102
|
-
flat,
|
|
103
|
-
legacy,
|
|
104
|
-
orthographic,
|
|
105
|
-
frameloop,
|
|
106
|
-
dpr,
|
|
107
|
-
performance,
|
|
108
|
-
raycaster,
|
|
109
|
-
camera,
|
|
110
|
-
size: containerRect,
|
|
111
|
-
// Pass mutable reference to onPointerMissed so it's free to update
|
|
112
|
-
onPointerMissed: (...args) => handlePointerMissed.current == null ? void 0 : handlePointerMissed.current(...args),
|
|
113
|
-
onCreated: state => {
|
|
114
|
-
// Connect to event source
|
|
115
|
-
state.events.connect == null ? void 0 : state.events.connect(eventSource ? events.isRef(eventSource) ? eventSource.current : eventSource : divRef.current);
|
|
116
|
-
// Set up compute function
|
|
117
|
-
if (eventPrefix) {
|
|
118
|
-
state.setEvents({
|
|
119
|
-
compute: (event, state) => {
|
|
120
|
-
const x = event[eventPrefix + 'X'];
|
|
121
|
-
const y = event[eventPrefix + 'Y'];
|
|
122
|
-
state.pointer.set(x / state.size.width * 2 - 1, -(y / state.size.height) * 2 + 1);
|
|
123
|
-
state.raycaster.setFromCamera(state.pointer, state.camera);
|
|
124
|
-
}
|
|
125
|
-
});
|
|
126
|
-
}
|
|
127
|
-
// Call onCreated callback
|
|
128
|
-
onCreated == null ? void 0 : onCreated(state);
|
|
129
|
-
}
|
|
130
|
-
});
|
|
131
|
-
root.current.render( /*#__PURE__*/jsxRuntime.jsx(Bridge, {
|
|
132
|
-
children: /*#__PURE__*/jsxRuntime.jsx(events.ErrorBoundary, {
|
|
133
|
-
set: setError,
|
|
134
|
-
children: /*#__PURE__*/jsxRuntime.jsx(React__namespace.Suspense, {
|
|
135
|
-
fallback: /*#__PURE__*/jsxRuntime.jsx(events.Block, {
|
|
136
|
-
set: setBlock
|
|
137
|
-
}),
|
|
138
|
-
children: children != null ? children : null
|
|
139
|
-
})
|
|
140
|
-
})
|
|
141
|
-
}));
|
|
142
|
-
}
|
|
143
|
-
run();
|
|
144
|
-
}
|
|
145
|
-
});
|
|
146
|
-
React__namespace.useEffect(() => {
|
|
147
|
-
const canvas = canvasRef.current;
|
|
148
|
-
if (canvas) return () => events.unmountComponentAtNode(canvas);
|
|
149
|
-
}, []);
|
|
150
|
-
|
|
151
|
-
// When the event source is not this div, we need to set pointer-events to none
|
|
152
|
-
// Or else the canvas will block events from reaching the event source
|
|
153
|
-
const pointerEvents = eventSource ? 'none' : 'auto';
|
|
154
|
-
return /*#__PURE__*/jsxRuntime.jsx("div", {
|
|
155
|
-
ref: divRef,
|
|
156
|
-
style: {
|
|
157
|
-
position: 'relative',
|
|
158
|
-
width: '100%',
|
|
159
|
-
height: '100%',
|
|
160
|
-
overflow: 'hidden',
|
|
161
|
-
pointerEvents,
|
|
162
|
-
...style
|
|
163
|
-
},
|
|
164
|
-
...props,
|
|
165
|
-
children: /*#__PURE__*/jsxRuntime.jsx("div", {
|
|
166
|
-
ref: containerRef,
|
|
167
|
-
style: {
|
|
168
|
-
width: '100%',
|
|
169
|
-
height: '100%'
|
|
170
|
-
},
|
|
171
|
-
children: /*#__PURE__*/jsxRuntime.jsx("canvas", {
|
|
172
|
-
ref: canvasRef,
|
|
173
|
-
style: {
|
|
174
|
-
display: 'block'
|
|
175
|
-
},
|
|
176
|
-
children: fallback
|
|
177
|
-
})
|
|
178
|
-
})
|
|
179
|
-
});
|
|
180
|
-
}
|
|
181
|
-
|
|
182
|
-
/**
|
|
183
|
-
* A DOM canvas which accepts threejs elements as children.
|
|
184
|
-
* @see https://docs.pmnd.rs/react-three-fiber/api/canvas
|
|
185
|
-
*/
|
|
186
|
-
function Canvas(props) {
|
|
187
|
-
return /*#__PURE__*/jsxRuntime.jsx(itsFine.FiberProvider, {
|
|
188
|
-
children: /*#__PURE__*/jsxRuntime.jsx(CanvasImpl, {
|
|
189
|
-
...props
|
|
190
|
-
})
|
|
191
|
-
});
|
|
192
|
-
}
|
|
193
|
-
|
|
194
|
-
exports.ReactThreeFiber = events.threeTypes;
|
|
195
|
-
exports._roots = events._roots;
|
|
196
|
-
exports.act = events.act;
|
|
197
|
-
exports.addAfterEffect = events.addAfterEffect;
|
|
198
|
-
exports.addEffect = events.addEffect;
|
|
199
|
-
exports.addTail = events.addTail;
|
|
200
|
-
exports.advance = events.advance;
|
|
201
|
-
exports.applyProps = events.applyProps;
|
|
202
|
-
exports.buildGraph = events.buildGraph;
|
|
203
|
-
exports.context = events.context;
|
|
204
|
-
exports.createEvents = events.createEvents;
|
|
205
|
-
exports.createPortal = events.createPortal;
|
|
206
|
-
exports.createRoot = events.createRoot;
|
|
207
|
-
exports.dispose = events.dispose;
|
|
208
|
-
exports.events = events.createPointerEvents;
|
|
209
|
-
exports.extend = events.extend;
|
|
210
|
-
exports.flushGlobalEffects = events.flushGlobalEffects;
|
|
211
|
-
exports.flushSync = events.flushSync;
|
|
212
|
-
exports.getRootState = events.getRootState;
|
|
213
|
-
exports.invalidate = events.invalidate;
|
|
214
|
-
exports.reconciler = events.reconciler;
|
|
215
|
-
exports.unmountComponentAtNode = events.unmountComponentAtNode;
|
|
216
|
-
exports.useFrame = events.useFrame;
|
|
217
|
-
exports.useGraph = events.useGraph;
|
|
218
|
-
exports.useInstanceHandle = events.useInstanceHandle;
|
|
219
|
-
exports.useLoader = events.useLoader;
|
|
220
|
-
exports.useStore = events.useStore;
|
|
221
|
-
exports.useThree = events.useThree;
|
|
222
|
-
exports.Canvas = Canvas;
|
|
@@ -1,167 +0,0 @@
|
|
|
1
|
-
import { e as extend, u as useBridge, a as useMutableCallback, b as useIsomorphicLayoutEffect, c as createRoot, i as isRef, E as ErrorBoundary, B as Block, d as unmountComponentAtNode, f as createPointerEvents } from './events-1eccaf1c.esm.js';
|
|
2
|
-
export { t as ReactThreeFiber, _ as _roots, x as act, k as addAfterEffect, j as addEffect, l as addTail, n as advance, s as applyProps, y as buildGraph, q as context, g as createEvents, o as createPortal, c as createRoot, w as dispose, f as events, e as extend, h as flushGlobalEffects, p as flushSync, v as getRootState, m as invalidate, r as reconciler, d as unmountComponentAtNode, D as useFrame, F as useGraph, z as useInstanceHandle, G as useLoader, A as useStore, C as useThree } from './events-1eccaf1c.esm.js';
|
|
3
|
-
import * as React from 'react';
|
|
4
|
-
import * as THREE from 'three';
|
|
5
|
-
import useMeasure from 'react-use-measure';
|
|
6
|
-
import { FiberProvider } from 'its-fine';
|
|
7
|
-
import { jsx } from 'react/jsx-runtime';
|
|
8
|
-
import 'react-reconciler/constants';
|
|
9
|
-
import 'zustand/traditional';
|
|
10
|
-
import 'suspend-react';
|
|
11
|
-
import 'react-reconciler';
|
|
12
|
-
import 'scheduler';
|
|
13
|
-
|
|
14
|
-
function CanvasImpl({
|
|
15
|
-
ref,
|
|
16
|
-
children,
|
|
17
|
-
fallback,
|
|
18
|
-
resize,
|
|
19
|
-
style,
|
|
20
|
-
gl,
|
|
21
|
-
events = createPointerEvents,
|
|
22
|
-
eventSource,
|
|
23
|
-
eventPrefix,
|
|
24
|
-
shadows,
|
|
25
|
-
linear,
|
|
26
|
-
flat,
|
|
27
|
-
legacy,
|
|
28
|
-
orthographic,
|
|
29
|
-
frameloop,
|
|
30
|
-
dpr,
|
|
31
|
-
performance,
|
|
32
|
-
raycaster,
|
|
33
|
-
camera,
|
|
34
|
-
scene,
|
|
35
|
-
onPointerMissed,
|
|
36
|
-
onCreated,
|
|
37
|
-
...props
|
|
38
|
-
}) {
|
|
39
|
-
// Create a known catalogue of Threejs-native elements
|
|
40
|
-
// This will include the entire THREE namespace by default, users can extend
|
|
41
|
-
// their own elements by using the createRoot API instead
|
|
42
|
-
React.useMemo(() => extend(THREE), []);
|
|
43
|
-
const Bridge = useBridge();
|
|
44
|
-
const [containerRef, containerRect] = useMeasure({
|
|
45
|
-
scroll: true,
|
|
46
|
-
debounce: {
|
|
47
|
-
scroll: 50,
|
|
48
|
-
resize: 0
|
|
49
|
-
},
|
|
50
|
-
...resize
|
|
51
|
-
});
|
|
52
|
-
const canvasRef = React.useRef(null);
|
|
53
|
-
const divRef = React.useRef(null);
|
|
54
|
-
React.useImperativeHandle(ref, () => canvasRef.current);
|
|
55
|
-
const handlePointerMissed = useMutableCallback(onPointerMissed);
|
|
56
|
-
const [block, setBlock] = React.useState(false);
|
|
57
|
-
const [error, setError] = React.useState(false);
|
|
58
|
-
|
|
59
|
-
// Suspend this component if block is a promise (2nd run)
|
|
60
|
-
if (block) throw block;
|
|
61
|
-
// Throw exception outwards if anything within canvas throws
|
|
62
|
-
if (error) throw error;
|
|
63
|
-
const root = React.useRef(null);
|
|
64
|
-
useIsomorphicLayoutEffect(() => {
|
|
65
|
-
const canvas = canvasRef.current;
|
|
66
|
-
if (containerRect.width > 0 && containerRect.height > 0 && canvas) {
|
|
67
|
-
if (!root.current) root.current = createRoot(canvas);
|
|
68
|
-
async function run() {
|
|
69
|
-
await root.current.configure({
|
|
70
|
-
gl,
|
|
71
|
-
scene,
|
|
72
|
-
events,
|
|
73
|
-
shadows,
|
|
74
|
-
linear,
|
|
75
|
-
flat,
|
|
76
|
-
legacy,
|
|
77
|
-
orthographic,
|
|
78
|
-
frameloop,
|
|
79
|
-
dpr,
|
|
80
|
-
performance,
|
|
81
|
-
raycaster,
|
|
82
|
-
camera,
|
|
83
|
-
size: containerRect,
|
|
84
|
-
// Pass mutable reference to onPointerMissed so it's free to update
|
|
85
|
-
onPointerMissed: (...args) => handlePointerMissed.current == null ? void 0 : handlePointerMissed.current(...args),
|
|
86
|
-
onCreated: state => {
|
|
87
|
-
// Connect to event source
|
|
88
|
-
state.events.connect == null ? void 0 : state.events.connect(eventSource ? isRef(eventSource) ? eventSource.current : eventSource : divRef.current);
|
|
89
|
-
// Set up compute function
|
|
90
|
-
if (eventPrefix) {
|
|
91
|
-
state.setEvents({
|
|
92
|
-
compute: (event, state) => {
|
|
93
|
-
const x = event[eventPrefix + 'X'];
|
|
94
|
-
const y = event[eventPrefix + 'Y'];
|
|
95
|
-
state.pointer.set(x / state.size.width * 2 - 1, -(y / state.size.height) * 2 + 1);
|
|
96
|
-
state.raycaster.setFromCamera(state.pointer, state.camera);
|
|
97
|
-
}
|
|
98
|
-
});
|
|
99
|
-
}
|
|
100
|
-
// Call onCreated callback
|
|
101
|
-
onCreated == null ? void 0 : onCreated(state);
|
|
102
|
-
}
|
|
103
|
-
});
|
|
104
|
-
root.current.render( /*#__PURE__*/jsx(Bridge, {
|
|
105
|
-
children: /*#__PURE__*/jsx(ErrorBoundary, {
|
|
106
|
-
set: setError,
|
|
107
|
-
children: /*#__PURE__*/jsx(React.Suspense, {
|
|
108
|
-
fallback: /*#__PURE__*/jsx(Block, {
|
|
109
|
-
set: setBlock
|
|
110
|
-
}),
|
|
111
|
-
children: children != null ? children : null
|
|
112
|
-
})
|
|
113
|
-
})
|
|
114
|
-
}));
|
|
115
|
-
}
|
|
116
|
-
run();
|
|
117
|
-
}
|
|
118
|
-
});
|
|
119
|
-
React.useEffect(() => {
|
|
120
|
-
const canvas = canvasRef.current;
|
|
121
|
-
if (canvas) return () => unmountComponentAtNode(canvas);
|
|
122
|
-
}, []);
|
|
123
|
-
|
|
124
|
-
// When the event source is not this div, we need to set pointer-events to none
|
|
125
|
-
// Or else the canvas will block events from reaching the event source
|
|
126
|
-
const pointerEvents = eventSource ? 'none' : 'auto';
|
|
127
|
-
return /*#__PURE__*/jsx("div", {
|
|
128
|
-
ref: divRef,
|
|
129
|
-
style: {
|
|
130
|
-
position: 'relative',
|
|
131
|
-
width: '100%',
|
|
132
|
-
height: '100%',
|
|
133
|
-
overflow: 'hidden',
|
|
134
|
-
pointerEvents,
|
|
135
|
-
...style
|
|
136
|
-
},
|
|
137
|
-
...props,
|
|
138
|
-
children: /*#__PURE__*/jsx("div", {
|
|
139
|
-
ref: containerRef,
|
|
140
|
-
style: {
|
|
141
|
-
width: '100%',
|
|
142
|
-
height: '100%'
|
|
143
|
-
},
|
|
144
|
-
children: /*#__PURE__*/jsx("canvas", {
|
|
145
|
-
ref: canvasRef,
|
|
146
|
-
style: {
|
|
147
|
-
display: 'block'
|
|
148
|
-
},
|
|
149
|
-
children: fallback
|
|
150
|
-
})
|
|
151
|
-
})
|
|
152
|
-
});
|
|
153
|
-
}
|
|
154
|
-
|
|
155
|
-
/**
|
|
156
|
-
* A DOM canvas which accepts threejs elements as children.
|
|
157
|
-
* @see https://docs.pmnd.rs/react-three-fiber/api/canvas
|
|
158
|
-
*/
|
|
159
|
-
function Canvas(props) {
|
|
160
|
-
return /*#__PURE__*/jsx(FiberProvider, {
|
|
161
|
-
children: /*#__PURE__*/jsx(CanvasImpl, {
|
|
162
|
-
...props
|
|
163
|
-
})
|
|
164
|
-
});
|
|
165
|
-
}
|
|
166
|
-
|
|
167
|
-
export { Canvas };
|
|
@@ -1,2 +0,0 @@
|
|
|
1
|
-
export * from "../../dist/declarations/src/native";
|
|
2
|
-
//# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoicmVhY3QtdGhyZWUtZmliZXItbmF0aXZlLmNqcy5kLnRzIiwic291cmNlUm9vdCI6IiIsInNvdXJjZXMiOlsiLi4vLi4vZGlzdC9kZWNsYXJhdGlvbnMvc3JjL25hdGl2ZS5kLnRzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUFBIn0=
|