@react-three/drei 7.16.0 → 7.16.4

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"),n=require("@react-three/fiber"),t=require("./shaderMaterial.cjs.js"),a=require("./useTexture.cjs.js");function o(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)}require("three");var s=o(e),c=i(r);const u=t.shaderMaterial({planeBounds:[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 planeBounds;\n  uniform vec2 imageBounds;\n  uniform sampler2D map;\n  uniform float zoom;\n  uniform float grayscale;\n\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\n  void main() {\n    vec2 s = planeBounds;\n    vec2 i = 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), grayscale);\n  }\n");function l(e,r){const n=[e,r],t=Math.min(...n);return[n[0]/t,n[1]/t]}const v=c.forwardRef((({segments:e=1,scale:r=1,zoom:t=1,grayscale:o=0,url:i,...v},m)=>{n.extend({ImageMaterial:u});const f=a.useTexture(i),d=c.useMemo((()=>l(...Array.isArray(r)?[r[0],r[1]]:[r,r])),[r]),g=c.useMemo((()=>l(f.image.width,f.image.height)),[f]);return c.createElement("mesh",s.default({ref:m,scale:r},v),c.createElement("planeGeometry",{args:[1,1,e,e]}),c.createElement("imageMaterial",{map:f,zoom:t,grayscale:o,planeBounds:d,imageBounds:g}))}));exports.Image=v;
+"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;

package/core/Image.d.ts

@@ -1,15 +1,18 @@
 import * as React from 'react';
 import * as THREE from 'three';
+import { Color } from '@react-three/fiber';
 export declare type ImageProps = JSX.IntrinsicElements['mesh'] & {
     segments?: number;
     scale?: number;
+    color?: Color;
     zoom?: number;
     grayscale?: number;
     url: string;
 };
 declare type ImageMaterialType = JSX.IntrinsicElements['shaderMaterial'] & {
-    planeBounds?: number[];
+    scale?: number[];
     imageBounds?: number[];
+    color?: Color;
     map: THREE.Texture;
     zoom?: number;
     grayscale?: number;
@@ -42,8 +45,9 @@ export declare const Image: React.ForwardRefExoticComponent<Pick<Omit<import("@r
 } & import("@react-three/fiber/dist/declarations/src/core/events").EventHandlers & {
     segments?: number | undefined;
     scale?: number | undefined;
+    color?: Color | undefined;
     zoom?: number | undefined;
     grayscale?: number | undefined;
     url: string;
-}, "visible" | "attach" | "attachArray" | "attachObject" | "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" | "clear" | "getObjectById" | "getObjectByName" | "getObjectByProperty" | "getWorldPosition" | "getWorldQuaternion" | "getWorldScale" | "getWorldDirection" | "raycast" | "traverse" | "traverseVisible" | "traverseAncestors" | "updateMatrix" | "updateMatrixWorld" | "updateWorldMatrix" | "toJSON" | "clone" | "copy" | "addEventListener" | "hasEventListener" | "removeEventListener" | "dispatchEvent" | keyof import("@react-three/fiber/dist/declarations/src/core/events").EventHandlers | "zoom" | "material" | "url" | "segments" | "geometry" | "morphTargetInfluences" | "morphTargetDictionary" | "isMesh" | "updateMorphTargets" | "grayscale"> & React.RefAttributes<THREE.Mesh<THREE.BufferGeometry, THREE.Material | THREE.Material[]>>>;
+}, "visible" | "attach" | "attachArray" | "attachObject" | "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" | "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 | "zoom" | "material" | "url" | "segments" | "geometry" | "morphTargetInfluences" | "morphTargetDictionary" | "isMesh" | "updateMorphTargets" | "grayscale"> & React.RefAttributes<THREE.Mesh<THREE.BufferGeometry, THREE.Material | THREE.Material[]>>>;
 export {};

package/core/Image.js

@@ -1,11 +1,13 @@
 import _extends from '@babel/runtime/helpers/esm/extends';
 import * as React from 'react';
+import * as THREE from 'three';
 import { extend } from '@react-three/fiber';
 import { shaderMaterial } from './shaderMaterial.js';
 import { useTexture } from './useTexture.js';
 
 const ImageMaterialImpl = shaderMaterial({
-  planeBounds: [1, 1],
+  color: new THREE.Color('white'),
+  scale: [1, 1],
   imageBounds: [1, 1],
   map: null,
   zoom: 1,
@@ -23,37 +25,33 @@ const ImageMaterialImpl = shaderMaterial({
 `
   // mostly from https://gist.github.com/statico/df64c5d167362ecf7b34fca0b1459a44
   varying vec2 vUv;
-  uniform vec2 planeBounds;
+  uniform vec2 scale;
   uniform vec2 imageBounds;
+  uniform vec3 color;
   uniform sampler2D map;
   uniform float zoom;
   uniform float grayscale;
-
   const vec3 luma = vec3(.299, 0.587, 0.114);
   vec4 toGrayscale(vec4 color, float intensity) {
     return vec4(mix(color.rgb, vec3(dot(color.rgb, luma)), intensity), color.a);
   }
-
+  vec2 aspect(vec2 size) {
+    return size / min(size.x, size.y);
+  }
   void main() {
-    vec2 s = planeBounds;
-    vec2 i = imageBounds;
+    vec2 s = aspect(scale);
+    vec2 i = aspect(imageBounds);
     float rs = s.x / s.y;
     float ri = i.x / i.y;
     vec2 new = rs < ri ? vec2(i.x * s.y / i.y, s.y) : vec2(s.x, i.y * s.x / i.x);
     vec2 offset = (rs < ri ? vec2((new.x - s.x) / 2.0, 0.0) : vec2(0.0, (new.y - s.y) / 2.0)) / new;
     vec2 uv = vUv * s / new + offset;
     vec2 zUv = (uv - vec2(0.5, 0.5)) / zoom + vec2(0.5, 0.5);
-    gl_FragColor = toGrayscale(texture2D(map, zUv), grayscale);
+    gl_FragColor = toGrayscale(texture2D(map, zUv) * vec4(color, 1.0), grayscale);
   }
 `);
-
-function aspect(w, h) {
-  const size = [w, h];
-  const min = Math.min(...size);
-  return [size[0] / min, size[1] / min];
-}
-
 const Image = /*#__PURE__*/React.forwardRef(({
+  color,
   segments = 1,
   scale = 1,
   zoom = 1,
@@ -65,18 +63,19 @@ const Image = /*#__PURE__*/React.forwardRef(({
     ImageMaterial: ImageMaterialImpl
   });
   const texture = useTexture(url);
-  const planeBounds = React.useMemo(() => aspect(...(Array.isArray(scale) ? [scale[0], scale[1]] : [scale, scale])), [scale]);
-  const imageBounds = React.useMemo(() => aspect(texture.image.width, texture.image.height), [texture]);
+  const planeBounds = Array.isArray(scale) ? [scale[0], scale[1]] : [scale, scale];
+  const imageBounds = [texture.image.width, texture.image.height];
   return /*#__PURE__*/React.createElement("mesh", _extends({
     ref: ref,
     scale: scale
   }, props), /*#__PURE__*/React.createElement("planeGeometry", {
     args: [1, 1, segments, segments]
   }), /*#__PURE__*/React.createElement("imageMaterial", {
+    color: color,
     map: texture,
     zoom: zoom,
     grayscale: grayscale,
-    planeBounds: planeBounds,
+    scale: planeBounds,
     imageBounds: imageBounds
   }));
 });

package/core/TrackballControls.cjs.js

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("@babel/runtime/helpers/extends"),t=require("@react-three/fiber"),r=require("react"),n=require("three-stdlib");function o(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}function a(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 s=o(e),c=a(r);const u=c.forwardRef((({makeDefault:e,camera:r,domElement:o,regress:a,onChange:u,onStart:l,onEnd:i,...d},f)=>{const{invalidate:v,camera:b,gl:m,events:p,set:E,get:g,performance:h,viewport:j}=t.useThree(),O=r||b,y=o||("boolean"!=typeof p.connected?p.connected:m.domElement),L=c.useMemo((()=>new n.TrackballControls(O)),[O]);return t.useFrame((()=>{L.enabled&&L.update()})),c.useEffect((()=>{const e=e=>{v(),a&&h.regress(),u&&u(e)};return console.log(y),L.connect(y),L.addEventListener("change",e),l&&L.addEventListener("start",l),i&&L.addEventListener("end",i),()=>{L.removeEventListener("change",e),l&&L.removeEventListener("start",l),i&&L.removeEventListener("end",i),L.dispose()}}),[y,u,l,i,a,L,v]),c.useEffect((()=>{L.handleResize()}),[j]),c.useEffect((()=>{if(e){const e=g().controls;return E({controls:L}),()=>E({controls:e})}}),[e,L]),c.createElement("primitive",s.default({ref:f,object:L},d))}));exports.TrackballControls=u;
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("@babel/runtime/helpers/extends"),t=require("@react-three/fiber"),r=require("react"),n=require("three-stdlib");function o(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}function a(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 s=o(e),c=a(r);const u=c.forwardRef((({makeDefault:e,camera:r,domElement:o,regress:a,onChange:u,onStart:i,onEnd:l,...d},f)=>{const{invalidate:v,camera:b,gl:m,events:p,set:E,get:g,performance:h,viewport:j}=t.useThree(),O=r||b,y=o||("boolean"!=typeof p.connected?p.connected:m.domElement),L=c.useMemo((()=>new n.TrackballControls(O)),[O]);return t.useFrame((()=>{L.enabled&&L.update()})),c.useEffect((()=>{const e=e=>{v(),a&&h.regress(),u&&u(e)};return L.connect(y),L.addEventListener("change",e),i&&L.addEventListener("start",i),l&&L.addEventListener("end",l),()=>{L.removeEventListener("change",e),i&&L.removeEventListener("start",i),l&&L.removeEventListener("end",l),L.dispose()}}),[y,u,i,l,a,L,v]),c.useEffect((()=>{L.handleResize()}),[j]),c.useEffect((()=>{if(e){const e=g().controls;return E({controls:L}),()=>E({controls:e})}}),[e,L]),c.createElement("primitive",s.default({ref:f,object:L},d))}));exports.TrackballControls=u;

package/core/TrackballControls.js

@@ -36,7 +36,6 @@ const TrackballControls = /*#__PURE__*/React.forwardRef(({
       if (onChange) onChange(e);
     };
 
-    console.log(explDomElement);
     controls.connect(explDomElement);
     controls.addEventListener('change', callback);
     if (onStart) controls.addEventListener('start', onStart);

package/core/useTexture.cjs.js

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("three"),r=require("@react-three/fiber");const t=e=>e===Object(e)&&!Array.isArray(e)&&"function"!=typeof e;function o(o){const s=r.useLoader(e.TextureLoader,t(o)?Object.values(o):o);if(t(o)){const e=Object.keys(o),r={};return e.forEach((t=>Object.assign(r,{[t]:s[e.indexOf(t)]}))),r}return s}o.preload=t=>r.useLoader.preload(e.TextureLoader,t),o.clear=t=>r.useLoader.clear(e.TextureLoader,t),exports.IsObject=t,exports.useTexture=o;
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("three"),r=require("@react-three/fiber"),t=require("react");const a=e=>e===Object(e)&&!Array.isArray(e)&&"function"!=typeof e;function s(s){const u=r.useThree((e=>e.gl)),o=r.useLoader(e.TextureLoader,a(s)?Object.values(s):s);if(t.useEffect((()=>{(Array.isArray(o)?o:[o]).forEach(u.initTexture)}),[u,o]),a(s)){const e=Object.keys(s),r={};return e.forEach((t=>Object.assign(r,{[t]:o[e.indexOf(t)]}))),r}return o}s.preload=t=>r.useLoader.preload(e.TextureLoader,t),s.clear=t=>r.useLoader.clear(e.TextureLoader,t),exports.IsObject=a,exports.useTexture=s;

package/core/useTexture.js

@@ -1,9 +1,17 @@
 import { TextureLoader } from 'three';
-import { useLoader } from '@react-three/fiber';
+import { useThree, useLoader } from '@react-three/fiber';
+import { useEffect } from 'react';
 
 const IsObject = url => url === Object(url) && !Array.isArray(url) && typeof url !== 'function';
 function useTexture(input) {
-  const textures = useLoader(TextureLoader, IsObject(input) ? Object.values(input) : input);
+  const gl = useThree(state => state.gl);
+  const textures = useLoader(TextureLoader, IsObject(input) ? Object.values(input) : input); // https://github.com/mrdoob/three.js/issues/2269
+  // Upload the texture to the GPU immediately instead of waiting for the first render
+
+  useEffect(() => {
+    const array = Array.isArray(textures) ? textures : [textures];
+    array.forEach(gl.initTexture);
+  }, [gl, textures]);
 
   if (IsObject(input)) {
     const keys = Object.keys(input);