@react-three/drei 9.56.10 → 9.56.12

package/README.md

@@ -999,10 +999,10 @@ You can align the text using the `<Center>` component.
 </Center>
 ```
 
-It adds two properties that do not exist in the original `TextGeometry`, `lineHeight` and `letterSpacing`. The former a factor that is `1` by default, the latter is in threejs units and `0` by default.
+It adds three properties that do not exist in the original `TextGeometry`, `lineHeight`, `letterSpacing` and smooth. LetterSpacing is a factor that is `1` by default. LineHeight is in threejs units and `0` by default. Smooth merges vertices with a tolerance and calls computeVertexNormals.
 
 ```jsx
-<Text3D lineHeight={0.5} letterSpacing={-0.025}>{`hello\nworld`}</Text3D>
+<Text3D smooth={1} lineHeight={0.5} letterSpacing={-0.025}>{`hello\nworld`}</Text3D>
 ```
 
 #### Effects
@@ -2804,6 +2804,8 @@ This component allows you to render a live scene into a texture which you can th
   eventPriority?: number
   /** Optional frame count, defaults to Infinity. If you set it to 1, it would only render a single frame, etc */
   frames?: number
+  /** Optional event compute, defaults to undefined */
+  compute?: (event: any, state: any, previous: any) => false | undefined
   /** Children will be rendered into a portal */
   children: React.ReactNode
 />
@@ -3384,6 +3386,7 @@ function Foo() {
 ```
 
 #### SpotLightShadows
+
 [![](https://img.shields.io/badge/-storybook-%23ff69b4)](https://drei.pmnd.rs/?path=/story/staging-spotlight--spotlight-shadows-st)
 
 <p>

package/core/RenderTexture.cjs.js

@@ -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"),a=require("./useFBO.cjs.js");function u(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 c=u(e),s=i(r),o=i(t);const l=o.forwardRef((({children:e,width:r,height:t,samples:u=8,renderPriority:i=0,eventPriority:l=0,frames:d=1/0,...m},p)=>{const{size:b,viewport:v}=n.useThree(),y=a.useFBO((r||b.width)*v.dpr,(t||b.height)*v.dpr,{samples:u}),[g]=o.useState((()=>new s.Scene)),h=o.useCallback(((e,r,t)=>{var n,a;let u=null==(n=y.texture)?void 0:n.__r3f.parent;for(;u&&!(u instanceof s.Object3D);)u=u.__r3f.parent;if(!u)return!1;t.raycaster.camera||t.events.compute(e,t,null==(a=t.previousRoot)?void 0:a.getState());const[i]=t.raycaster.intersectObject(u);if(!i)return!1;const c=i.uv;if(!c)return!1;r.raycaster.setFromCamera(r.pointer.set(2*c.x-1,2*c.y-1),r.camera)}),[]);return o.useImperativeHandle(p,(()=>y.texture),[y]),o.createElement(o.Fragment,null,n.createPortal(o.createElement(f,{renderPriority:i,frames:d,fbo:y},e),g,{events:{compute:h,priority:l}}),o.createElement("primitive",c.default({object:y.texture},m)))}));function f({frames:e,renderPriority:r,children:t,fbo:a}){let u=0;return n.useFrame((r=>{(e===1/0||u<e)&&(r.gl.setRenderTarget(a),r.gl.render(r.scene,r.camera),r.gl.setRenderTarget(null),u++)}),r),o.createElement(o.Fragment,null,t)}exports.RenderTexture=l;
+"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"),a=require("./useFBO.cjs.js");function u(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 c=u(e),s=i(r),o=i(t);const l=o.forwardRef((({children:e,compute:r,width:t,height:u,samples:i=8,renderPriority:l=0,eventPriority:d=0,frames:m=1/0,...p},b)=>{const{size:v,viewport:y}=n.useThree(),g=a.useFBO((t||v.width)*y.dpr,(u||v.height)*y.dpr,{samples:i}),[h]=o.useState((()=>new s.Scene)),j=o.useCallback(((e,r,t)=>{var n,a;let u=null==(n=g.texture)?void 0:n.__r3f.parent;for(;u&&!(u instanceof s.Object3D);)u=u.__r3f.parent;if(!u)return!1;t.raycaster.camera||t.events.compute(e,t,null==(a=t.previousRoot)?void 0:a.getState());const[i]=t.raycaster.intersectObject(u);if(!i)return!1;const c=i.uv;if(!c)return!1;r.raycaster.setFromCamera(r.pointer.set(2*c.x-1,2*c.y-1),r.camera)}),[]);return o.useImperativeHandle(b,(()=>g.texture),[g]),o.createElement(o.Fragment,null,n.createPortal(o.createElement(f,{renderPriority:l,frames:m,fbo:g},e),h,{events:{compute:r||j,priority:d}}),o.createElement("primitive",c.default({object:g.texture},p)))}));function f({frames:e,renderPriority:r,children:t,fbo:a}){let u=0;return n.useFrame((r=>{(e===1/0||u<e)&&(r.gl.setRenderTarget(a),r.gl.render(r.scene,r.camera),r.gl.setRenderTarget(null),u++)}),r),o.createElement(o.Fragment,null,t)}exports.RenderTexture=l;

package/core/RenderTexture.d.ts

@@ -7,5 +7,6 @@ export declare const RenderTexture: React.ForwardRefExoticComponent<Pick<import(
     renderPriority?: number | undefined;
     eventPriority?: number | undefined;
     frames?: number | undefined;
+    compute?: ((event: any, state: any, previous: any) => false | undefined) | undefined;
     children: React.ReactNode;
-}, "attach" | "args" | "children" | "key" | "onUpdate" | "rotation" | "matrix" | "dispose" | "type" | "id" | "uuid" | "name" | "matrixAutoUpdate" | "userData" | "updateMatrix" | "toJSON" | "clone" | "copy" | "addEventListener" | "hasEventListener" | "removeEventListener" | "dispatchEvent" | "center" | "source" | "repeat" | "image" | "needsUpdate" | "version" | "offset" | "width" | "height" | "sourceFile" | "mipmaps" | "mapping" | "wrapS" | "wrapT" | "magFilter" | "minFilter" | "anisotropy" | "format" | "internalFormat" | "generateMipmaps" | "premultiplyAlpha" | "flipY" | "unpackAlignment" | "encoding" | "isRenderTargetTexture" | "needsPMREMUpdate" | "isTexture" | "transformUv" | "samples" | "frames" | "renderPriority" | "eventPriority"> & React.RefAttributes<unknown>>;
+}, "attach" | "args" | "children" | "key" | "onUpdate" | "rotation" | "matrix" | "dispose" | "type" | "id" | "uuid" | "name" | "matrixAutoUpdate" | "userData" | "updateMatrix" | "toJSON" | "clone" | "copy" | "addEventListener" | "hasEventListener" | "removeEventListener" | "dispatchEvent" | "center" | "source" | "repeat" | "image" | "needsUpdate" | "version" | "offset" | "width" | "height" | "sourceFile" | "mipmaps" | "mapping" | "wrapS" | "wrapT" | "magFilter" | "minFilter" | "anisotropy" | "format" | "internalFormat" | "generateMipmaps" | "premultiplyAlpha" | "flipY" | "unpackAlignment" | "encoding" | "isRenderTargetTexture" | "needsPMREMUpdate" | "isTexture" | "transformUv" | "compute" | "samples" | "frames" | "renderPriority" | "eventPriority"> & React.RefAttributes<unknown>>;

package/core/RenderTexture.js

@@ -6,6 +6,7 @@ import { useFBO } from './useFBO.js';
 
 const RenderTexture = /*#__PURE__*/React.forwardRef(({
   children,
+  compute,
   width,
   height,
   samples = 8,
@@ -22,7 +23,7 @@ const RenderTexture = /*#__PURE__*/React.forwardRef(({
     samples
   });
   const [vScene] = React.useState(() => new THREE.Scene());
-  const compute = React.useCallback((event, state, previous) => {
+  const uvCompute = React.useCallback((event, state, previous) => {
     var _fbo$texture, _previous$previousRoo;
 
     // Since this is only a texture it does not have an easy way to obtain the parent, which we
@@ -52,7 +53,7 @@ const RenderTexture = /*#__PURE__*/React.forwardRef(({
     fbo: fbo
   }, children), vScene, {
     events: {
-      compute,
+      compute: compute || uvCompute,
       priority: eventPriority
     }
   }), /*#__PURE__*/React.createElement("primitive", _extends({

package/core/Text3D.cjs.js

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("@babel/runtime/helpers/extends"),t=require("react"),r=require("@react-three/fiber"),n=require("suspend-react"),s=require("three-stdlib");function i(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(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=i(e),a=u(t);const c=["string","number"],o=a.forwardRef((({font:e,letterSpacing:i=0,lineHeight:u=1,size:o=1,height:f=.2,bevelThickness:b=.1,bevelSize:d=.01,bevelEnabled:m=!1,bevelOffset:h=0,bevelSegments:v=4,curveSegments:g=8,children:p,...y},O)=>{a.useMemo((()=>r.extend({RenamedTextGeometry:s.TextGeometry})),[]);const j=n.suspend((async()=>{let t="string"==typeof e?await(await fetch(e)).json():e;return(new s.FontLoader).parse(t)}),[e]),x=t.useMemo((()=>({font:j,size:o,height:f,bevelThickness:b,bevelSize:d,bevelEnabled:m,bevelSegments:v,bevelOffset:h,curveSegments:g,letterSpacing:i,lineHeight:u})),[j,o,f,b,d,m,v,h,g,i,u]),[S,...E]=t.useMemo((()=>(e=>{let t="";const r=[];return a.Children.forEach(e,(e=>{c.includes(typeof e)?t+=e+"":r.push(e)})),[t,...r]})(p)),[p]),M=a.useMemo((()=>[S,x]),[S,x]);return a.createElement("mesh",l.default({},y,{ref:O}),a.createElement("renamedTextGeometry",{args:M}),E)}));exports.Text3D=o;
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("@babel/runtime/helpers/extends"),t=require("react"),r=require("@react-three/fiber"),n=require("suspend-react"),s=require("three-stdlib");function u(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 o=u(e),c=i(t);const l=["string","number"],a=c.forwardRef((({font:e,letterSpacing:u=0,lineHeight:i=1,size:a=1,height:f=.2,bevelThickness:m=.1,bevelSize:b=.01,bevelEnabled:d=!1,bevelOffset:g=0,bevelSegments:h=4,curveSegments:p=8,smooth:v,children:y,...x},O)=>{c.useMemo((()=>r.extend({RenamedTextGeometry:s.TextGeometry})),[]);const j=c.useRef(null),S=n.suspend((async()=>{let t="string"==typeof e?await(await fetch(e)).json():e;return(new s.FontLoader).parse(t)}),[e]),E=t.useMemo((()=>({font:S,size:a,height:f,bevelThickness:m,bevelSize:b,bevelEnabled:d,bevelSegments:h,bevelOffset:g,curveSegments:p,letterSpacing:u,lineHeight:i})),[S,a,f,m,b,d,h,g,p,u,i]),[M,...T]=t.useMemo((()=>(e=>{let t="";const r=[];return c.Children.forEach(e,(e=>{l.includes(typeof e)?t+=e+"":r.push(e)})),[t,...r]})(y)),[y]),q=c.useMemo((()=>[M,E]),[M,E]);return c.useLayoutEffect((()=>{v&&(j.current.geometry=s.mergeVertices(j.current.geometry,v),j.current.geometry.computeVertexNormals())}),[q,v]),c.useImperativeHandle(O,(()=>j.current),[]),c.createElement("mesh",o.default({},x,{ref:j}),c.createElement("renamedTextGeometry",{args:q}),T)}));exports.Text3D=a;

package/core/Text3D.d.ts

@@ -29,6 +29,7 @@ declare type FontData = {
 export declare const Text3D: React.ForwardRefExoticComponent<Pick<React.PropsWithChildren<{
     font: FontData | string;
     bevelSegments?: number | undefined;
+    smooth?: number | undefined;
 } & Omit<TextGeometryParameters, "font"> & Omit<import("@react-three/fiber").ExtendedColors<import("@react-three/fiber").Overwrite<Partial<THREE.Mesh<THREE.BufferGeometry, THREE.Material | THREE.Material[]>>, import("@react-three/fiber").NodeProps<THREE.Mesh<THREE.BufferGeometry, THREE.Material | THREE.Material[]>, typeof THREE.Mesh>>>, import("@react-three/fiber").NonFunctionKeys<{
     position?: import("@react-three/fiber").Vector3 | undefined;
     up?: import("@react-three/fiber").Vector3 | undefined;
@@ -50,5 +51,5 @@ export declare const Text3D: React.ForwardRefExoticComponent<Pick<React.PropsWit
 } & import("@react-three/fiber/dist/declarations/src/core/events").EventHandlers & {
     letterSpacing?: number | undefined;
     lineHeight?: number | undefined;
-}>, "visible" | "attach" | "args" | "children" | "key" | "onUpdate" | "position" | "up" | "scale" | "rotation" | "matrix" | "quaternion" | "layers" | "dispose" | "type" | "id" | "uuid" | "name" | "parent" | "modelViewMatrix" | "normalMatrix" | "matrixWorld" | "matrixAutoUpdate" | "matrixWorldNeedsUpdate" | "castShadow" | "receiveShadow" | "frustumCulled" | "renderOrder" | "animations" | "userData" | "customDepthMaterial" | "customDistanceMaterial" | "isObject3D" | "onBeforeRender" | "onAfterRender" | "applyMatrix4" | "applyQuaternion" | "setRotationFromAxisAngle" | "setRotationFromEuler" | "setRotationFromMatrix" | "setRotationFromQuaternion" | "rotateOnAxis" | "rotateOnWorldAxis" | "rotateX" | "rotateY" | "rotateZ" | "translateOnAxis" | "translateX" | "translateY" | "translateZ" | "localToWorld" | "worldToLocal" | "lookAt" | "add" | "remove" | "removeFromParent" | "clear" | "getObjectById" | "getObjectByName" | "getObjectByProperty" | "getWorldPosition" | "getWorldQuaternion" | "getWorldScale" | "getWorldDirection" | "raycast" | "traverse" | "traverseVisible" | "traverseAncestors" | "updateMatrix" | "updateMatrixWorld" | "updateWorldMatrix" | "toJSON" | "clone" | "copy" | "addEventListener" | "hasEventListener" | "removeEventListener" | "dispatchEvent" | keyof import("@react-three/fiber/dist/declarations/src/core/events").EventHandlers | "material" | "geometry" | "size" | "font" | "morphTargetInfluences" | "morphTargetDictionary" | "isMesh" | "updateMorphTargets" | "height" | "letterSpacing" | "lineHeight" | "bevelEnabled" | "bevelOffset" | "bevelSize" | "bevelThickness" | "curveSegments" | "bevelSegments"> & React.RefAttributes<THREE.Mesh<THREE.BufferGeometry, THREE.Material | THREE.Material[]>>>;
+}>, "visible" | "attach" | "args" | "children" | "key" | "onUpdate" | "position" | "up" | "scale" | "rotation" | "matrix" | "quaternion" | "layers" | "dispose" | "type" | "id" | "uuid" | "name" | "parent" | "modelViewMatrix" | "normalMatrix" | "matrixWorld" | "matrixAutoUpdate" | "matrixWorldNeedsUpdate" | "castShadow" | "receiveShadow" | "frustumCulled" | "renderOrder" | "animations" | "userData" | "customDepthMaterial" | "customDistanceMaterial" | "isObject3D" | "onBeforeRender" | "onAfterRender" | "applyMatrix4" | "applyQuaternion" | "setRotationFromAxisAngle" | "setRotationFromEuler" | "setRotationFromMatrix" | "setRotationFromQuaternion" | "rotateOnAxis" | "rotateOnWorldAxis" | "rotateX" | "rotateY" | "rotateZ" | "translateOnAxis" | "translateX" | "translateY" | "translateZ" | "localToWorld" | "worldToLocal" | "lookAt" | "add" | "remove" | "removeFromParent" | "clear" | "getObjectById" | "getObjectByName" | "getObjectByProperty" | "getWorldPosition" | "getWorldQuaternion" | "getWorldScale" | "getWorldDirection" | "raycast" | "traverse" | "traverseVisible" | "traverseAncestors" | "updateMatrix" | "updateMatrixWorld" | "updateWorldMatrix" | "toJSON" | "clone" | "copy" | "addEventListener" | "hasEventListener" | "removeEventListener" | "dispatchEvent" | keyof import("@react-three/fiber/dist/declarations/src/core/events").EventHandlers | "material" | "geometry" | "size" | "font" | "smooth" | "morphTargetInfluences" | "morphTargetDictionary" | "isMesh" | "updateMorphTargets" | "height" | "letterSpacing" | "lineHeight" | "bevelEnabled" | "bevelOffset" | "bevelSize" | "bevelThickness" | "curveSegments" | "bevelSegments"> & React.RefAttributes<THREE.Mesh<THREE.BufferGeometry, THREE.Material | THREE.Material[]>>>;
 export {};

package/core/Text3D.js

@@ -3,7 +3,7 @@ import * as React from 'react';
 import { useMemo } from 'react';
 import { extend } from '@react-three/fiber';
 import { suspend } from 'suspend-react';
-import { TextGeometry, FontLoader } from 'three-stdlib';
+import { TextGeometry, FontLoader, mergeVertices } from 'three-stdlib';
 
 const types = ['string', 'number'];
 
@@ -28,12 +28,14 @@ const Text3D = /*#__PURE__*/React.forwardRef(({
   bevelOffset = 0,
   bevelSegments = 4,
   curveSegments = 8,
+  smooth,
   children,
   ...props
-}, ref) => {
+}, fref) => {
   React.useMemo(() => extend({
     RenamedTextGeometry: TextGeometry
   }), []);
+  const ref = React.useRef(null);
   const font = suspend(async () => {
     let data = typeof _font === 'string' ? await (await fetch(_font)).json() : _font;
     let loader = new FontLoader();
@@ -61,6 +63,13 @@ const Text3D = /*#__PURE__*/React.forwardRef(({
 
   const [label, ...rest] = useMemo(() => getTextFromChildren(children), [children]);
   const args = React.useMemo(() => [label, opts], [label, opts]);
+  React.useLayoutEffect(() => {
+    if (smooth) {
+      ref.current.geometry = mergeVertices(ref.current.geometry, smooth);
+      ref.current.geometry.computeVertexNormals();
+    }
+  }, [args, smooth]);
+  React.useImperativeHandle(fref, () => ref.current, []);
   return /*#__PURE__*/React.createElement("mesh", _extends({}, props, {
     ref: ref
   }), /*#__PURE__*/React.createElement("renamedTextGeometry", {