@react-three/drei 9.102.0 → 9.102.2
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 +11 -13
- package/core/Caustics.cjs.js +1 -1
- package/core/Edges.cjs.js +1 -1
- package/core/Edges.d.ts +6 -7
- package/core/Edges.js +7 -24
- package/core/Effects.d.ts +2 -1
- package/core/Environment.cjs.js +1 -1
- package/core/Line.cjs.js +1 -1
- package/core/Line.js +1 -1
- package/core/Stage.cjs.js +1 -1
- package/core/useEnvironment.cjs.js +1 -1
- package/core/useEnvironment.d.ts +2 -4
- package/core/useEnvironment.js +1 -2
- package/core/useTexture.cjs.js +1 -1
- package/core/useTexture.js +12 -9
- package/helpers/deprecated.cjs.js +1 -1
- package/helpers/deprecated.d.ts +3 -0
- package/helpers/deprecated.js +7 -1
- package/index.cjs.js +1 -1
- package/package.json +1 -1
- package/react-three-drei-0.0.0-semantic-release.tgz +0 -0
package/README.md
CHANGED
|
@@ -448,7 +448,7 @@ Scroll controls create a HTML scroll container in front of the canvas. Everythin
|
|
|
448
448
|
You can listen and react to scroll with the `useScroll` hook which gives you useful data like the current scroll `offset`, `delta` and functions for range finding: `range`, `curve` and `visible`. The latter functions are especially useful if you want to react to the scroll offset, for instance if you wanted to fade things in and out if they are in or out of view.
|
|
449
449
|
|
|
450
450
|
```jsx
|
|
451
|
-
|
|
451
|
+
<ScrollControls pages={3} damping={0.1}>
|
|
452
452
|
{/* Canvas contents in here will *not* scroll, but receive useScroll! */}
|
|
453
453
|
<SomeModel />
|
|
454
454
|
<Scroll>
|
|
@@ -1596,7 +1596,7 @@ Radial gradient.
|
|
|
1596
1596
|
|
|
1597
1597
|
```jsx
|
|
1598
1598
|
import { GradientTexture, GradientType } from './GradientTexture'
|
|
1599
|
-
|
|
1599
|
+
<mesh>
|
|
1600
1600
|
<planeGeometry />
|
|
1601
1601
|
<meshBasicMaterial>
|
|
1602
1602
|
<GradientTexture
|
|
@@ -1618,13 +1618,14 @@ import { GradientTexture, GradientType } from './GradientTexture'
|
|
|
1618
1618
|
<a href="https://codesandbox.io/s/ny3p4"><img width="20%" src="https://codesandbox.io/api/v1/sandboxes/ny3p4/screenshot.png" alt="Demo"/></a>
|
|
1619
1619
|
</p>
|
|
1620
1620
|
|
|
1621
|
-
Abstracts [THREE.EdgesGeometry](https://threejs.org/docs/#api/en/geometries/EdgesGeometry). It pulls the geometry automatically from its parent, optionally you can ungroup it and give it a `geometry` prop. You can give it children, for instance a custom material.
|
|
1621
|
+
Abstracts [THREE.EdgesGeometry](https://threejs.org/docs/#api/en/geometries/EdgesGeometry). It pulls the geometry automatically from its parent, optionally you can ungroup it and give it a `geometry` prop. You can give it children, for instance a custom material. Edges is based on `<Line>` and supports all of its props.
|
|
1622
1622
|
|
|
1623
1623
|
```jsx
|
|
1624
1624
|
<mesh>
|
|
1625
1625
|
<boxGeometry />
|
|
1626
1626
|
<meshBasicMaterial />
|
|
1627
1627
|
<Edges
|
|
1628
|
+
lineWidth={4}
|
|
1628
1629
|
scale={1.1}
|
|
1629
1630
|
threshold={15} // Display edges only when the angle between two faces exceeds this value (default=15 degrees)
|
|
1630
1631
|
color="white"
|
|
@@ -3725,7 +3726,7 @@ If you still experience flip flops despite the bounds you can define a limit of
|
|
|
3725
3726
|
PerformanceMonitor can also have children, if you wrap your app in it you get to use `usePerformanceMonitor` which allows individual components down the nested tree to respond to performance changes on their own.
|
|
3726
3727
|
|
|
3727
3728
|
```jsx
|
|
3728
|
-
|
|
3729
|
+
<PerformanceMonitor>
|
|
3729
3730
|
<Effects />
|
|
3730
3731
|
</PerformanceMonitor>
|
|
3731
3732
|
|
|
@@ -3755,19 +3756,16 @@ type HudProps = {
|
|
|
3755
3756
|
```
|
|
3756
3757
|
|
|
3757
3758
|
```jsx
|
|
3758
|
-
{
|
|
3759
|
-
|
|
3760
|
-
}
|
|
3761
|
-
;<Hud>
|
|
3759
|
+
{ /* Renders on top of the default scene with a perspective camera */ }
|
|
3760
|
+
<Hud>
|
|
3762
3761
|
<PerspectiveCamera makeDefault position={[0, 0, 10]} />
|
|
3763
3762
|
<mesh>
|
|
3764
3763
|
<ringGeometry />
|
|
3765
3764
|
</mesh>
|
|
3766
3765
|
</Hud>
|
|
3767
|
-
|
|
3768
|
-
|
|
3769
|
-
}
|
|
3770
|
-
;<Hud renderPriority={2}>
|
|
3766
|
+
|
|
3767
|
+
{ /* Renders on top of the previous HUD with an orthographic camera */ }
|
|
3768
|
+
<Hud renderPriority={2}>
|
|
3771
3769
|
<OrthographicCamera makeDefault position={[0, 0, 10]} />
|
|
3772
3770
|
<mesh>
|
|
3773
3771
|
<boxGeometry />
|
|
@@ -4296,7 +4294,7 @@ const config = {
|
|
|
4296
4294
|
controls: undefined, // if using orbit controls, pass a ref here so we can update the rotation
|
|
4297
4295
|
}
|
|
4298
4296
|
|
|
4299
|
-
|
|
4297
|
+
<CameraShake {...config} />
|
|
4300
4298
|
```
|
|
4301
4299
|
|
|
4302
4300
|
```ts
|
package/core/Caustics.cjs.js
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("@babel/runtime/helpers/extends"),r=require("three"),t=require("react"),n=require("@react-three/fiber"),o=require("./useFBO.cjs.js"),i=require("./useHelper.cjs.js"),a=require("./shaderMaterial.cjs.js"),l=require("./Edges.cjs.js"),c=require("three-stdlib"),s=require("../helpers/constants.cjs.js");function u(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}function d(e){if(e&&e.__esModule)return e;var r=Object.create(null);return e&&Object.keys(e).forEach((function(t){if("default"!==t){var n=Object.getOwnPropertyDescriptor(e,t);Object.defineProperty(r,t,n.get?n:{enumerable:!0,get:function(){return e[t]}})}})),r.default=e,Object.freeze(r)}var m=u(e),p=d(r),v=d(t);function f(e=p.FrontSide){const r={value:new p.Matrix4};return Object.assign(new p.MeshNormalMaterial({side:e}),{viewMatrix:r,onBeforeCompile:e=>{e.uniforms.viewMatrix=r,e.fragmentShader="vec3 inverseTransformDirection( in vec3 dir, in mat4 matrix ) {\n return normalize( ( vec4( dir, 0.0 ) * matrix ).xyz );\n }\n"+e.fragmentShader.replace("#include <normal_fragment_maps>","#include <normal_fragment_maps>\n normal = inverseTransformDirection( normal, viewMatrix );\n")}})}const x=a.shaderMaterial({causticsTexture:null,causticsTextureB:null,color:new p.Color,lightProjMatrix:new p.Matrix4,lightViewMatrix:new p.Matrix4},"varying vec3 vWorldPosition;\n void main() {\n gl_Position = projectionMatrix * viewMatrix * modelMatrix * vec4(position, 1.);\n vec4 worldPosition = modelMatrix * vec4(position, 1.);\n vWorldPosition = worldPosition.xyz;\n }",`varying vec3 vWorldPosition;\n uniform vec3 color;\n uniform sampler2D causticsTexture;\n uniform sampler2D causticsTextureB;\n uniform mat4 lightProjMatrix;\n uniform mat4 lightViewMatrix;\n void main() {\n // Apply caustics\n vec4 lightSpacePos = lightProjMatrix * lightViewMatrix * vec4(vWorldPosition, 1.0);\n lightSpacePos.xyz /= lightSpacePos.w;\n lightSpacePos.xyz = lightSpacePos.xyz * 0.5 + 0.5;\n vec3 front = texture2D(causticsTexture, lightSpacePos.xy).rgb;\n vec3 back = texture2D(causticsTextureB, lightSpacePos.xy).rgb;\n gl_FragColor = vec4((front + back) * color, 1.0);\n #include <tonemapping_fragment>\n #include <${s.version>=154?"colorspace_fragment":"encodings_fragment"}>\n }`),h=a.shaderMaterial({cameraMatrixWorld:new p.Matrix4,cameraProjectionMatrixInv:new p.Matrix4,normalTexture:null,depthTexture:null,lightDir:new p.Vector3(0,1,0),lightPlaneNormal:new p.Vector3(0,1,0),lightPlaneConstant:0,near:.1,far:100,modelMatrix:new p.Matrix4,worldRadius:1/40,ior:1.1,bounces:0,resolution:1024,size:10,intensity:.5},"\n varying vec2 vUv;\n void main() {\n vUv = uv;\n gl_Position = projectionMatrix * modelViewMatrix * vec4(position, 1.0);\n }","\n uniform mat4 cameraMatrixWorld;\n uniform mat4 cameraProjectionMatrixInv;\n uniform vec3 lightDir;\n uniform vec3 lightPlaneNormal;\n uniform float lightPlaneConstant;\n uniform float near;\n uniform float far;\n uniform float time;\n uniform float worldRadius;\n uniform float resolution;\n uniform float size;\n uniform float intensity;\n uniform float ior;\n precision highp isampler2D;\n precision highp usampler2D;\n uniform sampler2D normalTexture;\n uniform sampler2D depthTexture;\n uniform float bounces;\n varying vec2 vUv;\n vec3 WorldPosFromDepth(float depth, vec2 coord) {\n float z = depth * 2.0 - 1.0;\n vec4 clipSpacePosition = vec4(coord * 2.0 - 1.0, z, 1.0);\n vec4 viewSpacePosition = cameraProjectionMatrixInv * clipSpacePosition;\n // Perspective division\n viewSpacePosition /= viewSpacePosition.w;\n vec4 worldSpacePosition = cameraMatrixWorld * viewSpacePosition;\n return worldSpacePosition.xyz;\n }\n float sdPlane( vec3 p, vec3 n, float h ) {\n // n must be normalized\n return dot(p,n) + h;\n }\n float planeIntersect( vec3 ro, vec3 rd, vec4 p ) {\n return -(dot(ro,p.xyz)+p.w)/dot(rd,p.xyz);\n }\n vec3 totalInternalReflection(vec3 ro, vec3 rd, vec3 pos, vec3 normal, float ior, out vec3 rayOrigin, out vec3 rayDirection) {\n rayOrigin = ro;\n rayDirection = rd;\n rayDirection = refract(rayDirection, normal, 1.0 / ior);\n rayOrigin = pos + rayDirection * 0.1;\n return rayDirection;\n }\n void main() {\n // Each sample consists of random offset in the x and y direction\n float caustic = 0.0;\n float causticTexelSize = (1.0 / resolution) * size * 2.0;\n float texelsNeeded = worldRadius / causticTexelSize;\n float sampleRadius = texelsNeeded / resolution;\n float sum = 0.0;\n if (texture2D(depthTexture, vUv).x == 1.0) {\n gl_FragColor = vec4(0.0, 0.0, 0.0, 1.0);\n return;\n }\n vec2 offset1 = vec2(-0.5, -0.5);//vec2(rand() - 0.5, rand() - 0.5);\n vec2 offset2 = vec2(-0.5, 0.5);//vec2(rand() - 0.5, rand() - 0.5);\n vec2 offset3 = vec2(0.5, 0.5);//vec2(rand() - 0.5, rand() - 0.5);\n vec2 offset4 = vec2(0.5, -0.5);//vec2(rand() - 0.5, rand() - 0.5);\n vec2 uv1 = vUv + offset1 * sampleRadius;\n vec2 uv2 = vUv + offset2 * sampleRadius;\n vec2 uv3 = vUv + offset3 * sampleRadius;\n vec2 uv4 = vUv + offset4 * sampleRadius;\n vec3 normal1 = texture2D(normalTexture, uv1, -10.0).rgb * 2.0 - 1.0;\n vec3 normal2 = texture2D(normalTexture, uv2, -10.0).rgb * 2.0 - 1.0;\n vec3 normal3 = texture2D(normalTexture, uv3, -10.0).rgb * 2.0 - 1.0;\n vec3 normal4 = texture2D(normalTexture, uv4, -10.0).rgb * 2.0 - 1.0;\n float depth1 = texture2D(depthTexture, uv1, -10.0).x;\n float depth2 = texture2D(depthTexture, uv2, -10.0).x;\n float depth3 = texture2D(depthTexture, uv3, -10.0).x;\n float depth4 = texture2D(depthTexture, uv4, -10.0).x;\n // Sanity check the depths\n if (depth1 == 1.0 || depth2 == 1.0 || depth3 == 1.0 || depth4 == 1.0) {\n gl_FragColor = vec4(0.0, 0.0, 0.0, 1.0);\n return;\n }\n vec3 pos1 = WorldPosFromDepth(depth1, uv1);\n vec3 pos2 = WorldPosFromDepth(depth2, uv2);\n vec3 pos3 = WorldPosFromDepth(depth3, uv3);\n vec3 pos4 = WorldPosFromDepth(depth4, uv4);\n vec3 originPos1 = WorldPosFromDepth(0.0, uv1);\n vec3 originPos2 = WorldPosFromDepth(0.0, uv2);\n vec3 originPos3 = WorldPosFromDepth(0.0, uv3);\n vec3 originPos4 = WorldPosFromDepth(0.0, uv4);\n vec3 endPos1, endPos2, endPos3, endPos4;\n vec3 endDir1, endDir2, endDir3, endDir4;\n totalInternalReflection(originPos1, lightDir, pos1, normal1, ior, endPos1, endDir1);\n totalInternalReflection(originPos2, lightDir, pos2, normal2, ior, endPos2, endDir2);\n totalInternalReflection(originPos3, lightDir, pos3, normal3, ior, endPos3, endDir3);\n totalInternalReflection(originPos4, lightDir, pos4, normal4, ior, endPos4, endDir4);\n float lightPosArea = length(cross(originPos2 - originPos1, originPos3 - originPos1)) + length(cross(originPos3 - originPos1, originPos4 - originPos1));\n float t1 = planeIntersect(endPos1, endDir1, vec4(lightPlaneNormal, lightPlaneConstant));\n float t2 = planeIntersect(endPos2, endDir2, vec4(lightPlaneNormal, lightPlaneConstant));\n float t3 = planeIntersect(endPos3, endDir3, vec4(lightPlaneNormal, lightPlaneConstant));\n float t4 = planeIntersect(endPos4, endDir4, vec4(lightPlaneNormal, lightPlaneConstant));\n vec3 finalPos1 = endPos1 + endDir1 * t1;\n vec3 finalPos2 = endPos2 + endDir2 * t2;\n vec3 finalPos3 = endPos3 + endDir3 * t3;\n vec3 finalPos4 = endPos4 + endDir4 * t4;\n float finalArea = length(cross(finalPos2 - finalPos1, finalPos3 - finalPos1)) + length(cross(finalPos3 - finalPos1, finalPos4 - finalPos1));\n caustic += intensity * (lightPosArea / finalArea);\n // Calculate the area of the triangle in light spaces\n gl_FragColor = vec4(vec3(max(caustic, 0.0)), 1.0);\n }"),g={depth:!0,minFilter:p.LinearFilter,magFilter:p.LinearFilter,type:p.UnsignedByteType},P={minFilter:p.LinearMipmapLinearFilter,magFilter:p.LinearFilter,type:p.FloatType,generateMipmaps:!0},y=v.forwardRef((({debug:e,children:r,frames:t=1,ior:a=1.1,color:s="white",causticsOnly:u=!1,backside:d=!1,backsideIOR:y=1.1,worldRadius:M=.3125,intensity:D=.05,resolution:w=2024,lightSource:T=[5,5,5],...j},S)=>{n.extend({CausticsProjectionMaterial:x});const b=v.useRef(null),F=v.useRef(null),z=v.useRef(null),W=v.useRef(null),R=n.useThree((e=>e.gl)),I=i.useHelper(e&&F,p.CameraHelper),O=o.useFBO(w,w,g),C=o.useFBO(w,w,g),_=o.useFBO(w,w,P),V=o.useFBO(w,w,P),[B]=v.useState((()=>f())),[E]=v.useState((()=>f(p.BackSide))),[A]=v.useState((()=>new h)),[q]=v.useState((()=>new c.FullScreenQuad(A)));v.useLayoutEffect((()=>{b.current.updateWorldMatrix(!1,!0)}));let N=0;const k=new p.Vector3,U=new p.Frustum,L=new p.Matrix4,H=new p.Plane,G=new p.Vector3,Q=new p.Vector3,$=new p.Box3,J=new p.Vector3,K=[],X=[],Y=[],Z=[],ee=new p.Vector3;for(let e=0;e<8;e++)K.push(new p.Vector3),X.push(new p.Vector3),Y.push(new p.Vector3),Z.push(new p.Vector3);return n.useFrame((()=>{if(t===1/0||N++<t){var r,n;Array.isArray(T)?G.fromArray(T).normalize():G.copy(b.current.worldToLocal(T.current.getWorldPosition(k)).normalize()),Q.copy(G).multiplyScalar(-1),null==(r=z.current.parent)||r.matrixWorld.identity(),$.setFromObject(z.current,!0),K[0].set($.min.x,$.min.y,$.min.z),K[1].set($.min.x,$.min.y,$.max.z),K[2].set($.min.x,$.max.y,$.min.z),K[3].set($.min.x,$.max.y,$.max.z),K[4].set($.max.x,$.min.y,$.min.z),K[5].set($.max.x,$.min.y,$.max.z),K[6].set($.max.x,$.max.y,$.min.z),K[7].set($.max.x,$.max.y,$.max.z);for(let e=0;e<8;e++)X[e].copy(K[e]);$.getCenter(J),K.map((e=>e.sub(J)));const t=H.set(Q,0);K.map(((e,r)=>t.projectPoint(e,Y[r])));const o=Y.reduce(((e,r)=>e.add(r)),k.set(0,0,0)).divideScalar(Y.length),i=Y.map((e=>e.distanceTo(o))).reduce(((e,r)=>Math.max(e,r))),l=K.map((e=>e.dot(G))).reduce(((e,r)=>Math.max(e,r)));F.current.position.copy(ee.copy(G).multiplyScalar(l).add(J)),F.current.lookAt(z.current.localToWorld(J));const c=L.lookAt(F.current.position,J,k.set(0,1,0));F.current.left=-i,F.current.right=i,F.current.top=i,F.current.bottom=-i;const s=k.set(0,i,0).applyMatrix4(c),m=(F.current.position.y+s.y)/G.y;F.current.near=.1,F.current.far=m,F.current.updateProjectionMatrix(),F.current.updateMatrixWorld();const p=X.map(((e,r)=>e.add(Z[r].copy(G).multiplyScalar(-e.y/G.y)))),v=p.reduce(((e,r)=>e.add(r)),k.set(0,0,0)).divideScalar(p.length),f=2*p.map((e=>Math.hypot(e.x-v.x,e.z-v.z))).reduce(((e,r)=>Math.max(e,r)));W.current.scale.setScalar(f),W.current.position.copy(v),e&&(null==(n=I.current)||n.update()),E.viewMatrix.value=B.viewMatrix.value=F.current.matrixWorldInverse;const x=U.setFromProjectionMatrix(L.multiplyMatrices(F.current.projectionMatrix,F.current.matrixWorldInverse)).planes[4];A.cameraMatrixWorld=F.current.matrixWorld,A.cameraProjectionMatrixInv=F.current.projectionMatrixInverse,A.lightDir=Q,A.lightPlaneNormal=x.normal,A.lightPlaneConstant=x.constant,A.near=F.current.near,A.far=F.current.far,A.resolution=w,A.size=i,A.intensity=D,A.worldRadius=M,z.current.visible=!0,R.setRenderTarget(O),R.clear(),z.current.overrideMaterial=B,R.render(z.current,F.current),R.setRenderTarget(C),R.clear(),d&&(z.current.overrideMaterial=E,R.render(z.current,F.current)),z.current.overrideMaterial=null,A.ior=a,W.current.material.lightProjMatrix=F.current.projectionMatrix,W.current.material.lightViewMatrix=F.current.matrixWorldInverse,A.normalTexture=O.texture,A.depthTexture=O.depthTexture,R.setRenderTarget(_),R.clear(),q.render(R),A.ior=y,A.normalTexture=C.texture,A.depthTexture=C.depthTexture,R.setRenderTarget(V),R.clear(),d&&q.render(R),R.setRenderTarget(null),u&&(z.current.visible=!1)}})),v.useImperativeHandle(S,(()=>b.current),[]),v.createElement("group",m.default({ref:b},j),v.createElement("scene",{ref:z},v.createElement("orthographicCamera",{ref:F,up:[0,1,0]}),r),v.createElement("mesh",{renderOrder:2,ref:W,"rotation-x":-Math.PI/2},v.createElement("planeGeometry",null),v.createElement("causticsProjectionMaterial",{transparent:!0,color:s,causticsTexture:_.texture,causticsTextureB:V.texture,blending:p.CustomBlending,blendSrc:p.OneFactor,blendDst:p.SrcAlphaFactor,depthWrite:!1}),e&&v.createElement(l.Edges,null,v.createElement("lineBasicMaterial",{color:"#ffff00",toneMapped:!1}))))}));exports.Caustics=y;
|
|
1
|
+
"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("@babel/runtime/helpers/extends"),r=require("three"),t=require("react"),n=require("@react-three/fiber"),o=require("./useFBO.cjs.js"),i=require("./useHelper.cjs.js"),a=require("./shaderMaterial.cjs.js"),l=require("./Edges.cjs.js"),c=require("three-stdlib"),s=require("../helpers/constants.cjs.js");function u(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}function d(e){if(e&&e.__esModule)return e;var r=Object.create(null);return e&&Object.keys(e).forEach((function(t){if("default"!==t){var n=Object.getOwnPropertyDescriptor(e,t);Object.defineProperty(r,t,n.get?n:{enumerable:!0,get:function(){return e[t]}})}})),r.default=e,Object.freeze(r)}require("./Line.cjs.js");var m=u(e),p=d(r),v=d(t);function f(e=p.FrontSide){const r={value:new p.Matrix4};return Object.assign(new p.MeshNormalMaterial({side:e}),{viewMatrix:r,onBeforeCompile:e=>{e.uniforms.viewMatrix=r,e.fragmentShader="vec3 inverseTransformDirection( in vec3 dir, in mat4 matrix ) {\n return normalize( ( vec4( dir, 0.0 ) * matrix ).xyz );\n }\n"+e.fragmentShader.replace("#include <normal_fragment_maps>","#include <normal_fragment_maps>\n normal = inverseTransformDirection( normal, viewMatrix );\n")}})}const x=a.shaderMaterial({causticsTexture:null,causticsTextureB:null,color:new p.Color,lightProjMatrix:new p.Matrix4,lightViewMatrix:new p.Matrix4},"varying vec3 vWorldPosition;\n void main() {\n gl_Position = projectionMatrix * viewMatrix * modelMatrix * vec4(position, 1.);\n vec4 worldPosition = modelMatrix * vec4(position, 1.);\n vWorldPosition = worldPosition.xyz;\n }",`varying vec3 vWorldPosition;\n uniform vec3 color;\n uniform sampler2D causticsTexture;\n uniform sampler2D causticsTextureB;\n uniform mat4 lightProjMatrix;\n uniform mat4 lightViewMatrix;\n void main() {\n // Apply caustics\n vec4 lightSpacePos = lightProjMatrix * lightViewMatrix * vec4(vWorldPosition, 1.0);\n lightSpacePos.xyz /= lightSpacePos.w;\n lightSpacePos.xyz = lightSpacePos.xyz * 0.5 + 0.5;\n vec3 front = texture2D(causticsTexture, lightSpacePos.xy).rgb;\n vec3 back = texture2D(causticsTextureB, lightSpacePos.xy).rgb;\n gl_FragColor = vec4((front + back) * color, 1.0);\n #include <tonemapping_fragment>\n #include <${s.version>=154?"colorspace_fragment":"encodings_fragment"}>\n }`),h=a.shaderMaterial({cameraMatrixWorld:new p.Matrix4,cameraProjectionMatrixInv:new p.Matrix4,normalTexture:null,depthTexture:null,lightDir:new p.Vector3(0,1,0),lightPlaneNormal:new p.Vector3(0,1,0),lightPlaneConstant:0,near:.1,far:100,modelMatrix:new p.Matrix4,worldRadius:1/40,ior:1.1,bounces:0,resolution:1024,size:10,intensity:.5},"\n varying vec2 vUv;\n void main() {\n vUv = uv;\n gl_Position = projectionMatrix * modelViewMatrix * vec4(position, 1.0);\n }","\n uniform mat4 cameraMatrixWorld;\n uniform mat4 cameraProjectionMatrixInv;\n uniform vec3 lightDir;\n uniform vec3 lightPlaneNormal;\n uniform float lightPlaneConstant;\n uniform float near;\n uniform float far;\n uniform float time;\n uniform float worldRadius;\n uniform float resolution;\n uniform float size;\n uniform float intensity;\n uniform float ior;\n precision highp isampler2D;\n precision highp usampler2D;\n uniform sampler2D normalTexture;\n uniform sampler2D depthTexture;\n uniform float bounces;\n varying vec2 vUv;\n vec3 WorldPosFromDepth(float depth, vec2 coord) {\n float z = depth * 2.0 - 1.0;\n vec4 clipSpacePosition = vec4(coord * 2.0 - 1.0, z, 1.0);\n vec4 viewSpacePosition = cameraProjectionMatrixInv * clipSpacePosition;\n // Perspective division\n viewSpacePosition /= viewSpacePosition.w;\n vec4 worldSpacePosition = cameraMatrixWorld * viewSpacePosition;\n return worldSpacePosition.xyz;\n }\n float sdPlane( vec3 p, vec3 n, float h ) {\n // n must be normalized\n return dot(p,n) + h;\n }\n float planeIntersect( vec3 ro, vec3 rd, vec4 p ) {\n return -(dot(ro,p.xyz)+p.w)/dot(rd,p.xyz);\n }\n vec3 totalInternalReflection(vec3 ro, vec3 rd, vec3 pos, vec3 normal, float ior, out vec3 rayOrigin, out vec3 rayDirection) {\n rayOrigin = ro;\n rayDirection = rd;\n rayDirection = refract(rayDirection, normal, 1.0 / ior);\n rayOrigin = pos + rayDirection * 0.1;\n return rayDirection;\n }\n void main() {\n // Each sample consists of random offset in the x and y direction\n float caustic = 0.0;\n float causticTexelSize = (1.0 / resolution) * size * 2.0;\n float texelsNeeded = worldRadius / causticTexelSize;\n float sampleRadius = texelsNeeded / resolution;\n float sum = 0.0;\n if (texture2D(depthTexture, vUv).x == 1.0) {\n gl_FragColor = vec4(0.0, 0.0, 0.0, 1.0);\n return;\n }\n vec2 offset1 = vec2(-0.5, -0.5);//vec2(rand() - 0.5, rand() - 0.5);\n vec2 offset2 = vec2(-0.5, 0.5);//vec2(rand() - 0.5, rand() - 0.5);\n vec2 offset3 = vec2(0.5, 0.5);//vec2(rand() - 0.5, rand() - 0.5);\n vec2 offset4 = vec2(0.5, -0.5);//vec2(rand() - 0.5, rand() - 0.5);\n vec2 uv1 = vUv + offset1 * sampleRadius;\n vec2 uv2 = vUv + offset2 * sampleRadius;\n vec2 uv3 = vUv + offset3 * sampleRadius;\n vec2 uv4 = vUv + offset4 * sampleRadius;\n vec3 normal1 = texture2D(normalTexture, uv1, -10.0).rgb * 2.0 - 1.0;\n vec3 normal2 = texture2D(normalTexture, uv2, -10.0).rgb * 2.0 - 1.0;\n vec3 normal3 = texture2D(normalTexture, uv3, -10.0).rgb * 2.0 - 1.0;\n vec3 normal4 = texture2D(normalTexture, uv4, -10.0).rgb * 2.0 - 1.0;\n float depth1 = texture2D(depthTexture, uv1, -10.0).x;\n float depth2 = texture2D(depthTexture, uv2, -10.0).x;\n float depth3 = texture2D(depthTexture, uv3, -10.0).x;\n float depth4 = texture2D(depthTexture, uv4, -10.0).x;\n // Sanity check the depths\n if (depth1 == 1.0 || depth2 == 1.0 || depth3 == 1.0 || depth4 == 1.0) {\n gl_FragColor = vec4(0.0, 0.0, 0.0, 1.0);\n return;\n }\n vec3 pos1 = WorldPosFromDepth(depth1, uv1);\n vec3 pos2 = WorldPosFromDepth(depth2, uv2);\n vec3 pos3 = WorldPosFromDepth(depth3, uv3);\n vec3 pos4 = WorldPosFromDepth(depth4, uv4);\n vec3 originPos1 = WorldPosFromDepth(0.0, uv1);\n vec3 originPos2 = WorldPosFromDepth(0.0, uv2);\n vec3 originPos3 = WorldPosFromDepth(0.0, uv3);\n vec3 originPos4 = WorldPosFromDepth(0.0, uv4);\n vec3 endPos1, endPos2, endPos3, endPos4;\n vec3 endDir1, endDir2, endDir3, endDir4;\n totalInternalReflection(originPos1, lightDir, pos1, normal1, ior, endPos1, endDir1);\n totalInternalReflection(originPos2, lightDir, pos2, normal2, ior, endPos2, endDir2);\n totalInternalReflection(originPos3, lightDir, pos3, normal3, ior, endPos3, endDir3);\n totalInternalReflection(originPos4, lightDir, pos4, normal4, ior, endPos4, endDir4);\n float lightPosArea = length(cross(originPos2 - originPos1, originPos3 - originPos1)) + length(cross(originPos3 - originPos1, originPos4 - originPos1));\n float t1 = planeIntersect(endPos1, endDir1, vec4(lightPlaneNormal, lightPlaneConstant));\n float t2 = planeIntersect(endPos2, endDir2, vec4(lightPlaneNormal, lightPlaneConstant));\n float t3 = planeIntersect(endPos3, endDir3, vec4(lightPlaneNormal, lightPlaneConstant));\n float t4 = planeIntersect(endPos4, endDir4, vec4(lightPlaneNormal, lightPlaneConstant));\n vec3 finalPos1 = endPos1 + endDir1 * t1;\n vec3 finalPos2 = endPos2 + endDir2 * t2;\n vec3 finalPos3 = endPos3 + endDir3 * t3;\n vec3 finalPos4 = endPos4 + endDir4 * t4;\n float finalArea = length(cross(finalPos2 - finalPos1, finalPos3 - finalPos1)) + length(cross(finalPos3 - finalPos1, finalPos4 - finalPos1));\n caustic += intensity * (lightPosArea / finalArea);\n // Calculate the area of the triangle in light spaces\n gl_FragColor = vec4(vec3(max(caustic, 0.0)), 1.0);\n }"),g={depth:!0,minFilter:p.LinearFilter,magFilter:p.LinearFilter,type:p.UnsignedByteType},P={minFilter:p.LinearMipmapLinearFilter,magFilter:p.LinearFilter,type:p.FloatType,generateMipmaps:!0},y=v.forwardRef((({debug:e,children:r,frames:t=1,ior:a=1.1,color:s="white",causticsOnly:u=!1,backside:d=!1,backsideIOR:y=1.1,worldRadius:M=.3125,intensity:D=.05,resolution:w=2024,lightSource:T=[5,5,5],...j},S)=>{n.extend({CausticsProjectionMaterial:x});const b=v.useRef(null),F=v.useRef(null),z=v.useRef(null),W=v.useRef(null),R=n.useThree((e=>e.gl)),I=i.useHelper(e&&F,p.CameraHelper),O=o.useFBO(w,w,g),C=o.useFBO(w,w,g),_=o.useFBO(w,w,P),V=o.useFBO(w,w,P),[B]=v.useState((()=>f())),[E]=v.useState((()=>f(p.BackSide))),[q]=v.useState((()=>new h)),[A]=v.useState((()=>new c.FullScreenQuad(q)));v.useLayoutEffect((()=>{b.current.updateWorldMatrix(!1,!0)}));let N=0;const k=new p.Vector3,U=new p.Frustum,L=new p.Matrix4,H=new p.Plane,G=new p.Vector3,Q=new p.Vector3,$=new p.Box3,J=new p.Vector3,K=[],X=[],Y=[],Z=[],ee=new p.Vector3;for(let e=0;e<8;e++)K.push(new p.Vector3),X.push(new p.Vector3),Y.push(new p.Vector3),Z.push(new p.Vector3);return n.useFrame((()=>{if(t===1/0||N++<t){var r,n;Array.isArray(T)?G.fromArray(T).normalize():G.copy(b.current.worldToLocal(T.current.getWorldPosition(k)).normalize()),Q.copy(G).multiplyScalar(-1),null==(r=z.current.parent)||r.matrixWorld.identity(),$.setFromObject(z.current,!0),K[0].set($.min.x,$.min.y,$.min.z),K[1].set($.min.x,$.min.y,$.max.z),K[2].set($.min.x,$.max.y,$.min.z),K[3].set($.min.x,$.max.y,$.max.z),K[4].set($.max.x,$.min.y,$.min.z),K[5].set($.max.x,$.min.y,$.max.z),K[6].set($.max.x,$.max.y,$.min.z),K[7].set($.max.x,$.max.y,$.max.z);for(let e=0;e<8;e++)X[e].copy(K[e]);$.getCenter(J),K.map((e=>e.sub(J)));const t=H.set(Q,0);K.map(((e,r)=>t.projectPoint(e,Y[r])));const o=Y.reduce(((e,r)=>e.add(r)),k.set(0,0,0)).divideScalar(Y.length),i=Y.map((e=>e.distanceTo(o))).reduce(((e,r)=>Math.max(e,r))),l=K.map((e=>e.dot(G))).reduce(((e,r)=>Math.max(e,r)));F.current.position.copy(ee.copy(G).multiplyScalar(l).add(J)),F.current.lookAt(z.current.localToWorld(J));const c=L.lookAt(F.current.position,J,k.set(0,1,0));F.current.left=-i,F.current.right=i,F.current.top=i,F.current.bottom=-i;const s=k.set(0,i,0).applyMatrix4(c),m=(F.current.position.y+s.y)/G.y;F.current.near=.1,F.current.far=m,F.current.updateProjectionMatrix(),F.current.updateMatrixWorld();const p=X.map(((e,r)=>e.add(Z[r].copy(G).multiplyScalar(-e.y/G.y)))),v=p.reduce(((e,r)=>e.add(r)),k.set(0,0,0)).divideScalar(p.length),f=2*p.map((e=>Math.hypot(e.x-v.x,e.z-v.z))).reduce(((e,r)=>Math.max(e,r)));W.current.scale.setScalar(f),W.current.position.copy(v),e&&(null==(n=I.current)||n.update()),E.viewMatrix.value=B.viewMatrix.value=F.current.matrixWorldInverse;const x=U.setFromProjectionMatrix(L.multiplyMatrices(F.current.projectionMatrix,F.current.matrixWorldInverse)).planes[4];q.cameraMatrixWorld=F.current.matrixWorld,q.cameraProjectionMatrixInv=F.current.projectionMatrixInverse,q.lightDir=Q,q.lightPlaneNormal=x.normal,q.lightPlaneConstant=x.constant,q.near=F.current.near,q.far=F.current.far,q.resolution=w,q.size=i,q.intensity=D,q.worldRadius=M,z.current.visible=!0,R.setRenderTarget(O),R.clear(),z.current.overrideMaterial=B,R.render(z.current,F.current),R.setRenderTarget(C),R.clear(),d&&(z.current.overrideMaterial=E,R.render(z.current,F.current)),z.current.overrideMaterial=null,q.ior=a,W.current.material.lightProjMatrix=F.current.projectionMatrix,W.current.material.lightViewMatrix=F.current.matrixWorldInverse,q.normalTexture=O.texture,q.depthTexture=O.depthTexture,R.setRenderTarget(_),R.clear(),A.render(R),q.ior=y,q.normalTexture=C.texture,q.depthTexture=C.depthTexture,R.setRenderTarget(V),R.clear(),d&&A.render(R),R.setRenderTarget(null),u&&(z.current.visible=!1)}})),v.useImperativeHandle(S,(()=>b.current),[]),v.createElement("group",m.default({ref:b},j),v.createElement("scene",{ref:z},v.createElement("orthographicCamera",{ref:F,up:[0,1,0]}),r),v.createElement("mesh",{renderOrder:2,ref:W,"rotation-x":-Math.PI/2},v.createElement("planeGeometry",null),v.createElement("causticsProjectionMaterial",{transparent:!0,color:s,causticsTexture:_.texture,causticsTextureB:V.texture,blending:p.CustomBlending,blendSrc:p.OneFactor,blendDst:p.SrcAlphaFactor,depthWrite:!1}),e&&v.createElement(l.Edges,null,v.createElement("lineBasicMaterial",{color:"#ffff00",toneMapped:!1}))))}));exports.Caustics=y;
|
package/core/Edges.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("three"),n=require("
|
|
1
|
+
"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("@babel/runtime/helpers/extends"),t=require("react"),r=require("three"),n=require("./Line.cjs.js");function u(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)}require("@react-three/fiber"),require("three-stdlib");var c=u(e),i=s(t),o=s(r);const a=i.forwardRef((({threshold:e=15,...t},r)=>{const u=i.useRef(null);i.useImperativeHandle(r,(()=>u.current),[]);const s=i.useMemo((()=>[0,0,0,1,0,0]),[]),a=i.useRef(),f=i.useRef();return i.useLayoutEffect((()=>{const t=u.current.parent;if(t){const r=t.geometry;if(r!==a.current||e!==f.current){a.current=r,f.current=e;const t=new o.EdgesGeometry(r,e).attributes.position.array;u.current.geometry.setPositions(t),u.current.geometry.attributes.instanceStart.needsUpdate=!0,u.current.geometry.attributes.instanceEnd.needsUpdate=!0,u.current.computeLineDistances()}}})),i.createElement(n.Line,c.default({segments:!0,points:s,ref:u,raycast:()=>null},t))}));exports.Edges=a;
|
package/core/Edges.d.ts
CHANGED
|
@@ -1,13 +1,12 @@
|
|
|
1
1
|
import * as THREE from 'three';
|
|
2
|
-
import {
|
|
2
|
+
import { ReactThreeFiber, type ThreeElements } from '@react-three/fiber';
|
|
3
|
+
import { LineSegmentsGeometry, LineMaterial, LineMaterialParameters, Line2 } from 'three-stdlib';
|
|
3
4
|
import { ForwardRefComponent } from '../helpers/ts-utils';
|
|
4
|
-
import { type Color, type ThreeElements } from '@react-three/fiber';
|
|
5
5
|
export type EdgesRef = THREE.Mesh<LineSegmentsGeometry, LineMaterial>;
|
|
6
|
-
export
|
|
7
|
-
color?: Color;
|
|
8
|
-
opacity?: number;
|
|
6
|
+
export type EdgesProps = Partial<ThreeElements['mesh']> & {
|
|
9
7
|
threshold?: number;
|
|
10
|
-
linewidth?: number;
|
|
11
8
|
lineWidth?: number;
|
|
12
|
-
}
|
|
9
|
+
} & Omit<LineMaterialParameters, 'vertexColors' | 'color'> & Omit<ReactThreeFiber.Object3DNode<Line2, typeof Line2>, 'args'> & Omit<ReactThreeFiber.Object3DNode<LineMaterial, [LineMaterialParameters]>, 'color' | 'vertexColors' | 'args'> & {
|
|
10
|
+
color?: THREE.ColorRepresentation;
|
|
11
|
+
};
|
|
13
12
|
export declare const Edges: ForwardRefComponent<EdgesProps, EdgesRef>;
|
package/core/Edges.js
CHANGED
|
@@ -1,24 +1,15 @@
|
|
|
1
1
|
import _extends from '@babel/runtime/helpers/esm/extends';
|
|
2
2
|
import * as React from 'react';
|
|
3
3
|
import * as THREE from 'three';
|
|
4
|
-
import {
|
|
5
|
-
import { useThree } from '@react-three/fiber';
|
|
4
|
+
import { Line } from './Line.js';
|
|
6
5
|
|
|
7
6
|
const Edges = /* @__PURE__ */React.forwardRef(({
|
|
8
|
-
children,
|
|
9
7
|
threshold = 15,
|
|
10
|
-
color = 'black',
|
|
11
|
-
opacity = 1,
|
|
12
|
-
linewidth,
|
|
13
|
-
lineWidth,
|
|
14
8
|
...props
|
|
15
9
|
}, fref) => {
|
|
16
|
-
var _ref;
|
|
17
10
|
const ref = React.useRef(null);
|
|
18
11
|
React.useImperativeHandle(fref, () => ref.current, []);
|
|
19
|
-
const
|
|
20
|
-
const material = React.useMemo(() => new LineMaterial(), []);
|
|
21
|
-
const size = useThree(s => s.size);
|
|
12
|
+
const tmpPoints = React.useMemo(() => [0, 0, 0, 1, 0, 0], []);
|
|
22
13
|
const memoizedGeometry = React.useRef();
|
|
23
14
|
const memoizedThreshold = React.useRef();
|
|
24
15
|
React.useLayoutEffect(() => {
|
|
@@ -32,24 +23,16 @@ const Edges = /* @__PURE__ */React.forwardRef(({
|
|
|
32
23
|
ref.current.geometry.setPositions(points);
|
|
33
24
|
ref.current.geometry.attributes.instanceStart.needsUpdate = true;
|
|
34
25
|
ref.current.geometry.attributes.instanceEnd.needsUpdate = true;
|
|
26
|
+
ref.current.computeLineDistances();
|
|
35
27
|
}
|
|
36
28
|
}
|
|
37
29
|
});
|
|
38
|
-
return /*#__PURE__*/React.createElement(
|
|
30
|
+
return /*#__PURE__*/React.createElement(Line, _extends({
|
|
31
|
+
segments: true,
|
|
32
|
+
points: tmpPoints,
|
|
39
33
|
ref: ref,
|
|
40
34
|
raycast: () => null
|
|
41
|
-
}, props)
|
|
42
|
-
object: geometry,
|
|
43
|
-
attach: "geometry"
|
|
44
|
-
}), /*#__PURE__*/React.createElement("primitive", {
|
|
45
|
-
object: material,
|
|
46
|
-
attach: "material",
|
|
47
|
-
color: color,
|
|
48
|
-
opacity: opacity,
|
|
49
|
-
transparent: opacity < 1,
|
|
50
|
-
resolution: [size.width, size.height],
|
|
51
|
-
linewidth: (_ref = linewidth !== null && linewidth !== void 0 ? linewidth : lineWidth) !== null && _ref !== void 0 ? _ref : 1
|
|
52
|
-
}), children);
|
|
35
|
+
}, props));
|
|
53
36
|
});
|
|
54
37
|
|
|
55
38
|
export { Edges };
|
package/core/Effects.d.ts
CHANGED
|
@@ -1,7 +1,8 @@
|
|
|
1
|
-
import { TextureDataType
|
|
1
|
+
import { TextureDataType } from 'three';
|
|
2
2
|
import { ReactThreeFiber } from '@react-three/fiber';
|
|
3
3
|
import { EffectComposer, RenderPass, ShaderPass } from 'three-stdlib';
|
|
4
4
|
import { ForwardRefComponent } from '../helpers/ts-utils';
|
|
5
|
+
import { TextureEncoding } from '../helpers/deprecated';
|
|
5
6
|
type Props = ReactThreeFiber.Node<EffectComposer, typeof EffectComposer> & {
|
|
6
7
|
multisamping?: number;
|
|
7
8
|
encoding?: TextureEncoding;
|
package/core/Environment.cjs.js
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("@babel/runtime/helpers/extends"),r=require("react"),n=require("@react-three/fiber"),t=require("three"),u=require("three-stdlib"),o=require("./useEnvironment.cjs.js");function c(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}function s(e){if(e&&e.__esModule)return e;var r=Object.create(null);return e&&Object.keys(e).forEach((function(n){if("default"!==n){var t=Object.getOwnPropertyDescriptor(e,n);Object.defineProperty(r,n,t.get?t:{enumerable:!0,get:function(){return e[n]}})}})),r.default=e,Object.freeze(r)}require("../helpers/environment-assets.cjs.js");var a=c(e),l=s(r);const i=e=>{return(r=e).current&&r.current.isScene?e.current:e;var r};function d(e,r,n,t,u=0){const o=i(r||n),c=o.background,s=o.environment,a=o.backgroundBlurriness||0;return"only"!==e&&(o.environment=t),e&&(o.background=t),e&&void 0!==o.backgroundBlurriness&&(o.backgroundBlurriness=u),()=>{"only"!==e&&(o.environment=s),e&&(o.background=c),e&&void 0!==o.backgroundBlurriness&&(o.backgroundBlurriness=a)}}function m({scene:e,background:r=!1,blur:t,map:u}){const o=n.useThree((e=>e.scene));return l.useLayoutEffect((()=>{if(u)return d(r,e,o,u,t)}),[o,e,u,r,t]),null}function f({background:e=!1,scene:r,blur:t,...u}){const c=o.useEnvironment(u),s=n.useThree((e=>e.scene));return l.useLayoutEffect((()=>d(e,r,s,c,t)),[c,e,r,s,t]),null}function b({children:e,near:r=1,far:u=1e3,resolution:o=256,frames:c=1,map:s,background:a=!1,blur:i,scene:b,files:
|
|
1
|
+
"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("@babel/runtime/helpers/extends"),r=require("react"),n=require("@react-three/fiber"),t=require("three"),u=require("three-stdlib"),o=require("./useEnvironment.cjs.js");function c(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}function s(e){if(e&&e.__esModule)return e;var r=Object.create(null);return e&&Object.keys(e).forEach((function(n){if("default"!==n){var t=Object.getOwnPropertyDescriptor(e,n);Object.defineProperty(r,n,t.get?t:{enumerable:!0,get:function(){return e[n]}})}})),r.default=e,Object.freeze(r)}require("../helpers/environment-assets.cjs.js"),require("../helpers/deprecated.cjs.js");var a=c(e),l=s(r);const i=e=>{return(r=e).current&&r.current.isScene?e.current:e;var r};function d(e,r,n,t,u=0){const o=i(r||n),c=o.background,s=o.environment,a=o.backgroundBlurriness||0;return"only"!==e&&(o.environment=t),e&&(o.background=t),e&&void 0!==o.backgroundBlurriness&&(o.backgroundBlurriness=u),()=>{"only"!==e&&(o.environment=s),e&&(o.background=c),e&&void 0!==o.backgroundBlurriness&&(o.backgroundBlurriness=a)}}function m({scene:e,background:r=!1,blur:t,map:u}){const o=n.useThree((e=>e.scene));return l.useLayoutEffect((()=>{if(u)return d(r,e,o,u,t)}),[o,e,u,r,t]),null}function f({background:e=!1,scene:r,blur:t,...u}){const c=o.useEnvironment(u),s=n.useThree((e=>e.scene));return l.useLayoutEffect((()=>d(e,r,s,c,t)),[c,e,r,s,t]),null}function b({children:e,near:r=1,far:u=1e3,resolution:o=256,frames:c=1,map:s,background:a=!1,blur:i,scene:b,files:p,path:g,preset:v,extensions:E}){const h=n.useThree((e=>e.gl)),j=n.useThree((e=>e.scene)),k=l.useRef(null),[x]=l.useState((()=>new t.Scene)),y=l.useMemo((()=>{const e=new t.WebGLCubeRenderTarget(o);return e.texture.type=t.HalfFloatType,e}),[o]);l.useLayoutEffect((()=>(1===c&&k.current.update(h,x),d(a,b,j,y.texture,i))),[e,x,y.texture,b,j,a,c,h]);let q=1;return n.useFrame((()=>{(c===1/0||q<c)&&(k.current.update(h,x),q++)})),l.createElement(l.Fragment,null,n.createPortal(l.createElement(l.Fragment,null,e,l.createElement("cubeCamera",{ref:k,args:[r,u,y]}),p||v?l.createElement(f,{background:!0,files:p,preset:v,path:g,extensions:E}):s?l.createElement(m,{background:!0,map:s,extensions:E}):null),x))}function p(e){var r,t,c,s;const i=o.useEnvironment(e),d=e.map||i;l.useMemo((()=>n.extend({GroundProjectedEnvImpl:u.GroundProjectedEnv})),[]);const f=l.useMemo((()=>[d]),[d]),b=null==(r=e.ground)?void 0:r.height,p=null==(t=e.ground)?void 0:t.radius,g=null!==(c=null==(s=e.ground)?void 0:s.scale)&&void 0!==c?c:1e3;return l.createElement(l.Fragment,null,l.createElement(m,a.default({},e,{map:d})),l.createElement("groundProjectedEnvImpl",{args:f,scale:g,height:b,radius:p}))}exports.Environment=function(e){return e.ground?l.createElement(p,e):e.map?l.createElement(m,e):e.children?l.createElement(b,e):l.createElement(f,e)},exports.EnvironmentCube=f,exports.EnvironmentMap=m,exports.EnvironmentPortal=b;
|
package/core/Line.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("three"),n=require("@react-three/fiber"),i=require("three-stdlib");function o(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 a=o(e),c=s(t);const u=c.forwardRef((function({points:e,color:t=16777215,vertexColors:o,linewidth:s,lineWidth:u,segments:l,dashed:f,...d},m){var h;const p=n.useThree((e=>e.size)),b=c.useMemo((()=>l?new i.LineSegments2:new i.Line2),[l]),[y]=c.useState((()=>new i.LineMaterial)),v=4===(null==o||null==(h=o[0])?void 0:h.length)?4:3,g=c.useMemo((()=>{const n=l?new i.LineSegmentsGeometry:new i.LineGeometry,s=e.map((e=>{const t=Array.isArray(e);return e instanceof r.Vector3||e instanceof r.Vector4?[e.x,e.y,e.z]:e instanceof r.Vector2?[e.x,e.y,0]:t&&3===e.length?[e[0],e[1],e[2]]:t&&2===e.length?[e[0],e[1],0]:e}));if(n.setPositions(s.flat()),o){t=16777215;const e=o.map((e=>e instanceof r.Color?e.toArray():e));n.setColors(e.flat(),v)}return n}),[e,l,o,v]);return c.useLayoutEffect((()=>{b.computeLineDistances()}),[e,b]),c.useLayoutEffect((()=>{f?y.defines.USE_DASH="":delete y.defines.USE_DASH,y.needsUpdate=!0}),[f,y]),c.useEffect((()=>()=>g.dispose()),[g]),c.createElement("primitive",a.default({object:b,ref:m},d),c.createElement("primitive",{object:g,attach:"geometry"}),c.createElement("primitive",a.default({object:y,attach:"material",color:t,vertexColors:Boolean(o),resolution:[p.width,p.height],linewidth:null!=s?s:u,dashed:f,transparent:4===v},d)))}));exports.Line=u;
|
|
1
|
+
"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("@babel/runtime/helpers/extends"),t=require("react"),r=require("three"),n=require("@react-three/fiber"),i=require("three-stdlib");function o(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 a=o(e),c=s(t);const u=c.forwardRef((function({points:e,color:t=16777215,vertexColors:o,linewidth:s=1,lineWidth:u,segments:l,dashed:f,...d},m){var h;const p=n.useThree((e=>e.size)),b=c.useMemo((()=>l?new i.LineSegments2:new i.Line2),[l]),[y]=c.useState((()=>new i.LineMaterial)),v=4===(null==o||null==(h=o[0])?void 0:h.length)?4:3,g=c.useMemo((()=>{const n=l?new i.LineSegmentsGeometry:new i.LineGeometry,s=e.map((e=>{const t=Array.isArray(e);return e instanceof r.Vector3||e instanceof r.Vector4?[e.x,e.y,e.z]:e instanceof r.Vector2?[e.x,e.y,0]:t&&3===e.length?[e[0],e[1],e[2]]:t&&2===e.length?[e[0],e[1],0]:e}));if(n.setPositions(s.flat()),o){t=16777215;const e=o.map((e=>e instanceof r.Color?e.toArray():e));n.setColors(e.flat(),v)}return n}),[e,l,o,v]);return c.useLayoutEffect((()=>{b.computeLineDistances()}),[e,b]),c.useLayoutEffect((()=>{f?y.defines.USE_DASH="":delete y.defines.USE_DASH,y.needsUpdate=!0}),[f,y]),c.useEffect((()=>()=>g.dispose()),[g]),c.createElement("primitive",a.default({object:b,ref:m},d),c.createElement("primitive",{object:g,attach:"geometry"}),c.createElement("primitive",a.default({object:y,attach:"material",color:t,vertexColors:Boolean(o),resolution:[p.width,p.height],linewidth:null!=s?s:u,dashed:f,transparent:4===v},d)))}));exports.Line=u;
|
package/core/Line.js
CHANGED
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"),
|
|
1
|
+
"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("@babel/runtime/helpers/extends"),t=require("react"),i=require("./Environment.cjs.js"),n=require("./ContactShadows.cjs.js"),r=require("./Center.cjs.js"),a=require("./AccumulativeShadows.cjs.js"),s=require("./Bounds.cjs.js");function l(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}function u(e){if(e&&e.__esModule)return e;var t=Object.create(null);return e&&Object.keys(e).forEach((function(i){if("default"!==i){var n=Object.getOwnPropertyDescriptor(e,i);Object.defineProperty(t,i,n.get?n:{enumerable:!0,get:function(){return e[i]}})}})),t.default=e,Object.freeze(t)}require("@react-three/fiber"),require("three"),require("three-stdlib"),require("./useEnvironment.cjs.js"),require("../helpers/environment-assets.cjs.js"),require("../helpers/deprecated.cjs.js"),require("./shaderMaterial.cjs.js"),require("../materials/DiscardMaterial.cjs.js"),require("../helpers/constants.cjs.js");var o=l(e),c=u(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 i=s.useBounds();return c.useEffect((()=>{t&&i.refresh().clip().fit()}),[e,t]),null}exports.Stage=function({children:e,center:t,adjustCamera:l=!0,intensity:u=.5,shadows:f="contact",environment:p="city",preset:h="rembrandt",...j}){var v,b,g,y,E,q,w,C;const S="string"==typeof h?d[h]:h,[{radius:O,height:z},B]=c.useState({radius:0,width:0,height:0,depth:0}),M=null!==(v=null==f?void 0:f.bias)&&void 0!==v?v:-1e-4,L=null!==(b=null==f?void 0:f.normalBias)&&void 0!==b?b:0,_=null!==(g=null==f?void 0:f.size)&&void 0!==g?g:1024,x=null!==(y=null==f?void 0:f.offset)&&void 0!==y?y:0,P="contact"===f||"contact"===(null==f?void 0:f.type),k="accumulative"===f||"accumulative"===(null==f?void 0:f.type),A={..."object"==typeof f?f:{}},D=p?"string"==typeof p?{preset:p}:p:null,F=c.useCallback((e=>{const{width:i,height:n,depth:r,boundingSphere:a}=e;B({radius:a.radius,width:i,height:n,depth:r}),null!=t&&t.onCentered&&t.onCentered(e)}),[]);return c.createElement(c.Fragment,null,c.createElement("ambientLight",{intensity:u/3}),c.createElement("spotLight",{penumbra:1,position:[S.main[0]*O,S.main[1]*O,S.main[2]*O],intensity:2*u,castShadow:!!f,"shadow-bias":M,"shadow-normalBias":L,"shadow-mapSize":_}),c.createElement("pointLight",{position:[S.fill[0]*O,S.fill[1]*O,S.fill[2]*O],intensity:u}),c.createElement(s.Bounds,o.default({fit:!!l,clip:!!l,margin:Number(l),observe:!0},j),c.createElement(m,{radius:O,adjustCamera:l}),c.createElement(r.Center,o.default({},t,{position:[0,x/2,0],onCentered:F}),e)),c.createElement("group",{position:[0,-z/2-x/2,0]},P&&c.createElement(n.ContactShadows,o.default({scale:4*O,far:O,blur:2},A)),k&&c.createElement(a.AccumulativeShadows,o.default({temporal:!0,frames:100,alphaTest:.9,toneMapped:!0,scale:4*O},A),c.createElement(a.RandomizedLight,{amount:null!==(E=A.amount)&&void 0!==E?E:8,radius:null!==(q=A.radius)&&void 0!==q?q:O,ambient:null!==(w=A.ambient)&&void 0!==w?w:.5,intensity:null!==(C=A.intensity)&&void 0!==C?C:1,position:[S.main[0]*O,S.main[1]*O,S.main[2]*O],size:4*O,bias:-M,mapSize:_}))),p&&c.createElement(i.Environment,D))};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("@react-three/fiber"),r=require("three"),n=require("three-stdlib"),t=require("../helpers/environment-assets.cjs.js");const
|
|
1
|
+
"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("@react-three/fiber"),r=require("three"),n=require("three-stdlib"),t=require("../helpers/environment-assets.cjs.js"),s=require("../helpers/deprecated.cjs.js");const i=e=>Array.isArray(e);exports.useEnvironment=function({files:o=["/px.png","/nx.png","/py.png","/ny.png","/pz.png","/nz.png"],path:a="",preset:p,encoding:l,extensions:c}={}){var u;let d,b=null,h=!1;if(p){if(!(p in t.presetsObj))throw new Error("Preset must be one of: "+Object.keys(t.presetsObj).join(", "));o=t.presetsObj[p],a="https://raw.githack.com/pmndrs/drei-assets/456060a26bbeb8fdf79326f224b6d99b8bcce736/hdri/"}if(h=i(o),d=i(o)?"cube":o.startsWith("data:application/exr")?"exr":o.startsWith("data:application/hdr")?"hdr":null==(u=o.split(".").pop())||null==(u=u.split("?"))||null==(u=u.shift())?void 0:u.toLowerCase(),b=h?r.CubeTextureLoader:"hdr"===d?n.RGBELoader:"exr"===d?n.EXRLoader:null,!b)throw new Error("useEnvironment: Unrecognized file extension: "+o);const g=e.useLoader(b,h?[o]:o,(e=>{null==e.setPath||e.setPath(a),c&&c(e)})),f=h?g[0]:g;return f.mapping=h?r.CubeReflectionMapping:r.EquirectangularReflectionMapping,"colorSpace"in f?f.colorSpace=(null!=l?l:h)?"srgb":"srgb-linear":f.encoding=(null!=l?l:h)?s.sRGBEncoding:s.LinearEncoding,f};
|
package/core/useEnvironment.d.ts
CHANGED
|
@@ -1,13 +1,11 @@
|
|
|
1
1
|
import { Texture, Loader, CubeTexture } from 'three';
|
|
2
2
|
import { PresetsType } from '../helpers/environment-assets';
|
|
3
|
-
|
|
4
|
-
declare const sRGBEncoding = 3001;
|
|
3
|
+
import { TextureEncoding } from '../helpers/deprecated';
|
|
5
4
|
export type EnvironmentLoaderProps = {
|
|
6
5
|
files?: string | string[];
|
|
7
6
|
path?: string;
|
|
8
7
|
preset?: PresetsType;
|
|
9
8
|
extensions?: (loader: Loader) => void;
|
|
10
|
-
encoding?:
|
|
9
|
+
encoding?: TextureEncoding;
|
|
11
10
|
};
|
|
12
11
|
export declare function useEnvironment({ files, path, preset, encoding, extensions, }?: Partial<EnvironmentLoaderProps>): Texture | CubeTexture | (CubeTexture & Record<"colorSpace", unknown>);
|
|
13
|
-
export {};
|
package/core/useEnvironment.js
CHANGED
|
@@ -2,11 +2,10 @@ import { useLoader } from '@react-three/fiber';
|
|
|
2
2
|
import { CubeReflectionMapping, EquirectangularReflectionMapping, CubeTextureLoader } from 'three';
|
|
3
3
|
import { RGBELoader, EXRLoader } from 'three-stdlib';
|
|
4
4
|
import { presetsObj } from '../helpers/environment-assets.js';
|
|
5
|
+
import { sRGBEncoding, LinearEncoding } from '../helpers/deprecated.js';
|
|
5
6
|
|
|
6
7
|
const CUBEMAP_ROOT = 'https://raw.githack.com/pmndrs/drei-assets/456060a26bbeb8fdf79326f224b6d99b8bcce736/hdri/';
|
|
7
8
|
const isArray = arr => Array.isArray(arr);
|
|
8
|
-
const LinearEncoding = 3000;
|
|
9
|
-
const sRGBEncoding = 3001;
|
|
10
9
|
function useEnvironment({
|
|
11
10
|
files = ['/px.png', '/nx.png', '/py.png', '/ny.png', '/pz.png', '/nz.png'],
|
|
12
11
|
path = '',
|
package/core/useTexture.cjs.js
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("three"),r=require("@react-three/fiber"),t=require("react");const u=e=>e===Object(e)&&!Array.isArray(e)&&"function"!=typeof e;function o(o,
|
|
1
|
+
"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("three"),r=require("@react-three/fiber"),t=require("react");const u=e=>e===Object(e)&&!Array.isArray(e)&&"function"!=typeof e;function o(o,s){const a=r.useThree((e=>e.gl)),c=r.useLoader(e.TextureLoader,u(o)?Object.values(o):o);t.useLayoutEffect((()=>{null==s||s(c)}),[s]),t.useEffect((()=>{if("initTexture"in a){(Array.isArray(c)?c:[c]).forEach(a.initTexture)}}),[a,c]);return t.useMemo((()=>{if(u(o)){const e={};let r=0;for(const t in o)e[t]=c[r++];return e}return c}),[o,c])}o.preload=t=>r.useLoader.preload(e.TextureLoader,t),o.clear=t=>r.useLoader.clear(e.TextureLoader,t),exports.IsObject=u,exports.useTexture=o;
|
package/core/useTexture.js
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import { TextureLoader } from 'three';
|
|
2
2
|
import { useThree, useLoader } from '@react-three/fiber';
|
|
3
|
-
import { useLayoutEffect, useEffect } from 'react';
|
|
3
|
+
import { useLayoutEffect, useEffect, useMemo } from 'react';
|
|
4
4
|
|
|
5
5
|
const IsObject = url => url === Object(url) && !Array.isArray(url) && typeof url !== 'function';
|
|
6
6
|
function useTexture(input, onLoad) {
|
|
@@ -19,14 +19,17 @@ function useTexture(input, onLoad) {
|
|
|
19
19
|
array.forEach(gl.initTexture);
|
|
20
20
|
}
|
|
21
21
|
}, [gl, textures]);
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
22
|
+
const mappedTextures = useMemo(() => {
|
|
23
|
+
if (IsObject(input)) {
|
|
24
|
+
const keyed = {};
|
|
25
|
+
let i = 0;
|
|
26
|
+
for (const key in input) keyed[key] = textures[i++];
|
|
27
|
+
return keyed;
|
|
28
|
+
} else {
|
|
29
|
+
return textures;
|
|
30
|
+
}
|
|
31
|
+
}, [input, textures]);
|
|
32
|
+
return mappedTextures;
|
|
30
33
|
}
|
|
31
34
|
useTexture.preload = url => useLoader.preload(TextureLoader, url);
|
|
32
35
|
useTexture.clear = input => useLoader.clear(TextureLoader, input);
|
|
@@ -1 +1 @@
|
|
|
1
|
-
"use strict";Object.defineProperty(exports,"__esModule",{value:!0});exports.setUpdateRange=(e,t)=>{"updateRanges"in e?e.updateRanges[0]=t:e.updateRange=t};
|
|
1
|
+
"use strict";Object.defineProperty(exports,"__esModule",{value:!0});exports.LinearEncoding=3e3,exports.sRGBEncoding=3001,exports.setUpdateRange=(e,t)=>{"updateRanges"in e?e.updateRanges[0]=t:e.updateRange=t};
|
package/helpers/deprecated.d.ts
CHANGED
|
@@ -2,3 +2,6 @@ export declare const setUpdateRange: (attribute: THREE.BufferAttribute, updateRa
|
|
|
2
2
|
offset: number;
|
|
3
3
|
count: number;
|
|
4
4
|
}) => void;
|
|
5
|
+
export declare const LinearEncoding = 3000;
|
|
6
|
+
export declare const sRGBEncoding = 3001;
|
|
7
|
+
export type TextureEncoding = typeof LinearEncoding | typeof sRGBEncoding;
|
package/helpers/deprecated.js
CHANGED
|
@@ -10,5 +10,11 @@ const setUpdateRange = (attribute, updateRange) => {
|
|
|
10
10
|
attribute.updateRange = updateRange;
|
|
11
11
|
}
|
|
12
12
|
};
|
|
13
|
+
const LinearEncoding = 3000;
|
|
14
|
+
const sRGBEncoding = 3001;
|
|
13
15
|
|
|
14
|
-
|
|
16
|
+
/**
|
|
17
|
+
* TextureEncoding was deprecated in r152, and removed in r162.
|
|
18
|
+
*/
|
|
19
|
+
|
|
20
|
+
export { LinearEncoding, sRGBEncoding, setUpdateRange };
|