@react-three/drei 9.40.5 → 9.41.1
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 +60 -7
- package/core/AccumulativeShadows.d.ts +14 -13
- package/core/Clone.cjs.js +1 -1
- package/core/Clone.d.ts +3 -1
- package/core/Clone.js +30 -20
- package/core/ContactShadows.d.ts +14 -13
- package/core/Instances.cjs.js +1 -1
- package/core/Instances.js +3 -1
- package/core/SpotLight.cjs.js +1 -1
- package/core/SpotLight.d.ts +23 -28
- package/core/SpotLight.js +186 -14
- package/core/Stage.cjs.js +1 -1
- package/core/Stage.d.ts +12 -18
- package/core/Stage.js +77 -63
- package/core/Trail.cjs.js +1 -1
- package/core/Trail.js +4 -3
- package/core/index.cjs.js +1 -1
- package/core/index.js +1 -1
- package/helpers/glsl/DefaultSpotlightShadowShadows.glsl.js +3 -0
- package/index.cjs.js +1 -1
- package/index.js +1 -1
- package/native/index.cjs.js +1 -1
- package/native/index.js +1 -1
- package/package.json +1 -1
- package/web/index.cjs.js +1 -1
- package/web/index.js +1 -1
- package/web/pivotControls/index.cjs.js +1 -1
- package/web/pivotControls/index.js +4 -2
package/core/SpotLight.js
CHANGED
|
@@ -1,11 +1,17 @@
|
|
|
1
1
|
import _extends from '@babel/runtime/helpers/esm/extends';
|
|
2
2
|
import * as React from 'react';
|
|
3
|
-
import { Vector3, CylinderGeometry, Matrix4 } from 'three';
|
|
3
|
+
import { Vector3, CylinderGeometry, Matrix4, WebGLRenderTarget, RGBAFormat, LinearEncoding, ShaderMaterial, DoubleSide, RepeatWrapping } from 'three';
|
|
4
4
|
import { useThree, useFrame } from '@react-three/fiber';
|
|
5
|
+
import { FullScreenQuad } from 'three-stdlib';
|
|
6
|
+
import mergeRefs from 'react-merge-refs';
|
|
5
7
|
import { SpotLightMaterial } from '../materials/SpotLightMaterial.js';
|
|
8
|
+
import SpotlightShadowShader from '../helpers/glsl/DefaultSpotlightShadowShadows.glsl.js';
|
|
6
9
|
|
|
7
|
-
const
|
|
8
|
-
|
|
10
|
+
const isSpotLight = child => {
|
|
11
|
+
return child == null ? void 0 : child.isSpotLight;
|
|
12
|
+
};
|
|
13
|
+
|
|
14
|
+
function VolumetricMesh({
|
|
9
15
|
opacity = 1,
|
|
10
16
|
radiusTop,
|
|
11
17
|
radiusBottom,
|
|
@@ -14,14 +20,14 @@ const SpotLight = /*#__PURE__*/React.forwardRef(({
|
|
|
14
20
|
distance = 5,
|
|
15
21
|
angle = 0.15,
|
|
16
22
|
attenuation = 5,
|
|
17
|
-
anglePower = 5
|
|
18
|
-
|
|
19
|
-
}, ref) => {
|
|
23
|
+
anglePower = 5
|
|
24
|
+
}) {
|
|
20
25
|
const mesh = React.useRef(null);
|
|
21
26
|
const size = useThree(state => state.size);
|
|
22
27
|
const camera = useThree(state => state.camera);
|
|
23
28
|
const dpr = useThree(state => state.viewport.dpr);
|
|
24
29
|
const [material] = React.useState(() => new SpotLightMaterial());
|
|
30
|
+
const [vec] = React.useState(() => new Vector3());
|
|
25
31
|
radiusTop = radiusTop === undefined ? 0.1 : radiusTop;
|
|
26
32
|
radiusBottom = radiusBottom === undefined ? angle * 7 : radiusBottom;
|
|
27
33
|
useFrame(() => {
|
|
@@ -33,13 +39,8 @@ const SpotLight = /*#__PURE__*/React.forwardRef(({
|
|
|
33
39
|
geometry.applyMatrix4(new Matrix4().makeTranslation(0, -distance / 2, 0));
|
|
34
40
|
geometry.applyMatrix4(new Matrix4().makeRotationX(-Math.PI / 2));
|
|
35
41
|
return geometry;
|
|
36
|
-
}, [
|
|
37
|
-
return /*#__PURE__*/React.createElement("
|
|
38
|
-
ref: ref,
|
|
39
|
-
angle: angle,
|
|
40
|
-
color: color,
|
|
41
|
-
distance: distance
|
|
42
|
-
}, props), /*#__PURE__*/React.createElement("mesh", {
|
|
42
|
+
}, [distance, radiusTop, radiusBottom]);
|
|
43
|
+
return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("mesh", {
|
|
43
44
|
ref: mesh,
|
|
44
45
|
geometry: geom,
|
|
45
46
|
raycast: () => null
|
|
@@ -55,6 +56,177 @@ const SpotLight = /*#__PURE__*/React.forwardRef(({
|
|
|
55
56
|
"uniforms-cameraFar-value": camera.far,
|
|
56
57
|
"uniforms-resolution-value": depthBuffer ? [size.width * dpr, size.height * dpr] : [0, 0]
|
|
57
58
|
})));
|
|
59
|
+
}
|
|
60
|
+
|
|
61
|
+
function useCommon(spotlight, mesh, width, height, distance) {
|
|
62
|
+
const [[pos, dir]] = React.useState(() => [new Vector3(), new Vector3()]);
|
|
63
|
+
React.useLayoutEffect(() => {
|
|
64
|
+
if (isSpotLight(spotlight.current)) {
|
|
65
|
+
console.log(spotlight.current);
|
|
66
|
+
spotlight.current.shadow.mapSize.set(width, height);
|
|
67
|
+
spotlight.current.shadow.needsUpdate = true;
|
|
68
|
+
} else {
|
|
69
|
+
throw new Error('SpotlightShadow must be a child of a SpotLight');
|
|
70
|
+
}
|
|
71
|
+
}, [spotlight, width, height]);
|
|
72
|
+
useFrame(() => {
|
|
73
|
+
if (!spotlight.current) return;
|
|
74
|
+
const A = spotlight.current.position;
|
|
75
|
+
const B = spotlight.current.target.position;
|
|
76
|
+
dir.copy(B).sub(A);
|
|
77
|
+
var len = dir.length();
|
|
78
|
+
dir.normalize().multiplyScalar(len * distance);
|
|
79
|
+
pos.copy(A).add(dir);
|
|
80
|
+
mesh.current.position.copy(pos);
|
|
81
|
+
mesh.current.lookAt(spotlight.current.target.position);
|
|
82
|
+
});
|
|
83
|
+
}
|
|
84
|
+
|
|
85
|
+
function SpotlightShadowWithShader({
|
|
86
|
+
distance = 0.4,
|
|
87
|
+
alphaTest = 0.5,
|
|
88
|
+
map,
|
|
89
|
+
shader = SpotlightShadowShader,
|
|
90
|
+
width = 512,
|
|
91
|
+
height = 512,
|
|
92
|
+
scale = 1,
|
|
93
|
+
children,
|
|
94
|
+
...rest
|
|
95
|
+
}) {
|
|
96
|
+
const mesh = React.useRef(null);
|
|
97
|
+
const spotlight = rest.spotlightRef;
|
|
98
|
+
const debug = rest.debug;
|
|
99
|
+
useCommon(spotlight, mesh, width, height, distance);
|
|
100
|
+
const renderTarget = React.useMemo(() => new WebGLRenderTarget(width, height, {
|
|
101
|
+
format: RGBAFormat,
|
|
102
|
+
encoding: LinearEncoding,
|
|
103
|
+
stencilBuffer: false // depthTexture: null!
|
|
104
|
+
|
|
105
|
+
}), [width, height]);
|
|
106
|
+
const uniforms = React.useRef({
|
|
107
|
+
uShadowMap: {
|
|
108
|
+
value: map
|
|
109
|
+
},
|
|
110
|
+
uTime: {
|
|
111
|
+
value: 0
|
|
112
|
+
}
|
|
113
|
+
});
|
|
114
|
+
React.useEffect(() => void (uniforms.current.uShadowMap.value = map), [map]);
|
|
115
|
+
const fsQuad = React.useMemo(() => new FullScreenQuad(new ShaderMaterial({
|
|
116
|
+
uniforms: uniforms.current,
|
|
117
|
+
vertexShader:
|
|
118
|
+
/* glsl */
|
|
119
|
+
`
|
|
120
|
+
varying vec2 vUv;
|
|
121
|
+
|
|
122
|
+
void main() {
|
|
123
|
+
vUv = uv;
|
|
124
|
+
gl_Position = projectionMatrix * modelViewMatrix * vec4(position, 1.0);
|
|
125
|
+
}
|
|
126
|
+
`,
|
|
127
|
+
fragmentShader: shader
|
|
128
|
+
})), [shader]);
|
|
129
|
+
React.useEffect(() => () => {
|
|
130
|
+
fsQuad.material.dispose();
|
|
131
|
+
fsQuad.dispose();
|
|
132
|
+
}, [fsQuad]);
|
|
133
|
+
React.useEffect(() => () => renderTarget.dispose(), [renderTarget]);
|
|
134
|
+
useFrame(({
|
|
135
|
+
gl
|
|
136
|
+
}, dt) => {
|
|
137
|
+
uniforms.current.uTime.value += dt;
|
|
138
|
+
gl.setRenderTarget(renderTarget);
|
|
139
|
+
fsQuad.render(gl);
|
|
140
|
+
gl.setRenderTarget(null);
|
|
141
|
+
});
|
|
142
|
+
return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("mesh", {
|
|
143
|
+
ref: mesh,
|
|
144
|
+
scale: scale,
|
|
145
|
+
castShadow: true
|
|
146
|
+
}, /*#__PURE__*/React.createElement("planeGeometry", null), /*#__PURE__*/React.createElement("meshBasicMaterial", {
|
|
147
|
+
transparent: true,
|
|
148
|
+
side: DoubleSide,
|
|
149
|
+
alphaTest: alphaTest,
|
|
150
|
+
alphaMap: renderTarget.texture,
|
|
151
|
+
"alphaMap-wrapS": RepeatWrapping,
|
|
152
|
+
"alphaMap-wrapT": RepeatWrapping,
|
|
153
|
+
opacity: debug ? 1 : 0
|
|
154
|
+
}, children)));
|
|
155
|
+
}
|
|
156
|
+
|
|
157
|
+
function SpotlightShadowWithoutShader({
|
|
158
|
+
distance = 0.4,
|
|
159
|
+
alphaTest = 0.5,
|
|
160
|
+
map,
|
|
161
|
+
width = 512,
|
|
162
|
+
height = 512,
|
|
163
|
+
scale,
|
|
164
|
+
children,
|
|
165
|
+
...rest
|
|
166
|
+
}) {
|
|
167
|
+
const mesh = React.useRef(null);
|
|
168
|
+
const spotlight = rest.spotlightRef;
|
|
169
|
+
const debug = rest.debug;
|
|
170
|
+
useCommon(spotlight, mesh, width, height, distance);
|
|
171
|
+
return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("mesh", {
|
|
172
|
+
ref: mesh,
|
|
173
|
+
scale: scale,
|
|
174
|
+
castShadow: true
|
|
175
|
+
}, /*#__PURE__*/React.createElement("planeGeometry", null), /*#__PURE__*/React.createElement("meshBasicMaterial", {
|
|
176
|
+
transparent: true,
|
|
177
|
+
side: DoubleSide,
|
|
178
|
+
alphaTest: alphaTest,
|
|
179
|
+
alphaMap: map,
|
|
180
|
+
"alphaMap-wrapS": RepeatWrapping,
|
|
181
|
+
"alphaMap-wrapT": RepeatWrapping,
|
|
182
|
+
opacity: debug ? 1 : 0
|
|
183
|
+
}, children)));
|
|
184
|
+
}
|
|
185
|
+
|
|
186
|
+
function SpotLightShadow(props) {
|
|
187
|
+
if (props.shader) return /*#__PURE__*/React.createElement(SpotlightShadowWithShader, props);
|
|
188
|
+
return /*#__PURE__*/React.createElement(SpotlightShadowWithoutShader, props);
|
|
189
|
+
}
|
|
190
|
+
const SpotLight = /*#__PURE__*/React.forwardRef(({
|
|
191
|
+
// Volumetric
|
|
192
|
+
opacity = 1,
|
|
193
|
+
radiusTop,
|
|
194
|
+
radiusBottom,
|
|
195
|
+
depthBuffer,
|
|
196
|
+
color = 'white',
|
|
197
|
+
distance = 5,
|
|
198
|
+
angle = 0.15,
|
|
199
|
+
attenuation = 5,
|
|
200
|
+
anglePower = 5,
|
|
201
|
+
volumetric = true,
|
|
202
|
+
debug = false,
|
|
203
|
+
children,
|
|
204
|
+
...props
|
|
205
|
+
}, ref) => {
|
|
206
|
+
const spotlight = React.useRef(null);
|
|
207
|
+
return /*#__PURE__*/React.createElement("group", null, debug && spotlight.current && /*#__PURE__*/React.createElement("spotLightHelper", {
|
|
208
|
+
args: [spotlight.current]
|
|
209
|
+
}), /*#__PURE__*/React.createElement("spotLight", _extends({
|
|
210
|
+
ref: mergeRefs([ref, spotlight]),
|
|
211
|
+
angle: angle,
|
|
212
|
+
color: color,
|
|
213
|
+
distance: distance,
|
|
214
|
+
castShadow: true
|
|
215
|
+
}, props), volumetric && /*#__PURE__*/React.createElement(VolumetricMesh, {
|
|
216
|
+
debug: debug,
|
|
217
|
+
opacity: opacity,
|
|
218
|
+
radiusTop: radiusTop,
|
|
219
|
+
radiusBottom: radiusBottom,
|
|
220
|
+
depthBuffer: depthBuffer,
|
|
221
|
+
color: color,
|
|
222
|
+
distance: distance,
|
|
223
|
+
angle: angle,
|
|
224
|
+
attenuation: attenuation,
|
|
225
|
+
anglePower: anglePower
|
|
226
|
+
})), children && /*#__PURE__*/React.cloneElement(children, {
|
|
227
|
+
spotlightRef: spotlight,
|
|
228
|
+
debug: debug
|
|
229
|
+
}));
|
|
58
230
|
});
|
|
59
231
|
|
|
60
|
-
export { SpotLight };
|
|
232
|
+
export { SpotLight, SpotLightShadow };
|
package/core/Stage.cjs.js
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("@babel/runtime/helpers/extends"),t=require("react"),r=require("
|
|
1
|
+
"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("@babel/runtime/helpers/extends"),t=require("react"),r=require("./Environment.cjs.js"),i=require("./ContactShadows.cjs.js"),n=require("./Center.cjs.js"),a=require("./AccumulativeShadows.cjs.js"),s=require("./Bounds.cjs.js");function u(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}function l(e){if(e&&e.__esModule)return e;var t=Object.create(null);return e&&Object.keys(e).forEach((function(r){if("default"!==r){var i=Object.getOwnPropertyDescriptor(e,r);Object.defineProperty(t,r,i.get?i:{enumerable:!0,get:function(){return e[r]}})}})),t.default=e,Object.freeze(t)}require("@react-three/fiber"),require("three"),require("three-stdlib"),require("../helpers/environment-assets.cjs.js"),require("./shaderMaterial.cjs.js");var o=u(e),c=l(t);const d={rembrandt:{main:[1,2,1],fill:[-2,-.5,-2]},portrait:{main:[-1,2,.5],fill:[-1,.5,-1.5]},upfront:{main:[0,2,1],fill:[-1,.5,-1.5]},soft:{main:[-2,4,4],fill:[-1,.5,-1.5]}};function m({radius:e,adjustCamera:t}){const r=s.useBounds();return c.useEffect((()=>{t&&r.refresh().clip().fit()}),[e,t]),null}exports.Stage=function({children:e,adjustCamera:t,intensity:u=.5,shadows:l="accumulative",environment:f="city",preset:h="rembrandt",...p}){var b,j;const v=d[h],[{radius:g,height:E},y]=c.useState({radius:0,width:0,height:0,depth:0}),q=null!==(b=null==l?void 0:l.bias)&&void 0!==b?b:-1e-4,w=null!==(j=null==l?void 0:l.size)&&void 0!==j?j:1024,S="contact"===l||"contact"===(null==l?void 0:l.type),C="accumulative"===l||"accumulative"===(null==l?void 0:l.type),O={..."object"==typeof l?l:{}};return console.log(E),c.createElement(c.Fragment,null,c.createElement("ambientLight",{intensity:u/3}),c.createElement("spotLight",{penumbra:1,position:[v.main[0]*g,v.main[1]*g,v.main[2]*g],intensity:2*u,castShadow:!!l,"shadow-bias":q,"shadow-mapSize":w}),c.createElement("pointLight",{position:[v.fill[0]*g,v.fill[1]*g,v.fill[2]*g],intensity:u}),c.createElement(s.Bounds,o.default({fit:!!t,clip:!!t,margin:Number(t),observe:!0},p),c.createElement(m,{radius:g,adjustCamera:t}),c.createElement(n.Center,{onCentered:({width:e,height:t,depth:r,boundingSphere:i,...n})=>y({radius:i.radius,width:e,height:t,depth:r})},e)),c.createElement("group",{position:[0,-E/2,0]},S&&c.createElement(i.ContactShadows,o.default({scale:4*g,far:g,blur:2},O)),C&&c.createElement(a.AccumulativeShadows,o.default({temporal:!0,frames:100,alphaTest:.9,toneMapped:!0,scale:4*g},O),c.createElement(a.RandomizedLight,{amount:8,radius:g,ambient:.5,intensity:1,position:[v.main[0]*g,v.main[1]*g,v.main[2]*g],size:4*g,bias:-q,mapSize:w}))),f&&c.createElement(r.Environment,{preset:f}))};
|
package/core/Stage.d.ts
CHANGED
|
@@ -1,5 +1,6 @@
|
|
|
1
|
-
|
|
2
|
-
import
|
|
1
|
+
/// <reference types="react" />
|
|
2
|
+
import { ContactShadowsProps } from './ContactShadows';
|
|
3
|
+
import { AccumulativeShadowsProps } from './AccumulativeShadows';
|
|
3
4
|
import { PresetsType } from '../helpers/environment-assets';
|
|
4
5
|
declare const presets: {
|
|
5
6
|
rembrandt: {
|
|
@@ -19,24 +20,17 @@ declare const presets: {
|
|
|
19
20
|
fill: number[];
|
|
20
21
|
};
|
|
21
22
|
};
|
|
22
|
-
declare type
|
|
23
|
-
|
|
24
|
-
|
|
23
|
+
declare type StageShadows = Partial<AccumulativeShadowsProps> & Partial<ContactShadowsProps> & {
|
|
24
|
+
type: 'contact' | 'accumulative';
|
|
25
|
+
bias?: number;
|
|
26
|
+
size?: number;
|
|
25
27
|
};
|
|
26
|
-
declare type
|
|
27
|
-
|
|
28
|
-
|
|
28
|
+
declare type StageProps = JSX.IntrinsicElements['group'] & {
|
|
29
|
+
preset?: keyof typeof presets;
|
|
30
|
+
shadows?: boolean | 'contact' | 'accumulative' | StageShadows;
|
|
31
|
+
adjustCamera?: boolean | number;
|
|
29
32
|
environment?: PresetsType | null;
|
|
30
33
|
intensity?: number;
|
|
31
|
-
ambience?: number;
|
|
32
|
-
controls?: React.MutableRefObject<ControlsProto>;
|
|
33
|
-
preset?: keyof typeof presets;
|
|
34
|
-
shadowBias?: number;
|
|
35
|
-
contactShadow?: {
|
|
36
|
-
blur: number;
|
|
37
|
-
opacity?: number;
|
|
38
|
-
position?: [x: number, y: number, z: number];
|
|
39
|
-
} | false;
|
|
40
34
|
};
|
|
41
|
-
export declare function Stage({ children,
|
|
35
|
+
export declare function Stage({ children, adjustCamera, intensity, shadows, environment, preset, ...props }: StageProps): JSX.Element;
|
|
42
36
|
export {};
|
package/core/Stage.js
CHANGED
|
@@ -1,9 +1,10 @@
|
|
|
1
1
|
import _extends from '@babel/runtime/helpers/esm/extends';
|
|
2
2
|
import * as React from 'react';
|
|
3
|
-
import * as THREE from 'three';
|
|
4
|
-
import { useThree } from '@react-three/fiber';
|
|
5
3
|
import { Environment } from './Environment.js';
|
|
6
4
|
import { ContactShadows } from './ContactShadows.js';
|
|
5
|
+
import { Center } from './Center.js';
|
|
6
|
+
import { AccumulativeShadows, RandomizedLight } from './AccumulativeShadows.js';
|
|
7
|
+
import { Bounds, useBounds } from './Bounds.js';
|
|
7
8
|
|
|
8
9
|
const presets = {
|
|
9
10
|
rembrandt: {
|
|
@@ -23,89 +24,102 @@ const presets = {
|
|
|
23
24
|
fill: [-1, 0.5, -1.5]
|
|
24
25
|
}
|
|
25
26
|
};
|
|
27
|
+
|
|
28
|
+
function Refit({
|
|
29
|
+
radius,
|
|
30
|
+
adjustCamera
|
|
31
|
+
}) {
|
|
32
|
+
const api = useBounds();
|
|
33
|
+
React.useEffect(() => {
|
|
34
|
+
if (adjustCamera) api.refresh().clip().fit();
|
|
35
|
+
}, [radius, adjustCamera]);
|
|
36
|
+
return null;
|
|
37
|
+
}
|
|
38
|
+
|
|
26
39
|
function Stage({
|
|
27
40
|
children,
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
41
|
+
adjustCamera,
|
|
42
|
+
intensity = 0.5,
|
|
43
|
+
shadows = 'accumulative',
|
|
31
44
|
environment = 'city',
|
|
32
|
-
intensity = 1,
|
|
33
45
|
preset = 'rembrandt',
|
|
34
|
-
shadowBias = 0,
|
|
35
|
-
contactShadow = {
|
|
36
|
-
blur: 2,
|
|
37
|
-
opacity: 0.5,
|
|
38
|
-
position: [0, 0, 0]
|
|
39
|
-
},
|
|
40
46
|
...props
|
|
41
47
|
}) {
|
|
42
|
-
|
|
43
|
-
const camera = useThree(state => state.camera); // @ts-expect-error new in @react-three/fiber@7.0.5
|
|
48
|
+
var _bias, _size;
|
|
44
49
|
|
|
45
|
-
const
|
|
46
|
-
const outer = React.useRef(null);
|
|
47
|
-
const inner = React.useRef(null);
|
|
50
|
+
const config = presets[preset];
|
|
48
51
|
const [{
|
|
49
52
|
radius,
|
|
50
|
-
width,
|
|
51
53
|
height
|
|
52
54
|
}, set] = React.useState({
|
|
53
55
|
radius: 0,
|
|
54
56
|
width: 0,
|
|
55
|
-
height: 0
|
|
57
|
+
height: 0,
|
|
58
|
+
depth: 0
|
|
56
59
|
});
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
box3.getCenter(center);
|
|
66
|
-
box3.getBoundingSphere(sphere);
|
|
67
|
-
set({
|
|
68
|
-
radius: sphere.radius,
|
|
69
|
-
width,
|
|
70
|
-
height
|
|
71
|
-
});
|
|
72
|
-
outer.current.position.set(-center.x, -center.y + height / 2, -center.z);
|
|
73
|
-
}, [children]);
|
|
74
|
-
React.useLayoutEffect(() => {
|
|
75
|
-
if (adjustCamera) {
|
|
76
|
-
const y = radius / (height > width ? 1.5 : 2.5);
|
|
77
|
-
camera.position.set(0, radius * 0.5, radius * 2.5);
|
|
78
|
-
camera.near = 0.1;
|
|
79
|
-
camera.far = Math.max(5000, radius * 4);
|
|
80
|
-
camera.lookAt(0, y, 0);
|
|
81
|
-
const ctrl = defaultControls || (controls == null ? void 0 : controls.current);
|
|
82
|
-
|
|
83
|
-
if (ctrl) {
|
|
84
|
-
ctrl.target.set(0, y, 0);
|
|
85
|
-
ctrl.update();
|
|
86
|
-
}
|
|
87
|
-
}
|
|
88
|
-
}, [defaultControls, radius, height, width, adjustCamera]);
|
|
89
|
-
return /*#__PURE__*/React.createElement("group", props, /*#__PURE__*/React.createElement("group", {
|
|
90
|
-
ref: outer
|
|
91
|
-
}, /*#__PURE__*/React.createElement("group", {
|
|
92
|
-
ref: inner
|
|
93
|
-
}, children)), contactShadow && /*#__PURE__*/React.createElement(ContactShadows, _extends({
|
|
94
|
-
scale: radius * 2,
|
|
95
|
-
far: radius / 2
|
|
96
|
-
}, contactShadow)), environment && /*#__PURE__*/React.createElement(Environment, {
|
|
97
|
-
preset: environment
|
|
98
|
-
}), /*#__PURE__*/React.createElement("ambientLight", {
|
|
60
|
+
const shadowBias = (_bias = shadows == null ? void 0 : shadows.bias) !== null && _bias !== void 0 ? _bias : -0.0001;
|
|
61
|
+
const shadowSize = (_size = shadows == null ? void 0 : shadows.size) !== null && _size !== void 0 ? _size : 1024;
|
|
62
|
+
const contactShadow = shadows === 'contact' || (shadows == null ? void 0 : shadows.type) === 'contact';
|
|
63
|
+
const accumulativeShadow = shadows === 'accumulative' || (shadows == null ? void 0 : shadows.type) === 'accumulative';
|
|
64
|
+
const shadowSpread = { ...(typeof shadows === 'object' ? shadows : {})
|
|
65
|
+
};
|
|
66
|
+
console.log(height);
|
|
67
|
+
return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("ambientLight", {
|
|
99
68
|
intensity: intensity / 3
|
|
100
69
|
}), /*#__PURE__*/React.createElement("spotLight", {
|
|
101
70
|
penumbra: 1,
|
|
102
71
|
position: [config.main[0] * radius, config.main[1] * radius, config.main[2] * radius],
|
|
103
72
|
intensity: intensity * 2,
|
|
104
|
-
castShadow: shadows,
|
|
105
|
-
"shadow-bias": shadowBias
|
|
73
|
+
castShadow: !!shadows,
|
|
74
|
+
"shadow-bias": shadowBias,
|
|
75
|
+
"shadow-mapSize": shadowSize
|
|
106
76
|
}), /*#__PURE__*/React.createElement("pointLight", {
|
|
107
77
|
position: [config.fill[0] * radius, config.fill[1] * radius, config.fill[2] * radius],
|
|
108
78
|
intensity: intensity
|
|
79
|
+
}), /*#__PURE__*/React.createElement(Bounds, _extends({
|
|
80
|
+
fit: !!adjustCamera,
|
|
81
|
+
clip: !!adjustCamera,
|
|
82
|
+
margin: Number(adjustCamera),
|
|
83
|
+
observe: true
|
|
84
|
+
}, props), /*#__PURE__*/React.createElement(Refit, {
|
|
85
|
+
radius: radius,
|
|
86
|
+
adjustCamera: adjustCamera
|
|
87
|
+
}), /*#__PURE__*/React.createElement(Center, {
|
|
88
|
+
onCentered: ({
|
|
89
|
+
width,
|
|
90
|
+
height,
|
|
91
|
+
depth,
|
|
92
|
+
boundingSphere,
|
|
93
|
+
...data
|
|
94
|
+
}) => set({
|
|
95
|
+
radius: boundingSphere.radius,
|
|
96
|
+
width,
|
|
97
|
+
height,
|
|
98
|
+
depth
|
|
99
|
+
})
|
|
100
|
+
}, children)), /*#__PURE__*/React.createElement("group", {
|
|
101
|
+
position: [0, -height / 2, 0]
|
|
102
|
+
}, contactShadow && /*#__PURE__*/React.createElement(ContactShadows, _extends({
|
|
103
|
+
scale: radius * 4,
|
|
104
|
+
far: radius,
|
|
105
|
+
blur: 2
|
|
106
|
+
}, shadowSpread)), accumulativeShadow && /*#__PURE__*/React.createElement(AccumulativeShadows, _extends({
|
|
107
|
+
temporal: true,
|
|
108
|
+
frames: 100,
|
|
109
|
+
alphaTest: 0.9,
|
|
110
|
+
toneMapped: true,
|
|
111
|
+
scale: radius * 4
|
|
112
|
+
}, shadowSpread), /*#__PURE__*/React.createElement(RandomizedLight, {
|
|
113
|
+
amount: 8,
|
|
114
|
+
radius: radius,
|
|
115
|
+
ambient: 0.5,
|
|
116
|
+
intensity: 1,
|
|
117
|
+
position: [config.main[0] * radius, config.main[1] * radius, config.main[2] * radius],
|
|
118
|
+
size: radius * 4,
|
|
119
|
+
bias: -shadowBias,
|
|
120
|
+
mapSize: shadowSize
|
|
121
|
+
}))), environment && /*#__PURE__*/React.createElement(Environment, {
|
|
122
|
+
preset: environment
|
|
109
123
|
}));
|
|
110
124
|
}
|
|
111
125
|
|
package/core/Trail.cjs.js
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("@react-three/fiber"),t=require("react"),r=require("three"),n=require("meshline");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 i=o(t);const s={width:.2,length:1,decay:1,local:!1,stride:0,interval:1},
|
|
1
|
+
"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("@react-three/fiber"),t=require("react"),r=require("three"),n=require("meshline");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 i=o(t);const s={width:.2,length:1,decay:1,local:!1,stride:0,interval:1},c=(e,t=1)=>(e.set(e.subarray(t)),e.fill(-1/0,-t),e);function u(t,n){const{length:o,local:u,decay:l,interval:a,stride:f}={...s,...n},h=i.useRef(),[d]=i.useState((()=>new r.Vector3));i.useLayoutEffect((()=>{t&&(h.current=Float32Array.from({length:10*o*3},((e,r)=>t.position.getComponent(r%3))))}),[o,t]);const p=i.useRef(new r.Vector3),y=i.useRef(0);return e.useFrame((()=>{if(t&&h.current){if(0===y.current){let e;u?e=t.position:(t.getWorldPosition(d),e=d);const r=1*l;for(let t=0;t<r;t++)e.distanceTo(p.current)<f||(c(h.current,3),h.current.set(e.toArray(),h.current.length-3));p.current.copy(e)}y.current++,y.current=y.current%a}})),h}const l=i.forwardRef(((t,o)=>{const{children:c}=t,{width:l,length:a,decay:f,local:h,stride:d,interval:p}={...s,...t},{color:y="hotpink",attenuation:g,target:m}=t,v=e.useThree((e=>e.size)),b=e.useThree((e=>e.scene)),w=i.useRef(null),[M,j]=i.useState(null),O=u(M,{length:a,decay:f,local:h,stride:d,interval:p});i.useEffect((()=>{const e=(null==m?void 0:m.current)||w.current.children.find((e=>e instanceof r.Object3D));e&&j(e)}),[O,m]);const E=i.useMemo((()=>new n.MeshLine),[]),P=i.useMemo((()=>{var e;const t=new n.MeshLineMaterial({lineWidth:.1*l,color:y,sizeAttenuation:1,resolution:new r.Vector2(v.width,v.height)});let o;if(c)if(Array.isArray(c))o=c.find((e=>{const t=e;return"string"==typeof t.type&&"meshLineMaterial"===t.type}));else{const e=c;"string"==typeof e.type&&"meshLineMaterial"===e.type&&(o=e)}return"object"==typeof(null==(e=o)?void 0:e.props)&&t.setValues(o.props),t}),[l,y,v,c]);return i.useEffect((()=>{P.uniforms.resolution.value.set(v.width,v.height)}),[v]),e.useFrame((()=>{O.current&&E.setPoints(O.current,g)})),i.createElement("group",null,e.createPortal(i.createElement("mesh",{ref:o,geometry:E,material:P}),b),i.createElement("group",{ref:w},c))}));exports.Trail=l,exports.useTrail=u;
|
package/core/Trail.js
CHANGED
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import { useFrame, useThree } from '@react-three/fiber';
|
|
1
|
+
import { useFrame, useThree, createPortal } from '@react-three/fiber';
|
|
2
2
|
import * as React from 'react';
|
|
3
3
|
import { Vector3, Object3D, Vector2 } from 'three';
|
|
4
4
|
import { MeshLine, MeshLineMaterial } from 'meshline';
|
|
@@ -89,6 +89,7 @@ const Trail = /*#__PURE__*/React.forwardRef((props, forwardRef) => {
|
|
|
89
89
|
target
|
|
90
90
|
} = props;
|
|
91
91
|
const size = useThree(s => s.size);
|
|
92
|
+
const scene = useThree(s => s.scene);
|
|
92
93
|
const ref = React.useRef(null);
|
|
93
94
|
const [anchor, setAnchor] = React.useState(null);
|
|
94
95
|
const points = useTrail(anchor, {
|
|
@@ -148,11 +149,11 @@ const Trail = /*#__PURE__*/React.forwardRef((props, forwardRef) => {
|
|
|
148
149
|
if (!points.current) return;
|
|
149
150
|
geo.setPoints(points.current, attenuation);
|
|
150
151
|
});
|
|
151
|
-
return /*#__PURE__*/React.createElement("group", null, /*#__PURE__*/React.createElement("mesh", {
|
|
152
|
+
return /*#__PURE__*/React.createElement("group", null, createPortal( /*#__PURE__*/React.createElement("mesh", {
|
|
152
153
|
ref: forwardRef,
|
|
153
154
|
geometry: geo,
|
|
154
155
|
material: mat
|
|
155
|
-
}), /*#__PURE__*/React.createElement("group", {
|
|
156
|
+
}), scene), /*#__PURE__*/React.createElement("group", {
|
|
156
157
|
ref: ref
|
|
157
158
|
}, children));
|
|
158
159
|
});
|
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"),n=require("./Effects.cjs.js"),c=require("./GradientTexture.cjs.js"),j=require("./Image.cjs.js"),p=require("./Edges.cjs.js"),x=require("./Trail.cjs.js"),l=require("./Sampler.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"),n=require("./Effects.cjs.js"),c=require("./GradientTexture.cjs.js"),j=require("./Image.cjs.js"),p=require("./Edges.cjs.js"),x=require("./Trail.cjs.js"),l=require("./Sampler.cjs.js"),d=require("./ComputedAttribute.cjs.js"),q=require("./Clone.cjs.js"),m=require("./MarchingCubes.cjs.js"),h=require("./Decal.cjs.js"),C=require("./Svg.cjs.js"),M=require("./OrthographicCamera.cjs.js"),S=require("./PerspectiveCamera.cjs.js"),P=require("./CubeCamera.cjs.js"),b=require("./DeviceOrientationControls.cjs.js"),B=require("./FlyControls.cjs.js"),g=require("./MapControls.cjs.js"),f=require("./OrbitControls.cjs.js"),T=require("./TrackballControls.cjs.js"),v=require("./ArcballControls.cjs.js"),L=require("./TransformControls.cjs.js"),A=require("./PointerLockControls.cjs.js"),k=require("./FirstPersonControls.cjs.js"),D=require("./GizmoHelper.cjs.js"),E=require("./GizmoViewcube.cjs.js"),R=require("./GizmoViewport.cjs.js"),w=require("./useCubeTexture.cjs.js"),G=require("./useFBX.cjs.js"),z=require("./useGLTF.cjs.js"),F=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"),ne=require("./shapes.cjs.js"),ce=require("./RoundedBox.cjs.js"),je=require("./ScreenQuad.cjs.js"),pe=require("./Center.cjs.js"),xe=require("./Bounds.cjs.js"),le=require("./CameraShake.cjs.js"),de=require("./Float.cjs.js"),qe=require("./Stage.cjs.js"),me=require("./Backdrop.cjs.js"),he=require("./Shadow.cjs.js"),Ce=require("./ContactShadows.cjs.js"),Me=require("./AccumulativeShadows.cjs.js"),Se=require("./Reflector.cjs.js"),Pe=require("./SpotLight.cjs.js"),be=require("./Environment.cjs.js"),Be=require("./Lightformer.cjs.js"),ge=require("./Sky.cjs.js"),fe=require("./Stars.cjs.js"),Te=require("./Cloud.cjs.js"),ve=require("./Sparkles.cjs.js"),Le=require("./useMatcapTexture.cjs.js"),Ae=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"),Ge=require("./BakeShadows.cjs.js"),ze=require("./meshBounds.cjs.js"),Fe=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("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=n.Effects,exports.isWebGL2Available=n.isWebGL2Available,exports.GradientTexture=c.GradientTexture,exports.Image=j.Image,exports.Edges=p.Edges,exports.Trail=x.Trail,exports.useTrail=x.useTrail,exports.Sampler=l.Sampler,exports.useSurfaceSampler=l.useSurfaceSampler,exports.ComputedAttribute=d.ComputedAttribute,exports.Clone=q.Clone,exports.MarchingCube=m.MarchingCube,exports.MarchingCubes=m.MarchingCubes,exports.MarchingPlane=m.MarchingPlane,exports.Decal=h.Decal,exports.Svg=C.Svg,exports.OrthographicCamera=M.OrthographicCamera,exports.PerspectiveCamera=S.PerspectiveCamera,exports.CubeCamera=P.CubeCamera,exports.DeviceOrientationControls=b.DeviceOrientationControls,exports.FlyControls=B.FlyControls,exports.MapControls=g.MapControls,exports.OrbitControls=f.OrbitControls,exports.TrackballControls=T.TrackballControls,exports.ArcballControls=v.ArcballControls,exports.TransformControls=L.TransformControls,exports.PointerLockControls=A.PointerLockControls,exports.FirstPersonControls=k.FirstPersonControls,exports.GizmoHelper=D.GizmoHelper,exports.useGizmoContext=D.useGizmoContext,exports.GizmoViewcube=E.GizmoViewcube,exports.GizmoViewport=R.GizmoViewport,exports.useCubeTexture=w.useCubeTexture,exports.useFBX=G.useFBX,exports.useGLTF=z.useGLTF,exports.useKTX2=F.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=ne.Box,exports.Capsule=ne.Capsule,exports.Circle=ne.Circle,exports.Cone=ne.Cone,exports.Cylinder=ne.Cylinder,exports.Dodecahedron=ne.Dodecahedron,exports.Extrude=ne.Extrude,exports.Icosahedron=ne.Icosahedron,exports.Lathe=ne.Lathe,exports.Octahedron=ne.Octahedron,exports.Plane=ne.Plane,exports.Polyhedron=ne.Polyhedron,exports.Ring=ne.Ring,exports.Sphere=ne.Sphere,exports.Tetrahedron=ne.Tetrahedron,exports.Torus=ne.Torus,exports.TorusKnot=ne.TorusKnot,exports.Tube=ne.Tube,exports.RoundedBox=ce.RoundedBox,exports.ScreenQuad=je.ScreenQuad,exports.Center=pe.Center,exports.Bounds=xe.Bounds,exports.useBounds=xe.useBounds,exports.CameraShake=le.CameraShake,exports.Float=de.Float,exports.Stage=qe.Stage,exports.Backdrop=me.Backdrop,exports.Shadow=he.Shadow,exports.ContactShadows=Ce.ContactShadows,exports.AccumulativeShadows=Me.AccumulativeShadows,exports.RandomizedLight=Me.RandomizedLight,exports.accumulativeContext=Me.accumulativeContext,exports.Reflector=Se.Reflector,exports.SpotLight=Pe.SpotLight,exports.SpotLightShadow=Pe.SpotLightShadow,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=ge.Sky,exports.calcPosFromAngles=ge.calcPosFromAngles,exports.Stars=fe.Stars,exports.Cloud=Te.Cloud,exports.Sparkles=ve.Sparkles,exports.useMatcapTexture=Le.useMatcapTexture,exports.useNormalTexture=Ae.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=Ge.BakeShadows,exports.meshBounds=ze.meshBounds,exports.AdaptiveDpr=Fe.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
|
@@ -73,7 +73,7 @@ export { Shadow } from './Shadow.js';
|
|
|
73
73
|
export { ContactShadows } from './ContactShadows.js';
|
|
74
74
|
export { AccumulativeShadows, RandomizedLight, accumulativeContext } from './AccumulativeShadows.js';
|
|
75
75
|
export { Reflector } from './Reflector.js';
|
|
76
|
-
export { SpotLight } from './SpotLight.js';
|
|
76
|
+
export { SpotLight, SpotLightShadow } from './SpotLight.js';
|
|
77
77
|
export { Environment, EnvironmentCube, EnvironmentMap, EnvironmentPortal, useEnvironment } from './Environment.js';
|
|
78
78
|
export { Lightformer } from './Lightformer.js';
|
|
79
79
|
export { Sky, calcPosFromAngles } from './Sky.js';
|