@react-three/drei 7.16.8 → 7.17.0

package/core/Image.cjs.js

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("@babel/runtime/helpers/extends"),r=require("react"),t=require("three"),n=require("@react-three/fiber"),a=require("./shaderMaterial.cjs.js"),o=require("./useTexture.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 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 s=c(e),l=i(r),u=i(t);const v=a.shaderMaterial({color:new u.Color("white"),scale:[1,1],imageBounds:[1,1],map:null,zoom:1,grayscale:0},"\n  varying vec2 vUv;\n  void main() {\n    gl_Position = projectionMatrix * viewMatrix * modelMatrix * vec4(position, 1.);\n    vUv = uv;\n  }\n","\n  // mostly from https://gist.github.com/statico/df64c5d167362ecf7b34fca0b1459a44\n  varying vec2 vUv;\n  uniform vec2 scale;\n  uniform vec2 imageBounds;\n  uniform vec3 color;\n  uniform sampler2D map;\n  uniform float zoom;\n  uniform float grayscale;\n  const vec3 luma = vec3(.299, 0.587, 0.114);\n  vec4 toGrayscale(vec4 color, float intensity) {\n    return vec4(mix(color.rgb, vec3(dot(color.rgb, luma)), intensity), color.a);\n  }\n  vec2 aspect(vec2 size) {\n    return size / min(size.x, size.y);\n  }\n  void main() {\n    vec2 s = aspect(scale);\n    vec2 i = aspect(imageBounds);\n    float rs = s.x / s.y;\n    float ri = i.x / i.y;\n    vec2 new = rs < ri ? vec2(i.x * s.y / i.y, s.y) : vec2(s.x, i.y * s.x / i.x);\n    vec2 offset = (rs < ri ? vec2((new.x - s.x) / 2.0, 0.0) : vec2(0.0, (new.y - s.y) / 2.0)) / new;\n    vec2 uv = vUv * s / new + offset;\n    vec2 zUv = (uv - vec2(0.5, 0.5)) / zoom + vec2(0.5, 0.5);\n    gl_FragColor = toGrayscale(texture2D(map, zUv) * vec4(color, 1.0), grayscale);\n  }\n"),m=l.forwardRef((({color:e,segments:r=1,scale:t=1,zoom:a=1,grayscale:c=0,url:i,...u},m)=>{n.extend({ImageMaterial:v});const f=o.useTexture(i),g=Array.isArray(t)?[t[0],t[1]]:[t,t],y=[f.image.width,f.image.height];return l.createElement("mesh",s.default({ref:m,scale:t},u),l.createElement("planeGeometry",{args:[1,1,r,r]}),l.createElement("imageMaterial",{color:e,map:f,zoom:a,grayscale:c,scale:g,imageBounds:y}))}));exports.Image=m;
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("@babel/runtime/helpers/extends"),r=require("react"),n=require("three"),t=require("@react-three/fiber"),a=require("./shaderMaterial.cjs.js"),o=require("./useTexture.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 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)}var s=c(e),l=i(r),u=i(n);const v=a.shaderMaterial({color:new u.Color("white"),scale:[1,1],imageBounds:[1,1],map:null,zoom:1,grayscale:0},"\n  varying vec2 vUv;\n  void main() {\n    gl_Position = projectionMatrix * viewMatrix * modelMatrix * vec4(position, 1.);\n    vUv = uv;\n  }\n","\n  // mostly from https://gist.github.com/statico/df64c5d167362ecf7b34fca0b1459a44\n  varying vec2 vUv;\n  uniform vec2 scale;\n  uniform vec2 imageBounds;\n  uniform vec3 color;\n  uniform sampler2D map;\n  uniform float zoom;\n  uniform float grayscale;\n  const vec3 luma = vec3(.299, 0.587, 0.114);\n  vec4 toGrayscale(vec4 color, float intensity) {\n    return vec4(mix(color.rgb, vec3(dot(color.rgb, luma)), intensity), color.a);\n  }\n  vec2 aspect(vec2 size) {\n    return size / min(size.x, size.y);\n  }\n  void main() {\n    vec2 s = aspect(scale);\n    vec2 i = aspect(imageBounds);\n    float rs = s.x / s.y;\n    float ri = i.x / i.y;\n    vec2 new = rs < ri ? vec2(i.x * s.y / i.y, s.y) : vec2(s.x, i.y * s.x / i.x);\n    vec2 offset = (rs < ri ? vec2((new.x - s.x) / 2.0, 0.0) : vec2(0.0, (new.y - s.y) / 2.0)) / new;\n    vec2 uv = vUv * s / new + offset;\n    vec2 zUv = (uv - vec2(0.5, 0.5)) / zoom + vec2(0.5, 0.5);\n    gl_FragColor = toGrayscale(texture2D(map, zUv) * vec4(color, 1.0), grayscale);\n  }\n"),m=l.forwardRef((({children:e,color:r,segments:n=1,scale:a=1,zoom:c=1,grayscale:i=0,url:u,...m},f)=>{t.extend({ImageMaterial:v});const g=o.useTexture(u),y=Array.isArray(a)?[a[0],a[1]]:[a,a],d=[g.image.width,g.image.height];return l.createElement("mesh",s.default({ref:f,scale:a},m),l.createElement("planeGeometry",{args:[1,1,n,n]}),l.createElement("imageMaterial",{color:r,map:g,zoom:c,grayscale:i,scale:y,imageBounds:d}),e)}));exports.Image=m;

package/core/Image.js

@@ -51,6 +51,7 @@ const ImageMaterialImpl = shaderMaterial({
   }
 `);
 const Image = /*#__PURE__*/React.forwardRef(({
+  children,
   color,
   segments = 1,
   scale = 1,
@@ -77,7 +78,7 @@ const Image = /*#__PURE__*/React.forwardRef(({
     grayscale: grayscale,
     scale: planeBounds,
     imageBounds: imageBounds
-  }));
+  }), children);
 });
 
 export { Image };

package/core/useIntersect.cjs.js

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react"),r=require("@react-three/fiber");function t(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 n=t(e);exports.useIntersect=function(e){const t=n.useRef(null),u=n.useRef(!1),c=n.useRef(!1);return n.useEffect((()=>{const n=t.current;if(n){const t=r.addEffect((()=>(u.current=!1,!0))),f=n.onBeforeRender;n.onBeforeRender=()=>u.current=!0;const o=r.addAfterEffect((()=>(u.current!==c.current&&e(c.current=u.current),!0)));return()=>{n.onBeforeRender=f,t(),o()}}}),[]),t};

package/core/useIntersect.d.ts

@@ -0,0 +1,2 @@
+import * as React from 'react';
+export declare function useIntersect<T extends THREE.Object3D>(onChange: (visible: boolean) => void): React.MutableRefObject<T>;

package/core/useIntersect.js

@@ -0,0 +1,37 @@
+import * as React from 'react';
+import { addEffect, addAfterEffect } from '@react-three/fiber';
+
+function useIntersect(onChange) {
+  const ref = React.useRef(null);
+  const check = React.useRef(false);
+  const temp = React.useRef(false);
+  React.useEffect(() => {
+    const obj = ref.current;
+
+    if (obj) {
+      // Stamp out frustum check pre-emptively
+      const unsub1 = addEffect(() => {
+        check.current = false;
+        return true;
+      }); // If the object is inside the frustum three will call onRender
+
+      const oldOnRender = obj.onBeforeRender;
+
+      obj.onBeforeRender = () => check.current = true; // Compare the check value against the temp value, if it differs set state
+
+
+      const unsub2 = addAfterEffect(() => {
+        if (check.current !== temp.current) onChange(temp.current = check.current);
+        return true;
+      });
+      return () => {
+        obj.onBeforeRender = oldOnRender;
+        unsub1();
+        unsub2();
+      };
+    }
+  }, []);
+  return ref;
+}
+
+export { useIntersect };