@react-three/drei 9.31.1 → 9.32.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/README.md +75 -1
- package/core/Instances.cjs.js +1 -1
- package/core/Instances.d.ts +32 -17
- package/core/Instances.js +69 -11
- package/core/MapControls.d.ts +1 -1
- package/core/Points.cjs.js +1 -1
- package/core/Points.d.ts +36 -1
- package/core/Points.js +89 -31
- package/core/TrackballControls.d.ts +1 -1
- package/core/index.cjs.js +1 -1
- package/core/index.js +1 -2
- package/index.cjs.js +1 -1
- package/index.js +2 -1
- package/native/index.cjs.js +1 -1
- package/native/index.js +1 -2
- package/package.json +1 -1
- package/web/KeyboardControls.cjs.js +1 -0
- package/web/KeyboardControls.d.ts +19 -0
- package/web/KeyboardControls.js +101 -0
- package/web/index.cjs.js +1 -1
- package/web/index.d.ts +1 -0
- package/web/index.js +3 -2
- package/helpers/Position.cjs.js +0 -1
- package/helpers/Position.d.ts +0 -18
- package/helpers/Position.js +0 -63
package/README.md
CHANGED
|
@@ -48,7 +48,8 @@ The `native` route of the library **does not** export `Html` or `Loader`. The de
|
|
|
48
48
|
<li><a href="#controls">PointerLockControls</a></li>
|
|
49
49
|
<li><a href="#controls">FirstPersonControls</a></li>
|
|
50
50
|
<li><a href="#scrollcontrols">ScrollControls</a></li>
|
|
51
|
-
<li><a href="#presentationcontrols">PresentationControls</a></li>
|
|
51
|
+
<li><a href="#presentationcontrols">PresentationControls</a></li>
|
|
52
|
+
<li><a href="#keyboardcontrols">KeyboardControls</a></li>
|
|
52
53
|
</ul>
|
|
53
54
|
<li><a href="#gizmos">Gizmos</a></li>
|
|
54
55
|
<ul>
|
|
@@ -385,6 +386,79 @@ Semi-OrbitControls with spring-physics, polar zoom and snap-back, for presentati
|
|
|
385
386
|
</PresentationControls>
|
|
386
387
|
```
|
|
387
388
|
|
|
389
|
+
#### KeyboardControls
|
|
390
|
+
|
|
391
|
+

|
|
392
|
+
|
|
393
|
+
A rudimentary keyboard controller which distributes your defined data-model to the `useKeyboard` hook. It's a rather simple way to get started with keyboard input.
|
|
394
|
+
|
|
395
|
+
```tsx
|
|
396
|
+
type KeyboardControlsState = { [key: string]: boolean }
|
|
397
|
+
|
|
398
|
+
type KeyboardControlsEntry = {
|
|
399
|
+
/** Name of the action */
|
|
400
|
+
name: string
|
|
401
|
+
/** The keys that define it, you can use either event.key, or event.code */
|
|
402
|
+
keys: string[]
|
|
403
|
+
/** If the event receives the keyup event, true by default */
|
|
404
|
+
up?: boolean
|
|
405
|
+
}
|
|
406
|
+
|
|
407
|
+
type KeyboardControlsProps = {
|
|
408
|
+
/** A map of named keys */
|
|
409
|
+
map: KeyboardControlsEntry[]
|
|
410
|
+
/** All children will be able to useKeyboardControls */
|
|
411
|
+
children: React.ReactNode
|
|
412
|
+
/** Optional onchange event */
|
|
413
|
+
onChange: (name: string, pressed: boolean, state: KeyboardControlsState) => void
|
|
414
|
+
/** Optional event source */
|
|
415
|
+
domElement?: HTMLElement
|
|
416
|
+
}
|
|
417
|
+
```
|
|
418
|
+
|
|
419
|
+
You start by wrapping your app, or scene, into `<KeyboardControls>`.
|
|
420
|
+
|
|
421
|
+
```jsx
|
|
422
|
+
function App() {
|
|
423
|
+
return (
|
|
424
|
+
<KeyboardControls
|
|
425
|
+
map={[
|
|
426
|
+
{ name: 'forward', keys: ['ArrowUp', 'w', 'W'] },
|
|
427
|
+
{ name: 'backward', keys: ['ArrowDown', 's', 'S'] },
|
|
428
|
+
{ name: 'leftward', keys: ['ArrowLeft', 'a', 'A'] },
|
|
429
|
+
{ name: 'rightward', keys: ['ArrowRight', 'd', 'D'] },
|
|
430
|
+
{ name: 'jump', keys: ['Space'] },
|
|
431
|
+
]}>
|
|
432
|
+
<App />
|
|
433
|
+
</KeyboardControls>
|
|
434
|
+
```
|
|
435
|
+
|
|
436
|
+
You can either respond to input reactively, it uses zustand (width the `subscribeWithSelector` middleware) so all the rules apply:
|
|
437
|
+
|
|
438
|
+
```jsx
|
|
439
|
+
function Foo() {
|
|
440
|
+
const pressed = useKeyboardControls(state => foward)
|
|
441
|
+
```
|
|
442
|
+
|
|
443
|
+
Or transiently, either by `subscribe`, which is a function which returns a function to unsubscribe, so you can pair it with useEffect for cleanup, or `get`, which fetches fresh state non-reactively.
|
|
444
|
+
|
|
445
|
+
```jsx
|
|
446
|
+
function Foo() {
|
|
447
|
+
const [sub, get] = useKeyboardControls()
|
|
448
|
+
|
|
449
|
+
useEffect(() => {
|
|
450
|
+
return sub(state => state.forward, pressed = {
|
|
451
|
+
console.log('forward', pressed)
|
|
452
|
+
})
|
|
453
|
+
}, [])
|
|
454
|
+
|
|
455
|
+
useFrame(() => {
|
|
456
|
+
// Fetch fresh data from store
|
|
457
|
+
const pressed = get().backward
|
|
458
|
+
})
|
|
459
|
+
}
|
|
460
|
+
```
|
|
461
|
+
|
|
388
462
|
# Gizmos
|
|
389
463
|
|
|
390
464
|
#### GizmoHelper
|
package/core/Instances.cjs.js
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("@babel/runtime/helpers/extends"),t=require("three"),r=require("react"),n=require("@react-three/fiber"),a=require("react-merge-refs"),c=require("react-composer")
|
|
1
|
+
"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("@babel/runtime/helpers/extends"),t=require("three"),r=require("react"),n=require("@react-three/fiber"),a=require("react-merge-refs"),c=require("react-composer");function i(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}function s(e){if(e&&e.__esModule)return e;var t=Object.create(null);return e&&Object.keys(e).forEach((function(r){if("default"!==r){var n=Object.getOwnPropertyDescriptor(e,r);Object.defineProperty(t,r,n.get?n:{enumerable:!0,get:function(){return e[r]}})}})),t.default=e,Object.freeze(t)}var o=i(e),u=s(t),l=s(r),f=i(a),d=i(c);const m=new u.Matrix4,y=new u.Matrix4,p=[],h=new u.Mesh;class x extends u.Group{constructor(){super(),this.color=new u.Color("white"),this.instance={current:void 0},this.instanceKey={current:void 0}}get geometry(){var e;return null==(e=this.instance.current)?void 0:e.geometry}raycast(e,t){const r=this.instance.current;if(!r)return;if(!r.geometry||!r.material)return;h.geometry=r.geometry;const n=r.matrixWorld;let a=r.userData.instances.indexOf(this.instanceKey);if(!(-1===a||a>r.count)){r.getMatrixAt(a,m),y.multiplyMatrices(n,m),h.matrixWorld=y,h.raycast(e,p);for(let e=0,r=p.length;e<r;e++){const r=p[e];r.instanceId=a,r.object=this,t.push(r)}p.length=0}}}let g,M;const b=l.createContext(null),w=new u.Matrix4,v=new u.Matrix4,A=new u.Matrix4,E=new u.Vector3,j=new u.Quaternion,O=new u.Vector3,P=l.forwardRef((({context:e,children:t,...r},a)=>{l.useMemo((()=>n.extend({PositionMesh:x})),[]);const c=l.useRef(),{subscribe:i,getParent:s}=l.useContext(e||b);return l.useLayoutEffect((()=>i(c)),[]),l.createElement("positionMesh",o.default({instance:s(),instanceKey:c,ref:f.default([a,c])},r),t)})),C=l.forwardRef((({children:e,range:t,limit:r=1e3,frames:a=1/0,...c},i)=>{const[{context:s,instance:d}]=l.useState((()=>{const e=l.createContext(null);return{context:e,instance:l.forwardRef(((t,r)=>l.createElement(P,o.default({context:e},t,{ref:r}))))}})),m=l.useRef(null),[y,p]=l.useState([]),[[h,x]]=l.useState((()=>{const e=new Float32Array(16*r);for(g=0;g<r;g++)A.identity().toArray(e,16*g);return[e,new Float32Array([...new Array(3*r)].map((()=>1)))]}));l.useEffect((()=>{m.current.instanceMatrix.needsUpdate=!0}));let C=0,D=0;n.useFrame((()=>{if(a===1/0||C<a){for(m.current.updateMatrix(),m.current.updateMatrixWorld(),w.copy(m.current.matrixWorld).invert(),D=Math.min(r,void 0!==t?t:r,y.length),m.current.count=D,m.current.instanceMatrix.updateRange.count=16*D,m.current.instanceColor.updateRange.count=3*D,g=0;g<y.length;g++)M=y[g].current,M.matrixWorld.decompose(E,j,O),v.compose(E,j,O).premultiply(w),v.toArray(h,16*g),m.current.instanceMatrix.needsUpdate=!0,M.color.toArray(x,3*g),m.current.instanceColor.needsUpdate=!0;C++}}));const R=l.useMemo((()=>({getParent:()=>m,subscribe:e=>(p((t=>[...t,e])),()=>p((t=>t.filter((t=>t.current!==e.current)))))})),[]);return l.createElement("instancedMesh",o.default({userData:{instances:y},matrixAutoUpdate:!1,ref:f.default([i,m]),args:[null,null,0],raycast:()=>null},c),l.createElement("instancedBufferAttribute",{attach:"instanceMatrix",count:h.length/16,array:h,itemSize:16,usage:u.DynamicDrawUsage}),l.createElement("instancedBufferAttribute",{attach:"instanceColor",count:x.length/3,array:x,itemSize:3,usage:u.DynamicDrawUsage}),"function"==typeof e?l.createElement(s.Provider,{value:R},e(d)):l.createElement(b.Provider,{value:R},e))}));exports.Instance=P,exports.Instances=C,exports.Merged=function({meshes:e,children:t,...r}){const n=Array.isArray(e);if(!n)for(const t of Object.keys(e))e[t].isMesh||delete e[t];return l.createElement(d.default,{components:(n?e:Object.values(e)).map((({geometry:e,material:t})=>l.createElement(C,o.default({key:e.uuid,geometry:e,material:t},r))))},(r=>n?t(...r):t(Object.keys(e).filter((t=>e[t].isMesh)).reduce(((e,t,n)=>({...e,[t]:r[n]})),{}))))};
|
package/core/Instances.d.ts
CHANGED
|
@@ -1,6 +1,13 @@
|
|
|
1
1
|
import * as THREE from 'three';
|
|
2
2
|
import * as React from 'react';
|
|
3
|
-
import {
|
|
3
|
+
import { ReactThreeFiber } from '@react-three/fiber';
|
|
4
|
+
declare global {
|
|
5
|
+
namespace JSX {
|
|
6
|
+
interface IntrinsicElements {
|
|
7
|
+
positionMesh: ReactThreeFiber.Object3DNode<PositionMesh, typeof PositionMesh>;
|
|
8
|
+
}
|
|
9
|
+
}
|
|
10
|
+
}
|
|
4
11
|
declare type Api = {
|
|
5
12
|
getParent: () => React.MutableRefObject<InstancedMesh>;
|
|
6
13
|
subscribe: (ref: any) => void;
|
|
@@ -14,27 +21,35 @@ declare type InstancedMesh = Omit<THREE.InstancedMesh, 'instanceMatrix' | 'insta
|
|
|
14
21
|
instanceMatrix: THREE.InstancedBufferAttribute;
|
|
15
22
|
instanceColor: THREE.InstancedBufferAttribute;
|
|
16
23
|
};
|
|
17
|
-
declare
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
24
|
+
declare class PositionMesh extends THREE.Group {
|
|
25
|
+
color: THREE.Color;
|
|
26
|
+
instance: React.MutableRefObject<THREE.InstancedMesh | undefined>;
|
|
27
|
+
instanceKey: React.MutableRefObject<JSX.IntrinsicElements['positionMesh'] | undefined>;
|
|
28
|
+
constructor();
|
|
29
|
+
get geometry(): THREE.BufferGeometry | undefined;
|
|
30
|
+
raycast(raycaster: THREE.Raycaster, intersects: THREE.Intersection[]): void;
|
|
31
|
+
}
|
|
32
|
+
declare const Instance: React.ForwardRefExoticComponent<Pick<Omit<ReactThreeFiber.ExtendedColors<ReactThreeFiber.Overwrite<Partial<PositionMesh>, ReactThreeFiber.NodeProps<PositionMesh, typeof PositionMesh>>>, ReactThreeFiber.NonFunctionKeys<{
|
|
33
|
+
position?: ReactThreeFiber.Vector3 | undefined;
|
|
34
|
+
up?: ReactThreeFiber.Vector3 | undefined;
|
|
35
|
+
scale?: ReactThreeFiber.Vector3 | undefined;
|
|
36
|
+
rotation?: ReactThreeFiber.Euler | undefined;
|
|
37
|
+
matrix?: ReactThreeFiber.Matrix4 | undefined;
|
|
38
|
+
quaternion?: ReactThreeFiber.Quaternion | undefined;
|
|
39
|
+
layers?: ReactThreeFiber.Layers | undefined;
|
|
25
40
|
dispose?: (() => void) | null | undefined;
|
|
26
41
|
}>> & {
|
|
27
|
-
position?:
|
|
28
|
-
up?:
|
|
29
|
-
scale?:
|
|
30
|
-
rotation?:
|
|
31
|
-
matrix?:
|
|
32
|
-
quaternion?:
|
|
33
|
-
layers?:
|
|
42
|
+
position?: ReactThreeFiber.Vector3 | undefined;
|
|
43
|
+
up?: ReactThreeFiber.Vector3 | undefined;
|
|
44
|
+
scale?: ReactThreeFiber.Vector3 | undefined;
|
|
45
|
+
rotation?: ReactThreeFiber.Euler | undefined;
|
|
46
|
+
matrix?: ReactThreeFiber.Matrix4 | undefined;
|
|
47
|
+
quaternion?: ReactThreeFiber.Quaternion | undefined;
|
|
48
|
+
layers?: ReactThreeFiber.Layers | undefined;
|
|
34
49
|
dispose?: (() => void) | null | undefined;
|
|
35
50
|
} & import("@react-three/fiber/dist/declarations/src/core/events").EventHandlers & {
|
|
36
51
|
context?: React.Context<Api> | undefined;
|
|
37
|
-
}, "visible" | "attach" | "args" | "children" | "key" | "onUpdate" | "position" | "up" | "scale" | "rotation" | "matrix" | "quaternion" | "layers" | "dispose" | "type" | "isGroup" | "id" | "uuid" | "name" | "parent" | "modelViewMatrix" | "normalMatrix" | "matrixWorld" | "matrixAutoUpdate" | "matrixWorldNeedsUpdate" | "castShadow" | "receiveShadow" | "frustumCulled" | "renderOrder" | "animations" | "userData" | "customDepthMaterial" | "customDistanceMaterial" | "isObject3D" | "onBeforeRender" | "onAfterRender" | "applyMatrix4" | "applyQuaternion" | "setRotationFromAxisAngle" | "setRotationFromEuler" | "setRotationFromMatrix" | "setRotationFromQuaternion" | "rotateOnAxis" | "rotateOnWorldAxis" | "rotateX" | "rotateY" | "rotateZ" | "translateOnAxis" | "translateX" | "translateY" | "translateZ" | "localToWorld" | "worldToLocal" | "lookAt" | "add" | "remove" | "removeFromParent" | "clear" | "getObjectById" | "getObjectByName" | "getObjectByProperty" | "getWorldPosition" | "getWorldQuaternion" | "getWorldScale" | "getWorldDirection" | "raycast" | "traverse" | "traverseVisible" | "traverseAncestors" | "updateMatrix" | "updateMatrixWorld" | "updateWorldMatrix" | "toJSON" | "clone" | "copy" | "addEventListener" | "hasEventListener" | "removeEventListener" | "dispatchEvent" | "color" | keyof import("@react-three/fiber/dist/declarations/src/core/events").EventHandlers | "
|
|
52
|
+
}, "visible" | "attach" | "args" | "children" | "key" | "onUpdate" | "position" | "up" | "scale" | "rotation" | "matrix" | "quaternion" | "layers" | "dispose" | "type" | "isGroup" | "id" | "uuid" | "name" | "parent" | "modelViewMatrix" | "normalMatrix" | "matrixWorld" | "matrixAutoUpdate" | "matrixWorldNeedsUpdate" | "castShadow" | "receiveShadow" | "frustumCulled" | "renderOrder" | "animations" | "userData" | "customDepthMaterial" | "customDistanceMaterial" | "isObject3D" | "onBeforeRender" | "onAfterRender" | "applyMatrix4" | "applyQuaternion" | "setRotationFromAxisAngle" | "setRotationFromEuler" | "setRotationFromMatrix" | "setRotationFromQuaternion" | "rotateOnAxis" | "rotateOnWorldAxis" | "rotateX" | "rotateY" | "rotateZ" | "translateOnAxis" | "translateX" | "translateY" | "translateZ" | "localToWorld" | "worldToLocal" | "lookAt" | "add" | "remove" | "removeFromParent" | "clear" | "getObjectById" | "getObjectByName" | "getObjectByProperty" | "getWorldPosition" | "getWorldQuaternion" | "getWorldScale" | "getWorldDirection" | "raycast" | "traverse" | "traverseVisible" | "traverseAncestors" | "updateMatrix" | "updateMatrixWorld" | "updateWorldMatrix" | "toJSON" | "clone" | "copy" | "addEventListener" | "hasEventListener" | "removeEventListener" | "dispatchEvent" | "color" | keyof import("@react-three/fiber/dist/declarations/src/core/events").EventHandlers | "geometry" | "context" | "instance" | "instanceKey"> & React.RefAttributes<unknown>>;
|
|
38
53
|
declare const Instances: React.ForwardRefExoticComponent<Pick<InstancesProps, "visible" | "attach" | "args" | "children" | "key" | "onUpdate" | "position" | "up" | "scale" | "rotation" | "matrix" | "quaternion" | "layers" | "dispose" | "type" | "id" | "uuid" | "name" | "parent" | "modelViewMatrix" | "normalMatrix" | "matrixWorld" | "matrixAutoUpdate" | "matrixWorldNeedsUpdate" | "castShadow" | "receiveShadow" | "frustumCulled" | "renderOrder" | "animations" | "userData" | "customDepthMaterial" | "customDistanceMaterial" | "isObject3D" | "onBeforeRender" | "onAfterRender" | "applyMatrix4" | "applyQuaternion" | "setRotationFromAxisAngle" | "setRotationFromEuler" | "setRotationFromMatrix" | "setRotationFromQuaternion" | "rotateOnAxis" | "rotateOnWorldAxis" | "rotateX" | "rotateY" | "rotateZ" | "translateOnAxis" | "translateX" | "translateY" | "translateZ" | "localToWorld" | "worldToLocal" | "lookAt" | "add" | "remove" | "removeFromParent" | "clear" | "getObjectById" | "getObjectByName" | "getObjectByProperty" | "getWorldPosition" | "getWorldQuaternion" | "getWorldScale" | "getWorldDirection" | "raycast" | "traverse" | "traverseVisible" | "traverseAncestors" | "updateMatrix" | "updateMatrixWorld" | "updateWorldMatrix" | "toJSON" | "clone" | "copy" | "addEventListener" | "hasEventListener" | "removeEventListener" | "dispatchEvent" | keyof import("@react-three/fiber/dist/declarations/src/core/events").EventHandlers | "range" | "material" | "geometry" | "morphTargetInfluences" | "morphTargetDictionary" | "isMesh" | "updateMorphTargets" | "count" | "instanceColor" | "instanceMatrix" | "isInstancedMesh" | "getColorAt" | "getMatrixAt" | "setColorAt" | "setMatrixAt" | "frames" | "limit"> & React.RefAttributes<InstancedMesh>>;
|
|
39
54
|
declare function Merged({ meshes, children, ...props }: {
|
|
40
55
|
[x: string]: any;
|
package/core/Instances.js
CHANGED
|
@@ -4,24 +4,82 @@ import * as React from 'react';
|
|
|
4
4
|
import { extend, useFrame } from '@react-three/fiber';
|
|
5
5
|
import mergeRefs from 'react-merge-refs';
|
|
6
6
|
import Composer from 'react-composer';
|
|
7
|
-
|
|
7
|
+
|
|
8
|
+
const _instanceLocalMatrix = /*@__PURE__*/new THREE.Matrix4();
|
|
9
|
+
|
|
10
|
+
const _instanceWorldMatrix = /*@__PURE__*/new THREE.Matrix4();
|
|
11
|
+
|
|
12
|
+
const _instanceIntersects = [];
|
|
13
|
+
|
|
14
|
+
const _mesh = /*@__PURE__*/new THREE.Mesh();
|
|
15
|
+
|
|
16
|
+
class PositionMesh extends THREE.Group {
|
|
17
|
+
constructor() {
|
|
18
|
+
super();
|
|
19
|
+
this.color = new THREE.Color('white');
|
|
20
|
+
this.instance = {
|
|
21
|
+
current: undefined
|
|
22
|
+
};
|
|
23
|
+
this.instanceKey = {
|
|
24
|
+
current: undefined
|
|
25
|
+
};
|
|
26
|
+
} // This will allow the virtual instance have bounds
|
|
27
|
+
|
|
28
|
+
|
|
29
|
+
get geometry() {
|
|
30
|
+
var _this$instance$curren;
|
|
31
|
+
|
|
32
|
+
return (_this$instance$curren = this.instance.current) == null ? void 0 : _this$instance$curren.geometry;
|
|
33
|
+
} // And this will allow the virtual instance to receive events
|
|
34
|
+
|
|
35
|
+
|
|
36
|
+
raycast(raycaster, intersects) {
|
|
37
|
+
const parent = this.instance.current;
|
|
38
|
+
if (!parent) return;
|
|
39
|
+
if (!parent.geometry || !parent.material) return;
|
|
40
|
+
_mesh.geometry = parent.geometry;
|
|
41
|
+
const matrixWorld = parent.matrixWorld;
|
|
42
|
+
let instanceId = parent.userData.instances.indexOf(this.instanceKey); // If the instance wasn't found or exceeds the parents draw range, bail out
|
|
43
|
+
|
|
44
|
+
if (instanceId === -1 || instanceId > parent.count) return; // calculate the world matrix for each instance
|
|
45
|
+
|
|
46
|
+
parent.getMatrixAt(instanceId, _instanceLocalMatrix);
|
|
47
|
+
|
|
48
|
+
_instanceWorldMatrix.multiplyMatrices(matrixWorld, _instanceLocalMatrix); // the mesh represents this single instance
|
|
49
|
+
|
|
50
|
+
|
|
51
|
+
_mesh.matrixWorld = _instanceWorldMatrix;
|
|
52
|
+
|
|
53
|
+
_mesh.raycast(raycaster, _instanceIntersects); // process the result of raycast
|
|
54
|
+
|
|
55
|
+
|
|
56
|
+
for (let i = 0, l = _instanceIntersects.length; i < l; i++) {
|
|
57
|
+
const intersect = _instanceIntersects[i];
|
|
58
|
+
intersect.instanceId = instanceId;
|
|
59
|
+
intersect.object = this;
|
|
60
|
+
intersects.push(intersect);
|
|
61
|
+
}
|
|
62
|
+
|
|
63
|
+
_instanceIntersects.length = 0;
|
|
64
|
+
}
|
|
65
|
+
|
|
66
|
+
}
|
|
8
67
|
|
|
9
68
|
let i, instanceRef;
|
|
10
|
-
const globalContext =
|
|
11
|
-
const parentMatrix = new THREE.Matrix4();
|
|
12
|
-
const instanceMatrix = new THREE.Matrix4();
|
|
13
|
-
const tempMatrix = new THREE.Matrix4();
|
|
14
|
-
new THREE.
|
|
15
|
-
const
|
|
16
|
-
const
|
|
17
|
-
const scale = new THREE.Vector3();
|
|
69
|
+
const globalContext = /*@__PURE__*/React.createContext(null);
|
|
70
|
+
const parentMatrix = /*@__PURE__*/new THREE.Matrix4();
|
|
71
|
+
const instanceMatrix = /*@__PURE__*/new THREE.Matrix4();
|
|
72
|
+
const tempMatrix = /*@__PURE__*/new THREE.Matrix4();
|
|
73
|
+
const translation = /*@__PURE__*/new THREE.Vector3();
|
|
74
|
+
const rotation = /*@__PURE__*/new THREE.Quaternion();
|
|
75
|
+
const scale = /*@__PURE__*/new THREE.Vector3();
|
|
18
76
|
const Instance = /*#__PURE__*/React.forwardRef(({
|
|
19
77
|
context,
|
|
20
78
|
children,
|
|
21
79
|
...props
|
|
22
80
|
}, ref) => {
|
|
23
81
|
React.useMemo(() => extend({
|
|
24
|
-
|
|
82
|
+
PositionMesh
|
|
25
83
|
}), []);
|
|
26
84
|
const group = React.useRef();
|
|
27
85
|
const {
|
|
@@ -29,7 +87,7 @@ const Instance = /*#__PURE__*/React.forwardRef(({
|
|
|
29
87
|
getParent
|
|
30
88
|
} = React.useContext(context || globalContext);
|
|
31
89
|
React.useLayoutEffect(() => subscribe(group), []);
|
|
32
|
-
return /*#__PURE__*/React.createElement("
|
|
90
|
+
return /*#__PURE__*/React.createElement("positionMesh", _extends({
|
|
33
91
|
instance: getParent(),
|
|
34
92
|
instanceKey: group,
|
|
35
93
|
ref: mergeRefs([ref, group])
|
package/core/MapControls.d.ts
CHANGED
|
@@ -11,4 +11,4 @@ export declare type MapControlsProps = ReactThreeFiber.Overwrite<ReactThreeFiber
|
|
|
11
11
|
onEnd?: (e?: THREE.Event) => void;
|
|
12
12
|
domElement?: HTMLElement;
|
|
13
13
|
}>;
|
|
14
|
-
export declare const MapControls: React.ForwardRefExoticComponent<Pick<MapControlsProps, "object" | "attach" | "args" | "children" | "key" | "onUpdate" | "position" | "up" | "scale" | "rotation" | "matrix" | "quaternion" | "layers" | "dispose" | "addEventListener" | "hasEventListener" | "removeEventListener" | "dispatchEvent" | "onChange" | keyof import("@react-three/fiber/dist/declarations/src/core/events").EventHandlers | "camera" | "reset" | "enabled" | "connect" | "update" | "target" | "onStart" | "keys" | "touches" | "
|
|
14
|
+
export declare const MapControls: React.ForwardRefExoticComponent<Pick<MapControlsProps, "object" | "attach" | "args" | "children" | "key" | "onUpdate" | "position" | "up" | "scale" | "rotation" | "matrix" | "quaternion" | "layers" | "dispose" | "addEventListener" | "hasEventListener" | "removeEventListener" | "dispatchEvent" | "onChange" | keyof import("@react-three/fiber/dist/declarations/src/core/events").EventHandlers | "camera" | "reset" | "enabled" | "connect" | "update" | "target" | "onStart" | "keys" | "touches" | "domElement" | "makeDefault" | "minDistance" | "maxDistance" | "minZoom" | "maxZoom" | "minPolarAngle" | "maxPolarAngle" | "minAzimuthAngle" | "maxAzimuthAngle" | "enableDamping" | "dampingFactor" | "enableZoom" | "zoomSpeed" | "enableRotate" | "rotateSpeed" | "enablePan" | "panSpeed" | "screenSpacePanning" | "keyPanSpeed" | "autoRotate" | "autoRotateSpeed" | "reverseOrbit" | "mouseButtons" | "target0" | "position0" | "zoom0" | "_domElementKeyEvents" | "getPolarAngle" | "getAzimuthalAngle" | "setPolarAngle" | "setAzimuthalAngle" | "getDistance" | "listenToKeyEvents" | "saveState" | "onEnd"> & React.RefAttributes<MapControlsImpl>>;
|
package/core/Points.cjs.js
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("@babel/runtime/helpers/extends"),t=require("three"),r=require("react"),
|
|
1
|
+
"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("@babel/runtime/helpers/extends"),t=require("three"),r=require("react"),n=require("@react-three/fiber"),a=require("react-merge-refs");function i(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}function o(e){if(e&&e.__esModule)return e;var t=Object.create(null);return e&&Object.keys(e).forEach((function(r){if("default"!==r){var n=Object.getOwnPropertyDescriptor(e,r);Object.defineProperty(t,r,n.get?n:{enumerable:!0,get:function(){return e[r]}})}})),t.default=e,Object.freeze(t)}var s=i(e),u=o(t),c=o(r),l=i(a);const f=new u.Matrix4,d=new u.Ray,m=new u.Sphere,y=new u.Vector3;class p extends u.Group{constructor(){super(),this.size=0,this.color=new u.Color("white"),this.instance={current:void 0},this.instanceKey={current:void 0}}get geometry(){var e;return null==(e=this.instance.current)?void 0:e.geometry}raycast(e,t){var r,n;const a=this.instance.current;if(!a||!a.geometry)return;const i=a.userData.instances.indexOf(this.instanceKey);if(-1===i||i>a.geometry.drawRange.count)return;const o=null!==(r=null==(n=e.params.Points)?void 0:n.threshold)&&void 0!==r?r:1;if(m.set(this.getWorldPosition(y),o),!1===e.ray.intersectsSphere(m))return;f.copy(a.matrixWorld).invert(),d.copy(e.ray).applyMatrix4(f);const s=o/((this.scale.x+this.scale.y+this.scale.z)/3),c=s*s,l=d.distanceSqToPoint(y);if(l<c){const r=new u.Vector3;d.closestPointToPoint(y,r),r.applyMatrix4(this.matrixWorld);const n=e.ray.origin.distanceTo(r);if(n<e.near||n>e.far)return;t.push({distance:n,distanceToRay:Math.sqrt(l),point:r,index:i,face:null,object:this})}}}let g,h;const b=c.createContext(null),x=new u.Matrix4,w=new u.Vector3,P=c.forwardRef((({children:e,range:t,limit:r=1e3,...a},i)=>{const o=c.useRef(null),[f,d]=c.useState([]),[[m,y,p]]=c.useState((()=>[new Float32Array(3*r),Float32Array.from({length:3*r},(()=>1)),Float32Array.from({length:r},(()=>1))]));c.useEffect((()=>{o.current.geometry.attributes.position.needsUpdate=!0})),n.useFrame((()=>{for(o.current.updateMatrix(),o.current.updateMatrixWorld(),x.copy(o.current.matrixWorld).invert(),o.current.geometry.drawRange.count=Math.min(r,void 0!==t?t:r,f.length),g=0;g<f.length;g++)h=f[g].current,h.getWorldPosition(w).applyMatrix4(x),w.toArray(m,3*g),o.current.geometry.attributes.position.needsUpdate=!0,h.matrixWorldNeedsUpdate=!0,h.color.toArray(y,3*g),o.current.geometry.attributes.color.needsUpdate=!0,console.log(h.size),p.set([h.size],g),o.current.geometry.attributes.size.needsUpdate=!0}));const P=c.useMemo((()=>({getParent:()=>o,subscribe:e=>(d((t=>[...t,e])),()=>d((t=>t.filter((t=>t.current!==e.current)))))})),[]);return c.createElement("points",s.default({userData:{instances:f},matrixAutoUpdate:!1,ref:l.default([i,o]),raycast:()=>null},a),c.createElement("bufferGeometry",null,c.createElement("bufferAttribute",{attach:"attributes-position",count:m.length/3,array:m,itemSize:3,usage:u.DynamicDrawUsage}),c.createElement("bufferAttribute",{attach:"attributes-color",count:y.length/3,array:y,itemSize:3,usage:u.DynamicDrawUsage}),c.createElement("bufferAttribute",{attach:"attributes-size",count:p.length,array:p,itemSize:1,usage:u.DynamicDrawUsage})),c.createElement(b.Provider,{value:P},e))})),v=c.forwardRef((({children:e,...t},r)=>{c.useMemo((()=>n.extend({PositionPoint:p})),[]);const a=c.useRef(),{subscribe:i,getParent:o}=c.useContext(b);return c.useLayoutEffect((()=>i(a)),[]),c.createElement("positionPoint",s.default({instance:o(),instanceKey:a,ref:l.default([r,a])},t),e)})),E=c.forwardRef((({children:e,positions:t,colors:r,sizes:a,stride:i=3,...o},f)=>{const d=c.useRef(null);return n.useFrame((()=>{const e=d.current.geometry.attributes;e.position.needsUpdate=!0,r&&(e.color.needsUpdate=!0),a&&(e.size.needsUpdate=!0)})),c.createElement("points",s.default({ref:l.default([f,d])},o),c.createElement("bufferGeometry",null,c.createElement("bufferAttribute",{attach:"attributes-position",count:t.length/i,array:t,itemSize:i,usage:u.DynamicDrawUsage}),r&&c.createElement("bufferAttribute",{attach:"attributes-color",count:r.length/i,array:r,itemSize:3,usage:u.DynamicDrawUsage}),a&&c.createElement("bufferAttribute",{attach:"attributes-size",count:a.length/i,array:a,itemSize:1,usage:u.DynamicDrawUsage})),e)})),z=c.forwardRef(((e,t)=>e.positions instanceof Float32Array?c.createElement(E,s.default({},e,{ref:t})):c.createElement(P,s.default({},e,{ref:t}))));exports.Point=v,exports.Points=z,exports.PointsBuffer=E,exports.PositionPoint=p;
|
package/core/Points.d.ts
CHANGED
|
@@ -1,10 +1,45 @@
|
|
|
1
1
|
import * as THREE from 'three';
|
|
2
2
|
import * as React from 'react';
|
|
3
|
+
import { ReactThreeFiber } from '@react-three/fiber';
|
|
4
|
+
declare global {
|
|
5
|
+
namespace JSX {
|
|
6
|
+
interface IntrinsicElements {
|
|
7
|
+
positionPoint: ReactThreeFiber.Object3DNode<PositionPoint, typeof PositionPoint>;
|
|
8
|
+
}
|
|
9
|
+
}
|
|
10
|
+
}
|
|
3
11
|
declare type PointsInstancesProps = JSX.IntrinsicElements['points'] & {
|
|
4
12
|
range?: number;
|
|
5
13
|
limit?: number;
|
|
6
14
|
};
|
|
7
|
-
export declare
|
|
15
|
+
export declare class PositionPoint extends THREE.Group {
|
|
16
|
+
size: number;
|
|
17
|
+
color: THREE.Color;
|
|
18
|
+
instance: React.MutableRefObject<THREE.Points | undefined>;
|
|
19
|
+
instanceKey: React.MutableRefObject<JSX.IntrinsicElements['positionPoint'] | undefined>;
|
|
20
|
+
constructor();
|
|
21
|
+
get geometry(): THREE.BufferGeometry | undefined;
|
|
22
|
+
raycast(raycaster: THREE.Raycaster, intersects: THREE.Intersection[]): void;
|
|
23
|
+
}
|
|
24
|
+
export declare const Point: React.ForwardRefExoticComponent<Pick<Omit<ReactThreeFiber.ExtendedColors<ReactThreeFiber.Overwrite<Partial<PositionPoint>, ReactThreeFiber.NodeProps<PositionPoint, typeof PositionPoint>>>, ReactThreeFiber.NonFunctionKeys<{
|
|
25
|
+
position?: ReactThreeFiber.Vector3 | undefined;
|
|
26
|
+
up?: ReactThreeFiber.Vector3 | undefined;
|
|
27
|
+
scale?: ReactThreeFiber.Vector3 | undefined;
|
|
28
|
+
rotation?: ReactThreeFiber.Euler | undefined;
|
|
29
|
+
matrix?: ReactThreeFiber.Matrix4 | undefined;
|
|
30
|
+
quaternion?: ReactThreeFiber.Quaternion | undefined;
|
|
31
|
+
layers?: ReactThreeFiber.Layers | undefined;
|
|
32
|
+
dispose?: (() => void) | null | undefined;
|
|
33
|
+
}>> & {
|
|
34
|
+
position?: ReactThreeFiber.Vector3 | undefined;
|
|
35
|
+
up?: ReactThreeFiber.Vector3 | undefined;
|
|
36
|
+
scale?: ReactThreeFiber.Vector3 | undefined;
|
|
37
|
+
rotation?: ReactThreeFiber.Euler | undefined;
|
|
38
|
+
matrix?: ReactThreeFiber.Matrix4 | undefined;
|
|
39
|
+
quaternion?: ReactThreeFiber.Quaternion | undefined;
|
|
40
|
+
layers?: ReactThreeFiber.Layers | undefined;
|
|
41
|
+
dispose?: (() => void) | null | undefined;
|
|
42
|
+
} & import("@react-three/fiber/dist/declarations/src/core/events").EventHandlers, "visible" | "attach" | "args" | "children" | "key" | "onUpdate" | "position" | "up" | "scale" | "rotation" | "matrix" | "quaternion" | "layers" | "dispose" | "type" | "isGroup" | "id" | "uuid" | "name" | "parent" | "modelViewMatrix" | "normalMatrix" | "matrixWorld" | "matrixAutoUpdate" | "matrixWorldNeedsUpdate" | "castShadow" | "receiveShadow" | "frustumCulled" | "renderOrder" | "animations" | "userData" | "customDepthMaterial" | "customDistanceMaterial" | "isObject3D" | "onBeforeRender" | "onAfterRender" | "applyMatrix4" | "applyQuaternion" | "setRotationFromAxisAngle" | "setRotationFromEuler" | "setRotationFromMatrix" | "setRotationFromQuaternion" | "rotateOnAxis" | "rotateOnWorldAxis" | "rotateX" | "rotateY" | "rotateZ" | "translateOnAxis" | "translateX" | "translateY" | "translateZ" | "localToWorld" | "worldToLocal" | "lookAt" | "add" | "remove" | "removeFromParent" | "clear" | "getObjectById" | "getObjectByName" | "getObjectByProperty" | "getWorldPosition" | "getWorldQuaternion" | "getWorldScale" | "getWorldDirection" | "raycast" | "traverse" | "traverseVisible" | "traverseAncestors" | "updateMatrix" | "updateMatrixWorld" | "updateWorldMatrix" | "toJSON" | "clone" | "copy" | "addEventListener" | "hasEventListener" | "removeEventListener" | "dispatchEvent" | "color" | keyof import("@react-three/fiber/dist/declarations/src/core/events").EventHandlers | "size" | "geometry" | "instance" | "instanceKey"> & React.RefAttributes<unknown>>;
|
|
8
43
|
declare type PointsBuffersProps = JSX.IntrinsicElements['points'] & {
|
|
9
44
|
positions: Float32Array;
|
|
10
45
|
colors?: Float32Array;
|
package/core/Points.js
CHANGED
|
@@ -3,13 +3,82 @@ import * as THREE from 'three';
|
|
|
3
3
|
import * as React from 'react';
|
|
4
4
|
import { extend, useFrame } from '@react-three/fiber';
|
|
5
5
|
import mergeRefs from 'react-merge-refs';
|
|
6
|
-
import { Position } from '../helpers/Position.js';
|
|
7
6
|
|
|
7
|
+
const _inverseMatrix = /*@__PURE__*/new THREE.Matrix4();
|
|
8
|
+
|
|
9
|
+
const _ray = /*@__PURE__*/new THREE.Ray();
|
|
10
|
+
|
|
11
|
+
const _sphere = /*@__PURE__*/new THREE.Sphere();
|
|
12
|
+
|
|
13
|
+
const _position = /*@__PURE__*/new THREE.Vector3();
|
|
14
|
+
|
|
15
|
+
class PositionPoint extends THREE.Group {
|
|
16
|
+
constructor() {
|
|
17
|
+
super();
|
|
18
|
+
this.size = 0;
|
|
19
|
+
this.color = new THREE.Color('white');
|
|
20
|
+
this.instance = {
|
|
21
|
+
current: undefined
|
|
22
|
+
};
|
|
23
|
+
this.instanceKey = {
|
|
24
|
+
current: undefined
|
|
25
|
+
};
|
|
26
|
+
} // This will allow the virtual instance have bounds
|
|
27
|
+
|
|
28
|
+
|
|
29
|
+
get geometry() {
|
|
30
|
+
var _this$instance$curren;
|
|
31
|
+
|
|
32
|
+
return (_this$instance$curren = this.instance.current) == null ? void 0 : _this$instance$curren.geometry;
|
|
33
|
+
}
|
|
34
|
+
|
|
35
|
+
raycast(raycaster, intersects) {
|
|
36
|
+
var _raycaster$params$Poi, _raycaster$params$Poi2;
|
|
37
|
+
|
|
38
|
+
const parent = this.instance.current;
|
|
39
|
+
if (!parent || !parent.geometry) return;
|
|
40
|
+
const instanceId = parent.userData.instances.indexOf(this.instanceKey); // If the instance wasn't found or exceeds the parents draw range, bail out
|
|
41
|
+
|
|
42
|
+
if (instanceId === -1 || instanceId > parent.geometry.drawRange.count) return;
|
|
43
|
+
const threshold = (_raycaster$params$Poi = (_raycaster$params$Poi2 = raycaster.params.Points) == null ? void 0 : _raycaster$params$Poi2.threshold) !== null && _raycaster$params$Poi !== void 0 ? _raycaster$params$Poi : 1;
|
|
44
|
+
|
|
45
|
+
_sphere.set(this.getWorldPosition(_position), threshold);
|
|
46
|
+
|
|
47
|
+
if (raycaster.ray.intersectsSphere(_sphere) === false) return;
|
|
48
|
+
|
|
49
|
+
_inverseMatrix.copy(parent.matrixWorld).invert();
|
|
50
|
+
|
|
51
|
+
_ray.copy(raycaster.ray).applyMatrix4(_inverseMatrix);
|
|
52
|
+
|
|
53
|
+
const localThreshold = threshold / ((this.scale.x + this.scale.y + this.scale.z) / 3);
|
|
54
|
+
const localThresholdSq = localThreshold * localThreshold;
|
|
55
|
+
|
|
56
|
+
const rayPointDistanceSq = _ray.distanceSqToPoint(_position);
|
|
57
|
+
|
|
58
|
+
if (rayPointDistanceSq < localThresholdSq) {
|
|
59
|
+
const intersectPoint = new THREE.Vector3();
|
|
60
|
+
|
|
61
|
+
_ray.closestPointToPoint(_position, intersectPoint);
|
|
62
|
+
|
|
63
|
+
intersectPoint.applyMatrix4(this.matrixWorld);
|
|
64
|
+
const distance = raycaster.ray.origin.distanceTo(intersectPoint);
|
|
65
|
+
if (distance < raycaster.near || distance > raycaster.far) return;
|
|
66
|
+
intersects.push({
|
|
67
|
+
distance: distance,
|
|
68
|
+
distanceToRay: Math.sqrt(rayPointDistanceSq),
|
|
69
|
+
point: intersectPoint,
|
|
70
|
+
index: instanceId,
|
|
71
|
+
face: null,
|
|
72
|
+
object: this
|
|
73
|
+
});
|
|
74
|
+
}
|
|
75
|
+
}
|
|
76
|
+
|
|
77
|
+
}
|
|
8
78
|
let i, positionRef;
|
|
9
|
-
const context =
|
|
10
|
-
const parentMatrix = new THREE.Matrix4();
|
|
11
|
-
const position = new THREE.Vector3();
|
|
12
|
-
new THREE.Color();
|
|
79
|
+
const context = /*@__PURE__*/React.createContext(null);
|
|
80
|
+
const parentMatrix = /*@__PURE__*/new THREE.Matrix4();
|
|
81
|
+
const position = /*@__PURE__*/new THREE.Vector3();
|
|
13
82
|
/**
|
|
14
83
|
* Instance implementation, relies on react + context to update the attributes based on the children of this component
|
|
15
84
|
*/
|
|
@@ -45,40 +114,26 @@ const PointsInstances = /*#__PURE__*/React.forwardRef(({
|
|
|
45
114
|
positionRef.matrixWorldNeedsUpdate = true;
|
|
46
115
|
positionRef.color.toArray(colors, i * 3);
|
|
47
116
|
parentRef.current.geometry.attributes.color.needsUpdate = true;
|
|
117
|
+
console.log(positionRef.size);
|
|
48
118
|
sizes.set([positionRef.size], i);
|
|
49
119
|
parentRef.current.geometry.attributes.size.needsUpdate = true;
|
|
50
120
|
}
|
|
51
121
|
});
|
|
52
|
-
const events = React.useMemo(() => {
|
|
53
|
-
const events = {};
|
|
54
|
-
|
|
55
|
-
for (i = 0; i < refs.length; i++) {
|
|
56
|
-
var _refs$i$current;
|
|
57
|
-
|
|
58
|
-
Object.assign(events, (_refs$i$current = refs[i].current) == null ? void 0 : _refs$i$current.__r3f.handlers);
|
|
59
|
-
}
|
|
60
|
-
|
|
61
|
-
return Object.keys(events).reduce((prev, key) => ({ ...prev,
|
|
62
|
-
[key]: event => {
|
|
63
|
-
var _refs$event$index, _r3f, _r3f$handlers;
|
|
64
|
-
|
|
65
|
-
const object = (_refs$event$index = refs[event.index]) == null ? void 0 : _refs$event$index.current;
|
|
66
|
-
return object == null ? void 0 : (_r3f = object.__r3f) == null ? void 0 : (_r3f$handlers = _r3f.handlers) == null ? void 0 : _r3f$handlers[key]({ ...event,
|
|
67
|
-
object
|
|
68
|
-
});
|
|
69
|
-
}
|
|
70
|
-
}), {});
|
|
71
|
-
}, [children, refs]);
|
|
72
122
|
const api = React.useMemo(() => ({
|
|
123
|
+
getParent: () => parentRef,
|
|
73
124
|
subscribe: ref => {
|
|
74
125
|
setRefs(refs => [...refs, ref]);
|
|
75
126
|
return () => setRefs(refs => refs.filter(item => item.current !== ref.current));
|
|
76
127
|
}
|
|
77
128
|
}), []);
|
|
78
129
|
return /*#__PURE__*/React.createElement("points", _extends({
|
|
130
|
+
userData: {
|
|
131
|
+
instances: refs
|
|
132
|
+
},
|
|
79
133
|
matrixAutoUpdate: false,
|
|
80
|
-
ref: mergeRefs([ref, parentRef])
|
|
81
|
-
|
|
134
|
+
ref: mergeRefs([ref, parentRef]),
|
|
135
|
+
raycast: () => null
|
|
136
|
+
}, props), /*#__PURE__*/React.createElement("bufferGeometry", null, /*#__PURE__*/React.createElement("bufferAttribute", {
|
|
82
137
|
attach: "attributes-position",
|
|
83
138
|
count: positions.length / 3,
|
|
84
139
|
array: positions,
|
|
@@ -105,14 +160,17 @@ const Point = /*#__PURE__*/React.forwardRef(({
|
|
|
105
160
|
...props
|
|
106
161
|
}, ref) => {
|
|
107
162
|
React.useMemo(() => extend({
|
|
108
|
-
|
|
163
|
+
PositionPoint
|
|
109
164
|
}), []);
|
|
110
165
|
const group = React.useRef();
|
|
111
166
|
const {
|
|
112
|
-
subscribe
|
|
167
|
+
subscribe,
|
|
168
|
+
getParent
|
|
113
169
|
} = React.useContext(context);
|
|
114
170
|
React.useLayoutEffect(() => subscribe(group), []);
|
|
115
|
-
return /*#__PURE__*/React.createElement("
|
|
171
|
+
return /*#__PURE__*/React.createElement("positionPoint", _extends({
|
|
172
|
+
instance: getParent(),
|
|
173
|
+
instanceKey: group,
|
|
116
174
|
ref: mergeRefs([ref, group])
|
|
117
175
|
}, props), children);
|
|
118
176
|
});
|
|
@@ -167,4 +225,4 @@ const Points = /*#__PURE__*/React.forwardRef((props, forwardedRef) => {
|
|
|
167
225
|
}));
|
|
168
226
|
});
|
|
169
227
|
|
|
170
|
-
export { Point, Points, PointsBuffer };
|
|
228
|
+
export { Point, Points, PointsBuffer, PositionPoint };
|
|
@@ -12,4 +12,4 @@ export declare type TrackballControlsProps = ReactThreeFiber.Overwrite<ReactThre
|
|
|
12
12
|
onStart?: (e?: THREE.Event) => void;
|
|
13
13
|
onEnd?: (e?: THREE.Event) => void;
|
|
14
14
|
}>;
|
|
15
|
-
export declare const TrackballControls: React.ForwardRefExoticComponent<Pick<TrackballControlsProps, "object" | "attach" | "args" | "children" | "key" | "onUpdate" | "position" | "up" | "scale" | "rotation" | "matrix" | "quaternion" | "layers" | "dispose" | "addEventListener" | "hasEventListener" | "removeEventListener" | "dispatchEvent" | "onChange" | keyof import("@react-three/fiber/dist/declarations/src/core/events").EventHandlers | "camera" | "screen" | "reset" | "enabled" | "connect" | "update" | "target" | "onStart" | "keys" | "
|
|
15
|
+
export declare const TrackballControls: React.ForwardRefExoticComponent<Pick<TrackballControlsProps, "object" | "attach" | "args" | "children" | "key" | "onUpdate" | "position" | "up" | "scale" | "rotation" | "matrix" | "quaternion" | "layers" | "dispose" | "addEventListener" | "hasEventListener" | "removeEventListener" | "dispatchEvent" | "onChange" | keyof import("@react-three/fiber/dist/declarations/src/core/events").EventHandlers | "camera" | "screen" | "reset" | "enabled" | "connect" | "update" | "target" | "onStart" | "keys" | "domElement" | "makeDefault" | "minDistance" | "maxDistance" | "zoomSpeed" | "rotateSpeed" | "panSpeed" | "mouseButtons" | "onEnd" | "regress" | "noRotate" | "noZoom" | "noPan" | "staticMoving" | "dynamicDampingFactor" | "cursorZoom" | "handleResize"> & React.RefAttributes<TrackballControlsImpl>>;
|
package/core/index.cjs.js
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("./Billboard.cjs.js"),r=require("./QuadraticBezierLine.cjs.js"),s=require("./CubicBezierLine.cjs.js"),t=require("./CatmullRomLine.cjs.js"),o=require("./Line.cjs.js"),i=require("./PositionalAudio.cjs.js"),u=require("./Text.cjs.js"),a=require("./Text3D.cjs.js"),c=require("./Effects.cjs.js"),n=require("./GradientTexture.cjs.js"),j=require("./Image.cjs.js"),p=require("./Edges.cjs.js"),l=require("./Trail.cjs.js"),x=require("./Sampler.cjs.js"),q=require("./ComputedAttribute.cjs.js"),d=require("./Clone.cjs.js"),m=require("./MarchingCubes.cjs.js"),C=require("./Decal.cjs.js"),h=require("./OrthographicCamera.cjs.js"),M=require("./PerspectiveCamera.cjs.js"),
|
|
1
|
+
"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("./Billboard.cjs.js"),r=require("./QuadraticBezierLine.cjs.js"),s=require("./CubicBezierLine.cjs.js"),t=require("./CatmullRomLine.cjs.js"),o=require("./Line.cjs.js"),i=require("./PositionalAudio.cjs.js"),u=require("./Text.cjs.js"),a=require("./Text3D.cjs.js"),c=require("./Effects.cjs.js"),n=require("./GradientTexture.cjs.js"),j=require("./Image.cjs.js"),p=require("./Edges.cjs.js"),l=require("./Trail.cjs.js"),x=require("./Sampler.cjs.js"),q=require("./ComputedAttribute.cjs.js"),d=require("./Clone.cjs.js"),m=require("./MarchingCubes.cjs.js"),C=require("./Decal.cjs.js"),h=require("./OrthographicCamera.cjs.js"),M=require("./PerspectiveCamera.cjs.js"),P=require("./CubeCamera.cjs.js"),S=require("./DeviceOrientationControls.cjs.js"),b=require("./FlyControls.cjs.js"),B=require("./MapControls.cjs.js"),f=require("./OrbitControls.cjs.js"),T=require("./TrackballControls.cjs.js"),v=require("./ArcballControls.cjs.js"),g=require("./TransformControls.cjs.js"),A=require("./PointerLockControls.cjs.js"),L=require("./FirstPersonControls.cjs.js"),k=require("./pivotControls/index.cjs.js"),D=require("./GizmoHelper.cjs.js"),E=require("./GizmoViewcube.cjs.js"),R=require("./GizmoViewport.cjs.js"),w=require("./useCubeTexture.cjs.js"),F=require("./useFBX.cjs.js"),G=require("./useGLTF.cjs.js"),z=require("./useKTX2.cjs.js"),O=require("./useProgress.cjs.js"),I=require("./useTexture.cjs.js"),V=require("./useVideoTexture.cjs.js"),y=require("./Stats.cjs.js"),H=require("./useDepthBuffer.cjs.js"),Q=require("./useAspect.cjs.js"),X=require("./useCamera.cjs.js"),K=require("./useDetectGPU.cjs.js"),W=require("./useHelper.cjs.js"),N=require("./useBVH.cjs.js"),U=require("./useContextBridge.cjs.js"),_=require("./useAnimations.cjs.js"),J=require("./useFBO.cjs.js"),Y=require("./useIntersect.cjs.js"),Z=require("./useBoxProjectedEnv.cjs.js"),$=require("./BBAnchor.cjs.js"),ee=require("./CurveModifier.cjs.js"),re=require("./MeshDistortMaterial.cjs.js"),se=require("./MeshWobbleMaterial.cjs.js"),te=require("./MeshReflectorMaterial.cjs.js"),oe=require("./MeshRefractionMaterial.cjs.js"),ie=require("./PointMaterial.cjs.js"),ue=require("./shaderMaterial.cjs.js"),ae=require("./softShadows.cjs.js"),ce=require("./shapes.cjs.js"),ne=require("./RoundedBox.cjs.js"),je=require("./ScreenQuad.cjs.js"),pe=require("./Center.cjs.js"),le=require("./Bounds.cjs.js"),xe=require("./CameraShake.cjs.js"),qe=require("./Float.cjs.js"),de=require("./Stage.cjs.js"),me=require("./Backdrop.cjs.js"),Ce=require("./Shadow.cjs.js"),he=require("./ContactShadows.cjs.js"),Me=require("./AccumulativeShadows.cjs.js"),Pe=require("./Reflector.cjs.js"),Se=require("./SpotLight.cjs.js"),be=require("./Environment.cjs.js"),Be=require("./Lightformer.cjs.js"),fe=require("./Sky.cjs.js"),Te=require("./Stars.cjs.js"),ve=require("./Cloud.cjs.js"),ge=require("./Sparkles.cjs.js"),Ae=require("./useMatcapTexture.cjs.js"),Le=require("./useNormalTexture.cjs.js"),ke=require("./Points.cjs.js"),De=require("./Instances.cjs.js"),Ee=require("./Segments.cjs.js"),Re=require("./Detailed.cjs.js"),we=require("./Preload.cjs.js"),Fe=require("./BakeShadows.cjs.js"),Ge=require("./meshBounds.cjs.js"),ze=require("./AdaptiveDpr.cjs.js"),Oe=require("./AdaptiveEvents.cjs.js"),Ie=require("./PerformanceMonitor.cjs.js"),Ve=require("./RenderTexture.cjs.js"),ye=require("./Mask.cjs.js");require("@babel/runtime/helpers/extends"),require("react"),require("@react-three/fiber"),require("react-merge-refs"),require("three"),require("three-stdlib"),require("troika-three-text"),require("suspend-react"),require("meshline"),require("lodash.pick"),require("lodash.omit"),require("./pivotControls/AxisArrow.cjs.js"),require("../web/Html.cjs.js"),require("react-dom/client"),require("./pivotControls/context.cjs.js"),require("./pivotControls/PlaneSlider.cjs.js"),require("./pivotControls/AxisRotator.cjs.js"),require("lodash.clamp"),require("zustand"),require("stats.js"),require("../helpers/useEffectfulState.cjs.js"),require("detect-gpu"),require("three-mesh-bvh"),require("../materials/BlurPass.cjs.js"),require("../materials/ConvolutionMaterial.cjs.js"),require("../materials/MeshReflectorMaterial.cjs.js"),require("../materials/MeshRefractionMaterial.cjs.js"),require("../helpers/environment-assets.cjs.js"),require("../materials/SpotLightMaterial.cjs.js"),require("react-composer"),exports.Billboard=e.Billboard,exports.QuadraticBezierLine=r.QuadraticBezierLine,exports.CubicBezierLine=s.CubicBezierLine,exports.CatmullRomLine=t.CatmullRomLine,exports.Line=o.Line,exports.PositionalAudio=i.PositionalAudio,exports.Text=u.Text,exports.Text3D=a.Text3D,exports.Effects=c.Effects,exports.isWebGL2Available=c.isWebGL2Available,exports.GradientTexture=n.GradientTexture,exports.Image=j.Image,exports.Edges=p.Edges,exports.Trail=l.Trail,exports.useTrail=l.useTrail,exports.Sampler=x.Sampler,exports.useSurfaceSampler=x.useSurfaceSampler,exports.ComputedAttribute=q.ComputedAttribute,exports.Clone=d.Clone,exports.MarchingCube=m.MarchingCube,exports.MarchingCubes=m.MarchingCubes,exports.MarchingPlane=m.MarchingPlane,exports.Decal=C.Decal,exports.OrthographicCamera=h.OrthographicCamera,exports.PerspectiveCamera=M.PerspectiveCamera,exports.CubeCamera=P.CubeCamera,exports.DeviceOrientationControls=S.DeviceOrientationControls,exports.FlyControls=b.FlyControls,exports.MapControls=B.MapControls,exports.OrbitControls=f.OrbitControls,exports.TrackballControls=T.TrackballControls,exports.ArcballControls=v.ArcballControls,exports.TransformControls=g.TransformControls,exports.PointerLockControls=A.PointerLockControls,exports.FirstPersonControls=L.FirstPersonControls,exports.PivotControls=k.PivotControls,exports.calculateScaleFactor=k.calculateScaleFactor,exports.GizmoHelper=D.GizmoHelper,exports.useGizmoContext=D.useGizmoContext,exports.GizmoViewcube=E.GizmoViewcube,exports.GizmoViewport=R.GizmoViewport,exports.useCubeTexture=w.useCubeTexture,exports.useFBX=F.useFBX,exports.useGLTF=G.useGLTF,exports.useKTX2=z.useKTX2,exports.useProgress=O.useProgress,exports.IsObject=I.IsObject,exports.useTexture=I.useTexture,exports.useVideoTexture=V.useVideoTexture,exports.Stats=y.Stats,exports.useDepthBuffer=H.useDepthBuffer,exports.useAspect=Q.useAspect,exports.useCamera=X.useCamera,exports.useDetectGPU=K.useDetectGPU,exports.useHelper=W.useHelper,exports.useBVH=N.useBVH,exports.useContextBridge=U.useContextBridge,exports.useAnimations=_.useAnimations,exports.useFBO=J.useFBO,exports.useIntersect=Y.useIntersect,exports.useBoxProjectedEnv=Z.useBoxProjectedEnv,exports.BBAnchor=$.BBAnchor,exports.CurveModifier=ee.CurveModifier,exports.MeshDistortMaterial=re.MeshDistortMaterial,exports.MeshWobbleMaterial=se.MeshWobbleMaterial,exports.MeshReflectorMaterial=te.MeshReflectorMaterial,exports.MeshRefractionMaterial=oe.MeshRefractionMaterial,exports.PointMaterial=ie.PointMaterial,exports.PointMaterialImpl=ie.PointMaterialImpl,exports.shaderMaterial=ue.shaderMaterial,exports.softShadows=ae.softShadows,exports.Box=ce.Box,exports.Capsule=ce.Capsule,exports.Circle=ce.Circle,exports.Cone=ce.Cone,exports.Cylinder=ce.Cylinder,exports.Dodecahedron=ce.Dodecahedron,exports.Extrude=ce.Extrude,exports.Icosahedron=ce.Icosahedron,exports.Lathe=ce.Lathe,exports.Octahedron=ce.Octahedron,exports.Plane=ce.Plane,exports.Polyhedron=ce.Polyhedron,exports.Ring=ce.Ring,exports.Sphere=ce.Sphere,exports.Tetrahedron=ce.Tetrahedron,exports.Torus=ce.Torus,exports.TorusKnot=ce.TorusKnot,exports.Tube=ce.Tube,exports.RoundedBox=ne.RoundedBox,exports.ScreenQuad=je.ScreenQuad,exports.Center=pe.Center,exports.Bounds=le.Bounds,exports.useBounds=le.useBounds,exports.CameraShake=xe.CameraShake,exports.Float=qe.Float,exports.Stage=de.Stage,exports.Backdrop=me.Backdrop,exports.Shadow=Ce.Shadow,exports.ContactShadows=he.ContactShadows,exports.AccumulativeShadows=Me.AccumulativeShadows,exports.RandomizedLight=Me.RandomizedLight,exports.accumulativeContext=Me.accumulativeContext,exports.Reflector=Pe.Reflector,exports.SpotLight=Se.SpotLight,exports.Environment=be.Environment,exports.EnvironmentCube=be.EnvironmentCube,exports.EnvironmentMap=be.EnvironmentMap,exports.EnvironmentPortal=be.EnvironmentPortal,exports.useEnvironment=be.useEnvironment,exports.Lightformer=Be.Lightformer,exports.Sky=fe.Sky,exports.calcPosFromAngles=fe.calcPosFromAngles,exports.Stars=Te.Stars,exports.Cloud=ve.Cloud,exports.Sparkles=ge.Sparkles,exports.useMatcapTexture=Ae.useMatcapTexture,exports.useNormalTexture=Le.useNormalTexture,exports.Point=ke.Point,exports.Points=ke.Points,exports.PointsBuffer=ke.PointsBuffer,exports.PositionPoint=ke.PositionPoint,exports.Instance=De.Instance,exports.Instances=De.Instances,exports.Merged=De.Merged,exports.Segment=Ee.Segment,exports.SegmentObject=Ee.SegmentObject,exports.Segments=Ee.Segments,exports.Detailed=Re.Detailed,exports.Preload=we.Preload,exports.BakeShadows=Fe.BakeShadows,exports.meshBounds=Ge.meshBounds,exports.AdaptiveDpr=ze.AdaptiveDpr,exports.AdaptiveEvents=Oe.AdaptiveEvents,exports.PerformanceMonitor=Ie.PerformanceMonitor,exports.usePerformanceMonitor=Ie.usePerformanceMonitor,exports.RenderTexture=Ve.RenderTexture,exports.Mask=ye.Mask,exports.useMask=ye.useMask;
|
package/core/index.js
CHANGED
|
@@ -82,7 +82,7 @@ export { Cloud } from './Cloud.js';
|
|
|
82
82
|
export { Sparkles } from './Sparkles.js';
|
|
83
83
|
export { useMatcapTexture } from './useMatcapTexture.js';
|
|
84
84
|
export { useNormalTexture } from './useNormalTexture.js';
|
|
85
|
-
export { Point, Points, PointsBuffer } from './Points.js';
|
|
85
|
+
export { Point, Points, PointsBuffer, PositionPoint } from './Points.js';
|
|
86
86
|
export { Instance, Instances, Merged } from './Instances.js';
|
|
87
87
|
export { Segment, SegmentObject, Segments } from './Segments.js';
|
|
88
88
|
export { Detailed } from './Detailed.js';
|
|
@@ -123,5 +123,4 @@ import '../materials/MeshReflectorMaterial.js';
|
|
|
123
123
|
import '../materials/MeshRefractionMaterial.js';
|
|
124
124
|
import '../helpers/environment-assets.js';
|
|
125
125
|
import '../materials/SpotLightMaterial.js';
|
|
126
|
-
import '../helpers/Position.js';
|
|
127
126
|
import 'react-composer';
|