@react-three/drei 9.40.5 → 9.41.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 CHANGED
@@ -475,7 +475,7 @@ enum Controls {
475
475
  jump = 'jump',
476
476
  }
477
477
  function App() {
478
- const map = useMemo<KeyboardControlsEntry<Controls>>(()=>[
478
+ const map = useMemo<KeyboardControlsEntry<Controls>[]>(()=>[
479
479
  { name: Controls.forward, keys: ['ArrowUp', 'w', 'W'] },
480
480
  { name: Controls.back, keys: ['ArrowDown', 's', 'S'] },
481
481
  { name: Controls.left, keys: ['ArrowLeft', 'a', 'A'] },
@@ -1027,7 +1027,7 @@ You can either pass a Mesh and InstancedMesh as children:
1027
1027
  ```tsx
1028
1028
  // This simple example scatters 1000 spheres on the surface of the sphere mesh.
1029
1029
  <Sampler
1030
- weight={"normal"} // the name of the attribute to be used as sampling weight
1030
+ weight={'normal'} // the name of the attribute to be used as sampling weight
1031
1031
  transform={transformPoint} // a function that transforms each instance given a sample. See the examples for more.
1032
1032
  count={16} // Number of samples
1033
1033
  >
@@ -1036,7 +1036,7 @@ You can either pass a Mesh and InstancedMesh as children:
1036
1036
  </mesh>
1037
1037
 
1038
1038
  <instancedMesh args={[null, null, 1_000]}>
1039
- <sphereGeometry args={[0.1]}/>
1039
+ <sphereGeometry args={[0.1]} />
1040
1040
  </instancedMesh>
1041
1041
  </Sampler>
1042
1042
  ```
@@ -1950,7 +1950,7 @@ A convenience hook that returns a `THREE.VideoTexture` and integrates loading in
1950
1950
 
1951
1951
  ```tsx
1952
1952
  type VideoTextureProps = {
1953
- unsuspend?: 'canplay' | 'canplaythrough'
1953
+ unsuspend?: 'canplay' | 'canplaythrough' | 'loadedmetadata'
1954
1954
  muted?: boolean
1955
1955
  loop?: boolean
1956
1956
  start?: boolean
@@ -2828,6 +2828,39 @@ function Foo() {
2828
2828
  return <SpotLight depthBuffer={depthBuffer} />
2829
2829
  ```
2830
2830
 
2831
+ #### SpotLightShadows
2832
+
2833
+ A shadow caster that can help cast shadows of different patterns (textures) onto the scene.
2834
+
2835
+ ```jsx
2836
+ <SpotLight>
2837
+ <SpotLightShadows
2838
+ distance={0.4} // Distance between the shadow caster and light
2839
+ alphaTest={0.5} // Sets the alpha value to be used when running an alpha test. See Material.alphaTest
2840
+ scale={1} // Scale of the shadow caster plane
2841
+ map={undefined} // Texture - Pattern of the shadow
2842
+ shader={undefined} // Optional shader to run. Lets you add effects to the shadow map. See bellow
2843
+ width={512} // Width of the shadow map. The higher the more expnsive
2844
+ height={512} // Height of the shadow map. The higher the more expnsive
2845
+ />
2846
+ </SpotLight>
2847
+ ```
2848
+
2849
+ An optinal `shader` prop lets you run a custom shader to modify/add effects to your shadow texture. The shader privides the following uniforms and varyings.
2850
+
2851
+ | Type | Name | Notes |
2852
+ | ------------------- | ------------ | -------------------------------------- |
2853
+ | `varying vec2` | `vUv` | UVs of the shadow casting plane |
2854
+ | `uniform sampler2D` | `uShadowMap` | The texture provided to the `map` prop |
2855
+ | `uniform float` | `uTime` | Current time |
2856
+
2857
+ Treat the output of the shader like an alpha map where `1` is opaque and `0` is transparent.
2858
+
2859
+ ```glsl
2860
+ gl_FragColor = vec4(vec3(1.), 1.); // Opaque
2861
+ gl_FragColor = vec4(vec3(0.), 1.); // Transparnet
2862
+ ```
2863
+
2831
2864
  #### Environment
2832
2865
 
2833
2866
  [![](https://img.shields.io/badge/-storybook-%23ff69b4)](https://drei.pmnd.rs/?path=/story/staging-environment--environment-story)
@@ -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");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,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}}}const g=l.createContext(null),M=new u.Matrix4,b=new u.Matrix4,w=new u.Matrix4,v=new u.Vector3,E=new u.Quaternion,A=new u.Vector3,j=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||g);return l.useLayoutEffect((()=>i(c)),[]),l.createElement("positionMesh",o.default({instance:s(),instanceKey:c,ref:f.default([a,c])},r),t)})),O=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(j,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(let t=0;t<r;t++)w.identity().toArray(e,16*t);return[e,new Float32Array([...new Array(3*r)].map((()=>1)))]}));l.useEffect((()=>{m.current.instanceMatrix.needsUpdate=!0}));let O=0,P=0;n.useFrame((()=>{if(a===1/0||O<a){m.current.updateMatrix(),m.current.updateMatrixWorld(),M.copy(m.current.matrixWorld).invert(),P=Math.min(r,void 0!==t?t:r,y.length),m.current.count=P,m.current.instanceMatrix.updateRange.count=16*P,m.current.instanceColor.updateRange.count=3*P;for(let e=0;e<y.length;e++){const t=y[e].current;t.matrixWorld.decompose(v,E,A),b.compose(v,E,A).premultiply(M),b.toArray(h,16*e),m.current.instanceMatrix.needsUpdate=!0,t.color.toArray(x,3*e),m.current.instanceColor.needsUpdate=!0}O++}}));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(g.Provider,{value:R},e))})),P=l.forwardRef((function({meshes:e,children:t,...r},n){const a=Array.isArray(e);if(!a)for(const t of Object.keys(e))e[t].isMesh||delete e[t];return l.createElement("group",{ref:n},l.createElement(d.default,{components:(a?e:Object.values(e)).map((({geometry:e,material:t})=>l.createElement(O,o.default({key:e.uuid,geometry:e,material:t},r))))},(r=>a?t(...r):t(Object.keys(e).filter((t=>e[t].isMesh)).reduce(((e,t,n)=>({...e,[t]:r[n]})),{})))))}));exports.Instance=j,exports.Instances=O,exports.Merged=P;
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,a=r.userData.instances.indexOf(this.instanceKey);if(!(-1===a||a>r.count)){r.getMatrixAt(a,m),y.multiplyMatrices(n,m),h.matrixWorld=y,r.material instanceof u.Material?h.material.side=r.material.side:h.material.side=r.material[0].side,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}}}const g=l.createContext(null),M=new u.Matrix4,b=new u.Matrix4,w=new u.Matrix4,v=new u.Vector3,E=new u.Quaternion,A=new u.Vector3,j=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||g);return l.useLayoutEffect((()=>i(c)),[]),l.createElement("positionMesh",o.default({instance:s(),instanceKey:c,ref:f.default([a,c])},r),t)})),O=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(j,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(let t=0;t<r;t++)w.identity().toArray(e,16*t);return[e,new Float32Array([...new Array(3*r)].map((()=>1)))]}));l.useEffect((()=>{m.current.instanceMatrix.needsUpdate=!0}));let O=0,P=0;n.useFrame((()=>{if(a===1/0||O<a){m.current.updateMatrix(),m.current.updateMatrixWorld(),M.copy(m.current.matrixWorld).invert(),P=Math.min(r,void 0!==t?t:r,y.length),m.current.count=P,m.current.instanceMatrix.updateRange.count=16*P,m.current.instanceColor.updateRange.count=3*P;for(let e=0;e<y.length;e++){const t=y[e].current;t.matrixWorld.decompose(v,E,A),b.compose(v,E,A).premultiply(M),b.toArray(h,16*e),m.current.instanceMatrix.needsUpdate=!0,t.color.toArray(x,3*e),m.current.instanceColor.needsUpdate=!0}O++}}));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(g.Provider,{value:R},e))})),P=l.forwardRef((function({meshes:e,children:t,...r},n){const a=Array.isArray(e);if(!a)for(const t of Object.keys(e))e[t].isMesh||delete e[t];return l.createElement("group",{ref:n},l.createElement(d.default,{components:(a?e:Object.values(e)).map((({geometry:e,material:t})=>l.createElement(O,o.default({key:e.uuid,geometry:e,material:t},r))))},(r=>a?t(...r):t(Object.keys(e).filter((t=>e[t].isMesh)).reduce(((e,t,n)=>({...e,[t]:r[n]})),{})))))}));exports.Instance=j,exports.Instances=O,exports.Merged=P;
package/core/Instances.js CHANGED
@@ -48,7 +48,9 @@ class PositionMesh extends THREE.Group {
48
48
  _instanceWorldMatrix.multiplyMatrices(matrixWorld, _instanceLocalMatrix); // the mesh represents this single instance
49
49
 
50
50
 
51
- _mesh.matrixWorld = _instanceWorldMatrix;
51
+ _mesh.matrixWorld = _instanceWorldMatrix; // raycast side according to instance material
52
+
53
+ if (parent.material instanceof THREE.Material) _mesh.material.side = parent.material.side;else _mesh.material.side = parent.material[0].side;
52
54
 
53
55
  _mesh.raycast(raycaster, _instanceIntersects); // process the result of raycast
54
56
 
@@ -1 +1 @@
1
- "use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("@babel/runtime/helpers/extends"),t=require("react"),r=require("three"),a=require("@react-three/fiber"),o=require("../materials/SpotLightMaterial.cjs.js");function i(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}function n(e){if(e&&e.__esModule)return e;var t=Object.create(null);return e&&Object.keys(e).forEach((function(r){if("default"!==r){var a=Object.getOwnPropertyDescriptor(e,r);Object.defineProperty(t,r,a.get?a:{enumerable:!0,get:function(){return e[r]}})}})),t.default=e,Object.freeze(t)}var u=i(e),l=n(t);const s=new r.Vector3,c=l.forwardRef((({opacity:e=1,radiusTop:t,radiusBottom:i,depthBuffer:n,color:c="white",distance:f=5,angle:m=.15,attenuation:p=5,anglePower:d=5,...h},v)=>{const g=l.useRef(null),y=a.useThree((e=>e.size)),b=a.useThree((e=>e.camera)),w=a.useThree((e=>e.viewport.dpr)),[j]=l.useState((()=>new o.SpotLightMaterial));t=void 0===t?.1:t,i=void 0===i?7*m:i,a.useFrame((()=>{j.uniforms.spotPosition.value.copy(g.current.getWorldPosition(s)),g.current.lookAt(g.current.parent.target.getWorldPosition(s))}));const M=l.useMemo((()=>{const e=new r.CylinderGeometry(t,i,f,128,64,!0);return e.applyMatrix4((new r.Matrix4).makeTranslation(0,-f/2,0)),e.applyMatrix4((new r.Matrix4).makeRotationX(-Math.PI/2)),e}),[m,f,t,i]);return l.createElement("spotLight",u.default({ref:v,angle:m,color:c,distance:f},h),l.createElement("mesh",{ref:g,geometry:M,raycast:()=>null},l.createElement("primitive",{object:j,attach:"material","uniforms-opacity-value":e,"uniforms-lightColor-value":c,"uniforms-attenuation-value":p,"uniforms-anglePower-value":d,"uniforms-depth-value":n,"uniforms-cameraNear-value":b.near,"uniforms-cameraFar-value":b.far,"uniforms-resolution-value":n?[y.width*w,y.height*w]:[0,0]})))}));exports.SpotLight=c;
1
+ "use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("@babel/runtime/helpers/extends"),t=require("react"),r=require("three"),a=require("@react-three/fiber"),n=require("three-stdlib"),o=require("react-merge-refs"),i=require("../materials/SpotLightMaterial.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 a=Object.getOwnPropertyDescriptor(e,r);Object.defineProperty(t,r,a.get?a:{enumerable:!0,get:function(){return e[r]}})}})),t.default=e,Object.freeze(t)}var c=u(e),s=l(t),p=u(o);function d({opacity:e=1,radiusTop:t,radiusBottom:n,depthBuffer:o,color:u="white",distance:l=5,angle:c=.15,attenuation:p=5,anglePower:d=5}){const m=s.useRef(null),h=a.useThree((e=>e.size)),f=a.useThree((e=>e.camera)),g=a.useThree((e=>e.viewport.dpr)),[v]=s.useState((()=>new i.SpotLightMaterial)),[w]=s.useState((()=>new r.Vector3));t=void 0===t?.1:t,n=void 0===n?7*c:n,a.useFrame((()=>{v.uniforms.spotPosition.value.copy(m.current.getWorldPosition(w)),m.current.lookAt(m.current.parent.target.getWorldPosition(w))}));const S=s.useMemo((()=>{const e=new r.CylinderGeometry(t,n,l,128,64,!0);return e.applyMatrix4((new r.Matrix4).makeTranslation(0,-l/2,0)),e.applyMatrix4((new r.Matrix4).makeRotationX(-Math.PI/2)),e}),[l,t,n]);return s.createElement(s.Fragment,null,s.createElement("mesh",{ref:m,geometry:S,raycast:()=>null},s.createElement("primitive",{object:v,attach:"material","uniforms-opacity-value":e,"uniforms-lightColor-value":u,"uniforms-attenuation-value":p,"uniforms-anglePower-value":d,"uniforms-depth-value":o,"uniforms-cameraNear-value":f.near,"uniforms-cameraFar-value":f.far,"uniforms-resolution-value":o?[h.width*g,h.height*g]:[0,0]})))}function m(e,t,n,o,i){const[[u,l]]=s.useState((()=>[new r.Vector3,new r.Vector3]));s.useLayoutEffect((()=>{if(!(null==(t=e.current)?void 0:t.isSpotLight))throw new Error("SpotlightShadow must be a child of a SpotLight");var t;console.log(e.current),e.current.shadow.mapSize.set(n,o),e.current.shadow.needsUpdate=!0}),[e,n,o]),a.useFrame((()=>{if(!e.current)return;const r=e.current.position,a=e.current.target.position;l.copy(a).sub(r);var n=l.length();l.normalize().multiplyScalar(n*i),u.copy(r).add(l),t.current.position.copy(u),t.current.lookAt(e.current.target.position)}))}function h({distance:e=.4,alphaTest:t=.5,map:o,shader:i="#define GLSLIFY 1\nvarying vec2 vUv;uniform sampler2D uShadowMap;uniform float uTime;void main(){vec3 color=texture2D(uShadowMap,vUv).xyz;gl_FragColor=vec4(color,1.);}",width:u=512,height:l=512,scale:c=1,children:p,...d}){const h=s.useRef(null),f=d.spotlightRef,g=d.debug;m(f,h,u,l,e);const v=s.useMemo((()=>new r.WebGLRenderTarget(u,l,{format:r.RGBAFormat,encoding:r.LinearEncoding,stencilBuffer:!1})),[u,l]),w=s.useRef({uShadowMap:{value:o},uTime:{value:0}});s.useEffect((()=>{w.current.uShadowMap.value=o}),[o]);const S=s.useMemo((()=>new n.FullScreenQuad(new r.ShaderMaterial({uniforms:w.current,vertexShader:"\n varying vec2 vUv;\n\n void main() {\n vUv = uv;\n gl_Position = projectionMatrix * modelViewMatrix * vec4(position, 1.0);\n }\n ",fragmentShader:i}))),[i]);return s.useEffect((()=>()=>{S.material.dispose(),S.dispose()}),[S]),s.useEffect((()=>()=>v.dispose()),[v]),a.useFrame((({gl:e},t)=>{w.current.uTime.value+=t,e.setRenderTarget(v),S.render(e),e.setRenderTarget(null)})),s.createElement(s.Fragment,null,s.createElement("mesh",{ref:h,scale:c,castShadow:!0},s.createElement("planeGeometry",null),s.createElement("meshBasicMaterial",{transparent:!0,side:r.DoubleSide,alphaTest:t,alphaMap:v.texture,"alphaMap-wrapS":r.RepeatWrapping,"alphaMap-wrapT":r.RepeatWrapping,opacity:g?1:0},p)))}function f({distance:e=.4,alphaTest:t=.5,map:a,width:n=512,height:o=512,scale:i,children:u,...l}){const c=s.useRef(null),p=l.spotlightRef,d=l.debug;return m(p,c,n,o,e),s.createElement(s.Fragment,null,s.createElement("mesh",{ref:c,scale:i,castShadow:!0},s.createElement("planeGeometry",null),s.createElement("meshBasicMaterial",{transparent:!0,side:r.DoubleSide,alphaTest:t,alphaMap:a,"alphaMap-wrapS":r.RepeatWrapping,"alphaMap-wrapT":r.RepeatWrapping,opacity:d?1:0},u)))}const g=s.forwardRef((({opacity:e=1,radiusTop:t,radiusBottom:r,depthBuffer:a,color:n="white",distance:o=5,angle:i=.15,attenuation:u=5,anglePower:l=5,volumetric:m=!0,debug:h=!1,children:f,...g},v)=>{const w=s.useRef(null);return s.createElement("group",null,h&&w.current&&s.createElement("spotLightHelper",{args:[w.current]}),s.createElement("spotLight",c.default({ref:p.default([v,w]),angle:i,color:n,distance:o,castShadow:!0},g),m&&s.createElement(d,{debug:h,opacity:e,radiusTop:t,radiusBottom:r,depthBuffer:a,color:n,distance:o,angle:i,attenuation:u,anglePower:l})),f&&s.cloneElement(f,{spotlightRef:w,debug:h}))}));exports.SpotLight=g,exports.SpotLightShadow=function(e){return e.shader?s.createElement(h,e):s.createElement(f,e)};
@@ -1,30 +1,25 @@
1
1
  import * as React from 'react';
2
- import { DepthTexture, SpotLight as SpotLightImpl } from 'three';
3
- declare const SpotLight: React.ForwardRefExoticComponent<Pick<Omit<import("@react-three/fiber").ExtendedColors<import("@react-three/fiber").Overwrite<Partial<SpotLightImpl>, import("@react-three/fiber").NodeProps<SpotLightImpl, typeof SpotLightImpl>>>, import("@react-three/fiber").NonFunctionKeys<{
4
- position?: import("@react-three/fiber").Vector3 | undefined;
5
- up?: import("@react-three/fiber").Vector3 | undefined;
6
- scale?: import("@react-three/fiber").Vector3 | undefined;
7
- rotation?: import("@react-three/fiber").Euler | undefined;
8
- matrix?: import("@react-three/fiber").Matrix4 | undefined;
9
- quaternion?: import("@react-three/fiber").Quaternion | undefined;
10
- layers?: import("@react-three/fiber").Layers | undefined;
11
- dispose?: (() => void) | null | undefined;
12
- }>> & {
13
- position?: import("@react-three/fiber").Vector3 | undefined;
14
- up?: import("@react-three/fiber").Vector3 | undefined;
15
- scale?: import("@react-three/fiber").Vector3 | undefined;
16
- rotation?: import("@react-three/fiber").Euler | undefined;
17
- matrix?: import("@react-three/fiber").Matrix4 | undefined;
18
- quaternion?: import("@react-three/fiber").Quaternion | undefined;
19
- layers?: import("@react-three/fiber").Layers | undefined;
20
- dispose?: (() => void) | null | undefined;
21
- } & import("@react-three/fiber/dist/declarations/src/core/events").EventHandlers & {
22
- depthBuffer?: DepthTexture | undefined;
23
- attenuation?: number | undefined;
24
- anglePower?: number | undefined;
25
- radiusTop?: number | undefined;
26
- radiusBottom?: number | undefined;
27
- opacity?: number | undefined;
28
- color?: string | number | undefined;
29
- }, "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" | "color" | keyof import("@react-three/fiber/dist/declarations/src/core/events").EventHandlers | "intensity" | "isLight" | "shadow" | "shadowCameraFov" | "shadowCameraLeft" | "shadowCameraRight" | "shadowCameraTop" | "shadowCameraBottom" | "shadowCameraNear" | "shadowCameraFar" | "shadowBias" | "shadowMapWidth" | "shadowMapHeight" | "opacity" | "target" | "distance" | "angle" | "decay" | "power" | "penumbra" | "isSpotLight" | "depthBuffer" | "attenuation" | "anglePower" | "radiusTop" | "radiusBottom"> & React.RefAttributes<SpotLightImpl>>;
2
+ import { DepthTexture, SpotLight as SpotLightImpl, Texture } from 'three';
3
+ declare type SpotLightProps = JSX.IntrinsicElements['spotLight'] & {
4
+ depthBuffer?: DepthTexture;
5
+ attenuation?: number;
6
+ anglePower?: number;
7
+ radiusTop?: number;
8
+ radiusBottom?: number;
9
+ opacity?: number;
10
+ color?: string | number;
11
+ volumetric?: boolean;
12
+ debug?: boolean;
13
+ };
14
+ interface ShadowMeshProps {
15
+ distance?: number;
16
+ alphaTest?: number;
17
+ scale?: number;
18
+ map?: Texture;
19
+ shader?: string;
20
+ width?: number;
21
+ height?: number;
22
+ }
23
+ export declare function SpotLightShadow(props: React.PropsWithChildren<ShadowMeshProps>): JSX.Element;
24
+ declare const SpotLight: React.ForwardRefExoticComponent<Pick<SpotLightProps, "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" | "color" | keyof import("@react-three/fiber/dist/declarations/src/core/events").EventHandlers | "intensity" | "isLight" | "shadow" | "shadowCameraFov" | "shadowCameraLeft" | "shadowCameraRight" | "shadowCameraTop" | "shadowCameraBottom" | "shadowCameraNear" | "shadowCameraFar" | "shadowBias" | "shadowMapWidth" | "shadowMapHeight" | "opacity" | "target" | "distance" | "angle" | "decay" | "power" | "penumbra" | "isSpotLight" | "depthBuffer" | "attenuation" | "debug" | "anglePower" | "volumetric" | "radiusTop" | "radiusBottom"> & React.RefAttributes<SpotLightImpl>>;
30
25
  export { SpotLight };
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 vec = new Vector3();
8
- const SpotLight = /*#__PURE__*/React.forwardRef(({
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
- ...props
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
- }, [angle, distance, radiusTop, radiusBottom]);
37
- return /*#__PURE__*/React.createElement("spotLight", _extends({
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/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},u=(e,t=1)=>(e.set(e.subarray(t)),e.fill(-1/0,-t),e);function c(t,n){const{length:o,local:c,decay:l,interval:a,stride:f}={...s,...n},d=i.useRef(),[h]=i.useState((()=>new r.Vector3));i.useLayoutEffect((()=>{t&&(d.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&&d.current){if(0===y.current){let e;c?e=t.position:(t.getWorldPosition(h),e=h);const r=1*l;for(let t=0;t<r;t++)e.distanceTo(p.current)<f||(u(d.current,3),d.current.set(e.toArray(),d.current.length-3));p.current.copy(e)}y.current++,y.current=y.current%a}})),d}const l=i.forwardRef(((t,o)=>{const{children:u}=t,{width:l,length:a,decay:f,local:d,stride:h,interval:p}={...s,...t},{color:y="hotpink",attenuation:g,target:m}=t,v=e.useThree((e=>e.size)),b=i.useRef(null),[w,M]=i.useState(null),j=c(w,{length:a,decay:f,local:d,stride:h,interval:p});i.useEffect((()=>{const e=(null==m?void 0:m.current)||b.current.children.find((e=>e instanceof r.Object3D));e&&M(e)}),[j,m]);const O=i.useMemo((()=>new n.MeshLine),[]),E=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(u)if(Array.isArray(u))o=u.find((e=>{const t=e;return"string"==typeof t.type&&"meshLineMaterial"===t.type}));else{const e=u;"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,u]);return i.useEffect((()=>{E.uniforms.resolution.value.set(v.width,v.height)}),[v]),e.useFrame((()=>{j.current&&O.setPoints(j.current,g)})),i.createElement("group",null,i.createElement("mesh",{ref:o,geometry:O,material:E}),i.createElement("group",{ref:b},u))}));exports.Trail=l,exports.useTrail=c;
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"),q=require("./ComputedAttribute.cjs.js"),d=require("./Clone.cjs.js"),m=require("./MarchingCubes.cjs.js"),C=require("./Decal.cjs.js"),h=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"),f=require("./MapControls.cjs.js"),g=require("./OrbitControls.cjs.js"),T=require("./TrackballControls.cjs.js"),v=require("./ArcballControls.cjs.js"),A=require("./TransformControls.cjs.js"),L=require("./PointerLockControls.cjs.js"),k=require("./FirstPersonControls.cjs.js"),D=require("./GizmoHelper.cjs.js"),E=require("./GizmoViewcube.cjs.js"),R=require("./GizmoViewport.cjs.js"),G=require("./useCubeTexture.cjs.js"),w=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"),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"),Se=require("./Reflector.cjs.js"),Pe=require("./SpotLight.cjs.js"),be=require("./Environment.cjs.js"),Be=require("./Lightformer.cjs.js"),fe=require("./Sky.cjs.js"),ge=require("./Stars.cjs.js"),Te=require("./Cloud.cjs.js"),ve=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"),Ge=require("./Preload.cjs.js"),we=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=q.ComputedAttribute,exports.Clone=d.Clone,exports.MarchingCube=m.MarchingCube,exports.MarchingCubes=m.MarchingCubes,exports.MarchingPlane=m.MarchingPlane,exports.Decal=C.Decal,exports.Svg=h.Svg,exports.OrthographicCamera=M.OrthographicCamera,exports.PerspectiveCamera=S.PerspectiveCamera,exports.CubeCamera=P.CubeCamera,exports.DeviceOrientationControls=b.DeviceOrientationControls,exports.FlyControls=B.FlyControls,exports.MapControls=f.MapControls,exports.OrbitControls=g.OrbitControls,exports.TrackballControls=T.TrackballControls,exports.ArcballControls=v.ArcballControls,exports.TransformControls=A.TransformControls,exports.PointerLockControls=L.PointerLockControls,exports.FirstPersonControls=k.FirstPersonControls,exports.GizmoHelper=D.GizmoHelper,exports.useGizmoContext=D.useGizmoContext,exports.GizmoViewcube=E.GizmoViewcube,exports.GizmoViewport=R.GizmoViewport,exports.useCubeTexture=G.useCubeTexture,exports.useFBX=w.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=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=Se.Reflector,exports.SpotLight=Pe.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=ge.Stars,exports.Cloud=Te.Cloud,exports.Sparkles=ve.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=Ge.Preload,exports.BakeShadows=we.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;
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';
@@ -0,0 +1,3 @@
1
+ var SpotlightShadowShader = "#define GLSLIFY 1\nvarying vec2 vUv;uniform sampler2D uShadowMap;uniform float uTime;void main(){vec3 color=texture2D(uShadowMap,vUv).xyz;gl_FragColor=vec4(color,1.);}"; // eslint-disable-line
2
+
3
+ export { SpotlightShadowShader as default };