@react-three/drei 9.111.3 → 9.111.5
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 +262 -4635
- package/core/Cloud.cjs.js +1 -1
- package/core/Cloud.js +16 -13
- package/core/GizmoHelper.cjs.js +1 -1
- package/core/GizmoHelper.js +0 -1
- package/index.cjs.js +1 -1
- package/package.json +1 -11
package/core/Cloud.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"),a=require("./Texture.cjs.js"),o=require("uuid"),u=require("../helpers/deprecated.cjs.js");function
|
|
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"),a=require("./Texture.cjs.js"),o=require("uuid"),u=require("../helpers/deprecated.cjs.js");function c(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}function i(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 l=c(e),s=i(t);const d=new r.Matrix4,f=new r.Vector3,m=new r.Quaternion,p=new r.Vector3,g=new r.Quaternion,h=new r.Vector3,y=s.createContext(null),x=s.forwardRef((({children:e,material:t=r.MeshLambertMaterial,texture:o="https://rawcdn.githack.com/pmndrs/drei-assets/9225a9f1fbd449d9411125c2f419b843d0308c9f/cloud.png",range:c,limit:i=200,frustumCulled:x,...v},b)=>{var M,w;const C=s.useMemo((()=>class extends t{constructor(){super();const e=parseInt(r.REVISION.replace(/\D+/g,""))>=154?"opaque_fragment":"output_fragment";this.onBeforeCompile=t=>{t.vertexShader="attribute float cloudOpacity;\n varying float vOpacity;\n "+t.vertexShader.replace("#include <fog_vertex>","#include <fog_vertex>\n vOpacity = cloudOpacity;\n "),t.fragmentShader="varying float vOpacity;\n "+t.fragmentShader.replace(`#include <${e}>`,`#include <${e}>\n gl_FragColor = vec4(outgoingLight, diffuseColor.a * vOpacity);\n `)}}}),[t]);n.extend({CloudMaterial:C});const E=s.useRef(null),O=s.useRef([]),A=s.useMemo((()=>new Float32Array(Array.from({length:i},(()=>1)))),[i]),j=s.useMemo((()=>new Float32Array(Array.from({length:i},(()=>[1,1,1])).flat())),[i]),R=a.useTexture(o);let U,V=0,_=0;const q=new r.Quaternion,F=new r.Vector3(0,0,1),S=new r.Vector3;n.useFrame(((e,t)=>{for(V=e.clock.getElapsedTime(),d.copy(E.current.matrixWorld).invert(),e.camera.matrixWorld.decompose(p,g,h),_=0;_<O.current.length;_++)U=O.current[_],U.ref.current.matrixWorld.decompose(f,m,h),f.add(S.copy(U.position).applyQuaternion(m).multiply(h)),m.copy(g).multiply(q.setFromAxisAngle(F,U.rotation+=t*U.rotationFactor)),h.multiplyScalar(U.volume+(1+Math.sin(V*U.density*U.speed))/2*U.growth),U.matrix.compose(f,m,h).premultiply(d),U.dist=f.distanceTo(p);for(O.current.sort(((e,t)=>t.dist-e.dist)),_=0;_<O.current.length;_++)U=O.current[_],A[_]=U.opacity*(U.dist<U.fade-1?U.dist/U.fade:1),E.current.setMatrixAt(_,U.matrix),E.current.setColorAt(_,U.color);E.current.geometry.attributes.cloudOpacity.needsUpdate=!0,E.current.instanceMatrix.needsUpdate=!0,E.current.instanceColor&&(E.current.instanceColor.needsUpdate=!0)})),s.useLayoutEffect((()=>{const e=Math.min(i,void 0!==c?c:i,O.current.length);E.current.count=e,u.setUpdateRange(E.current.instanceMatrix,{offset:0,count:16*e}),E.current.instanceColor&&u.setUpdateRange(E.current.instanceColor,{offset:0,count:3*e}),u.setUpdateRange(E.current.geometry.attributes.cloudOpacity,{offset:0,count:e})}));let D=[null!==(M=R.image.width)&&void 0!==M?M:1,null!==(w=R.image.height)&&void 0!==w?w:1];const I=Math.max(D[0],D[1]);return D=[D[0]/I,D[1]/I],s.createElement("group",l.default({ref:b},v),s.createElement(y.Provider,{value:O},e,s.createElement("instancedMesh",{matrixAutoUpdate:!1,ref:E,args:[null,null,i],frustumCulled:x},s.createElement("instancedBufferAttribute",{usage:r.DynamicDrawUsage,attach:"instanceColor",args:[j,3]}),s.createElement("planeGeometry",{args:[...D]},s.createElement("instancedBufferAttribute",{usage:r.DynamicDrawUsage,attach:"attributes-cloudOpacity",args:[A,1]})),s.createElement("cloudMaterial",{key:t.name,map:R,transparent:!0,depthWrite:!1}))))})),v=s.forwardRef((({opacity:e=1,speed:t=0,bounds:a=[5,1,1],segments:u=20,color:c="#ffffff",fade:i=10,volume:d=6,smallestVolume:f=.25,distribute:m=null,growth:p=4,concentrate:g="inside",seed:h=Math.random(),...x},v)=>{function b(){const e=1e4*Math.sin(h++);return e-Math.floor(e)}const M=s.useContext(y),w=s.useRef(null),[C]=s.useState((()=>o.v4())),E=s.useMemo((()=>[...new Array(u)].map(((e,t)=>({segments:u,bounds:new r.Vector3(1,1,1),position:new r.Vector3,uuid:C,index:t,ref:w,dist:0,matrix:new r.Matrix4,color:new r.Color,rotation:t*(Math.PI/u)})))),[u,C]);return s.useLayoutEffect((()=>{E.forEach(((r,o)=>{n.applyProps(r,{volume:d,color:c,speed:t,growth:p,opacity:e,fade:i,bounds:a,density:Math.max(.5,b()),rotationFactor:Math.max(.2,.5*b())*t});const l=null==m?void 0:m(r,o);var s;(l||u>1)&&r.position.copy(r.bounds).multiply(null!==(s=null==l?void 0:l.point)&&void 0!==s?s:{x:2*b()-1,y:2*b()-1,z:2*b()-1});const h=Math.abs(r.position.x),y=Math.abs(r.position.y),x=Math.abs(r.position.z),v=Math.max(h,y,x);r.length=1,h===v&&(r.length-=h/r.bounds.x),y===v&&(r.length-=y/r.bounds.y),x===v&&(r.length-=x/r.bounds.z),r.volume=(void 0!==(null==l?void 0:l.volume)?l.volume:Math.max(Math.max(0,f),"random"===g?b():"inside"===g?r.length:1-r.length))*d}))}),[g,a,i,c,e,p,d,h,u,t]),s.useLayoutEffect((()=>{const e=E;return M.current=[...M.current,...e],()=>{M.current=M.current.filter((e=>e.uuid!==C))}}),[E]),s.useImperativeHandle(v,(()=>w.current),[]),s.createElement("group",l.default({ref:w},x))})),b=s.forwardRef(((e,t)=>s.useContext(y)?s.createElement(v,l.default({ref:t},e)):s.createElement(x,null,s.createElement(v,l.default({ref:t},e)))));exports.Cloud=b,exports.CloudInstance=v,exports.Clouds=x;
|
package/core/Cloud.js
CHANGED
|
@@ -30,10 +30,10 @@ const Clouds = /* @__PURE__ */React.forwardRef(({
|
|
|
30
30
|
super();
|
|
31
31
|
const opaque_fragment = parseInt(REVISION.replace(/\D+/g, '')) >= 154 ? 'opaque_fragment' : 'output_fragment';
|
|
32
32
|
this.onBeforeCompile = shader => {
|
|
33
|
-
shader.vertexShader = `attribute float
|
|
33
|
+
shader.vertexShader = `attribute float cloudOpacity;
|
|
34
34
|
varying float vOpacity;
|
|
35
35
|
` + shader.vertexShader.replace('#include <fog_vertex>', `#include <fog_vertex>
|
|
36
|
-
vOpacity =
|
|
36
|
+
vOpacity = cloudOpacity;
|
|
37
37
|
`);
|
|
38
38
|
shader.fragmentShader = `varying float vOpacity;
|
|
39
39
|
` + shader.fragmentShader.replace(`#include <${opaque_fragment}>`, `#include <${opaque_fragment}>
|
|
@@ -85,7 +85,7 @@ const Clouds = /* @__PURE__ */React.forwardRef(({
|
|
|
85
85
|
}
|
|
86
86
|
|
|
87
87
|
// Update instance
|
|
88
|
-
instance.current.geometry.attributes.
|
|
88
|
+
instance.current.geometry.attributes.cloudOpacity.needsUpdate = true;
|
|
89
89
|
instance.current.instanceMatrix.needsUpdate = true;
|
|
90
90
|
if (instance.current.instanceColor) instance.current.instanceColor.needsUpdate = true;
|
|
91
91
|
});
|
|
@@ -102,13 +102,13 @@ const Clouds = /* @__PURE__ */React.forwardRef(({
|
|
|
102
102
|
count: count * 3
|
|
103
103
|
});
|
|
104
104
|
}
|
|
105
|
-
setUpdateRange(instance.current.geometry.attributes.
|
|
105
|
+
setUpdateRange(instance.current.geometry.attributes.cloudOpacity, {
|
|
106
106
|
offset: 0,
|
|
107
107
|
count: count
|
|
108
108
|
});
|
|
109
109
|
});
|
|
110
110
|
let imageBounds = [(_image$width = cloudTexture.image.width) !== null && _image$width !== void 0 ? _image$width : 1, (_image$height = cloudTexture.image.height) !== null && _image$height !== void 0 ? _image$height : 1];
|
|
111
|
-
|
|
111
|
+
const max = Math.max(imageBounds[0], imageBounds[1]);
|
|
112
112
|
imageBounds = [imageBounds[0] / max, imageBounds[1] / max];
|
|
113
113
|
return /*#__PURE__*/React.createElement("group", _extends({
|
|
114
114
|
ref: fref
|
|
@@ -127,7 +127,7 @@ const Clouds = /* @__PURE__ */React.forwardRef(({
|
|
|
127
127
|
args: [...imageBounds]
|
|
128
128
|
}, /*#__PURE__*/React.createElement("instancedBufferAttribute", {
|
|
129
129
|
usage: DynamicDrawUsage,
|
|
130
|
-
attach: "attributes-
|
|
130
|
+
attach: "attributes-cloudOpacity",
|
|
131
131
|
args: [opacities, 1]
|
|
132
132
|
})), /*#__PURE__*/React.createElement("cloudMaterial", {
|
|
133
133
|
key: material.name,
|
|
@@ -174,7 +174,6 @@ const CloudInstance = /* @__PURE__ */React.forwardRef(({
|
|
|
174
174
|
}, [segments, uuid]);
|
|
175
175
|
React.useLayoutEffect(() => {
|
|
176
176
|
clouds.forEach((cloud, index) => {
|
|
177
|
-
var _distributed$point;
|
|
178
177
|
applyProps(cloud, {
|
|
179
178
|
volume,
|
|
180
179
|
color,
|
|
@@ -189,11 +188,14 @@ const CloudInstance = /* @__PURE__ */React.forwardRef(({
|
|
|
189
188
|
// Only distribute randomly if there are multiple segments
|
|
190
189
|
|
|
191
190
|
const distributed = distribute == null ? void 0 : distribute(cloud, index);
|
|
192
|
-
if (distributed || segments > 1)
|
|
193
|
-
|
|
194
|
-
|
|
195
|
-
|
|
196
|
-
|
|
191
|
+
if (distributed || segments > 1) {
|
|
192
|
+
var _distributed$point;
|
|
193
|
+
cloud.position.copy(cloud.bounds).multiply((_distributed$point = distributed == null ? void 0 : distributed.point) !== null && _distributed$point !== void 0 ? _distributed$point : {
|
|
194
|
+
x: random() * 2 - 1,
|
|
195
|
+
y: random() * 2 - 1,
|
|
196
|
+
z: random() * 2 - 1
|
|
197
|
+
});
|
|
198
|
+
}
|
|
197
199
|
const xDiff = Math.abs(cloud.position.x);
|
|
198
200
|
const yDiff = Math.abs(cloud.position.y);
|
|
199
201
|
const zDiff = Math.abs(cloud.position.z);
|
|
@@ -221,7 +223,8 @@ const Cloud = /* @__PURE__ */React.forwardRef((props, fref) => {
|
|
|
221
223
|
const parent = React.useContext(context);
|
|
222
224
|
if (parent) return /*#__PURE__*/React.createElement(CloudInstance, _extends({
|
|
223
225
|
ref: fref
|
|
224
|
-
}, props));
|
|
226
|
+
}, props));
|
|
227
|
+
return /*#__PURE__*/React.createElement(Clouds, null, /*#__PURE__*/React.createElement(CloudInstance, _extends({
|
|
225
228
|
ref: fref
|
|
226
229
|
}, props)));
|
|
227
230
|
});
|
package/core/GizmoHelper.cjs.js
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react"),r=require("@react-three/fiber"),t=require("three"),n=require("./OrthographicCamera.cjs.js"),o=require("./Hud.cjs.js");function i(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("@babel/runtime/helpers/extends"),require("./Fbo.cjs.js");var u=i(e);const a=u.createContext({}),c=2*Math.PI,s=new t.Object3D,l=new t.Matrix4,[p,d]=[new t.Quaternion,new t.Quaternion],f=new t.Vector3,h=new t.Vector3,m=e=>"getTarget"in e;exports.GizmoHelper=({alignment:e="bottom-right",margin:i=[80,80],renderPriority:g=1,onUpdate:y,onTarget:b,children:j})=>{const w=r.useThree((e=>e.size)),v=r.useThree((e=>e.camera)),q=r.useThree((e=>e.controls)),x=r.useThree((e=>e.invalidate)),O=u.useRef(null),T=u.useRef(null),P=u.useRef(!1),C=u.useRef(0),R=u.useRef(new t.Vector3(0,0,0)),z=u.useRef(new t.Vector3(0,0,0));u.useEffect((()=>{z.current.copy(v.up)}),[v]);const E=u.useCallback((e=>{P.current=!0,(q||b)&&(R.current=(null==b?void 0:b())||(m(q)?q.getTarget(R.current):null==q?void 0:q.target)),C.current=v.position.distanceTo(f),p.copy(v.quaternion),h.copy(e).multiplyScalar(C.current).add(f),s.lookAt(h),
|
|
1
|
+
"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react"),r=require("@react-three/fiber"),t=require("three"),n=require("./OrthographicCamera.cjs.js"),o=require("./Hud.cjs.js");function i(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("@babel/runtime/helpers/extends"),require("./Fbo.cjs.js");var u=i(e);const a=u.createContext({}),c=2*Math.PI,s=new t.Object3D,l=new t.Matrix4,[p,d]=[new t.Quaternion,new t.Quaternion],f=new t.Vector3,h=new t.Vector3,m=e=>"getTarget"in e;exports.GizmoHelper=({alignment:e="bottom-right",margin:i=[80,80],renderPriority:g=1,onUpdate:y,onTarget:b,children:j})=>{const w=r.useThree((e=>e.size)),v=r.useThree((e=>e.camera)),q=r.useThree((e=>e.controls)),x=r.useThree((e=>e.invalidate)),O=u.useRef(null),T=u.useRef(null),P=u.useRef(!1),C=u.useRef(0),R=u.useRef(new t.Vector3(0,0,0)),z=u.useRef(new t.Vector3(0,0,0));u.useEffect((()=>{z.current.copy(v.up)}),[v]);const E=u.useCallback((e=>{P.current=!0,(q||b)&&(R.current=(null==b?void 0:b())||(m(q)?q.getTarget(R.current):null==q?void 0:q.target)),C.current=v.position.distanceTo(f),p.copy(v.quaternion),h.copy(e).multiplyScalar(C.current).add(f),s.lookAt(h),d.copy(s.quaternion),x()}),[q,v,b,x]);r.useFrame(((e,r)=>{if(T.current&&O.current){var t;if(P.current)if(p.angleTo(d)<.01)P.current=!1,"minPolarAngle"in q&&v.up.copy(z.current);else{const e=r*c;p.rotateTowards(d,e),v.position.set(0,0,1).applyQuaternion(p).multiplyScalar(C.current).add(R.current),v.up.set(0,1,0).applyQuaternion(p).normalize(),v.quaternion.copy(p),m(q)&&q.setPosition(v.position.x,v.position.y,v.position.z),y?y():q&&q.update(r),x()}l.copy(v.matrix).invert(),null==(t=O.current)||t.quaternion.setFromRotationMatrix(l)}}));const M=u.useMemo((()=>({tweenCamera:E})),[E]),[k,Q]=i,V=e.endsWith("-center")?0:e.endsWith("-left")?-w.width/2+k:w.width/2-k,W=e.startsWith("center-")?0:e.startsWith("top-")?w.height/2-Q:-w.height/2+Q;return u.createElement(o.Hud,{renderPriority:g},u.createElement(a.Provider,{value:M},u.createElement(n.OrthographicCamera,{makeDefault:!0,ref:T,position:[0,0,200]}),u.createElement("group",{ref:O,position:[V,W,0]},j)))},exports.useGizmoContext=()=>u.useContext(a);
|
package/core/GizmoHelper.js
CHANGED
|
@@ -55,7 +55,6 @@ const GizmoHelper = ({
|
|
|
55
55
|
// To new current camera orientation
|
|
56
56
|
targetPosition.copy(direction).multiplyScalar(radius.current).add(target);
|
|
57
57
|
dummy.lookAt(targetPosition);
|
|
58
|
-
dummy.up.copy(mainCamera.up);
|
|
59
58
|
q2.copy(dummy.quaternion);
|
|
60
59
|
invalidate();
|
|
61
60
|
}, [defaultControls, mainCamera, onTarget, invalidate]);
|