@react-three/drei 9.104.0 → 9.105.0

package/README.md

@@ -4722,7 +4722,11 @@ Sets up a global cubemap, which affects the default `scene.environment`, and opt
 ```jsx
 <Environment
   background={false} // can be true, false or "only" (which only sets the background) (default: false)
-  blur={0} // blur factor between 0 and 1 (default: 0, only works with three 0.146 and up)
+  backgroundBlurriness={0} // optional blur factor between 0 and 1 (default: 0, only works with three 0.146 and up)
+  backgroundIntensity={1} // optional intensity factor (default: 1, only works with three 0.163 and up)
+  backgroundRotation={[0, Math.PI / 2, 0]} // optional rotation (default: 0, only works with three 0.163 and up)
+  environmentIntensity={1} // optional intensity factor (default: 1, only works with three 0.163 and up)
+  environmentRotation={[0, Math.PI / 2, 0]} // optional rotation (default: 0, only works with three 0.163 and up)
   files={['px.png', 'nx.png', 'py.png', 'ny.png', 'pz.png', 'nz.png']}
   path="/"
   preset={null}
@@ -4756,8 +4760,8 @@ Otherwise use the files property. It will use RGBELoader for _.hdr, EXRLoader fo
 <Environment files="file.hdr" />
 <Environment files="file.exr" />
 <Environment files="file.jpg" />
-<Environment files="file.webp" />
-<Environment files={['px.png', 'nx.png', 'py.png', 'ny.png', 'pz.png', 'nz.png']}
+<Environment files={['file.webp', 'file-gainmap.webp', 'file.json']} />
+<Environment files={['px.png', 'nx.png', 'py.png', 'ny.png', 'pz.png', 'nz.png']} />
 ```
 
 You can also use [@pmndrs/assets](https://github.com/pmndrs/assets) to easily self host common assets. Always use dynamic imports to avoid making this part of your main bundle.

package/core/Environment.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("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("@monogrid/gainmap-js"),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:g,path:p,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]}),g||v?l.createElement(f,{background:!0,files:g,preset:v,path:p,extensions:E}):s?l.createElement(m,{background:!0,map:s,extensions:E}):null),x))}function g(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,g=null==(t=e.ground)?void 0:t.radius,p=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:p,height:b,radius:g}))}exports.Environment=function(e){return e.ground?l.createElement(g,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;
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("@babel/runtime/helpers/extends"),n=require("react"),t=require("@react-three/fiber"),r=require("three"),o=require("three-stdlib"),u=require("./useEnvironment.cjs.js");function a(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}function i(e){if(e&&e.__esModule)return e;var n=Object.create(null);return e&&Object.keys(e).forEach((function(t){if("default"!==t){var r=Object.getOwnPropertyDescriptor(e,t);Object.defineProperty(n,t,r.get?r:{enumerable:!0,get:function(){return e[t]}})}})),n.default=e,Object.freeze(n)}require("@monogrid/gainmap-js"),require("../helpers/environment-assets.cjs.js"),require("../helpers/deprecated.cjs.js");var c=a(e),s=i(n);const l=e=>{return(n=e).current&&n.current.isScene?e.current:e;var n};function d(e,n,r,o,u={}){var a,i,c,s,d;u={backgroundBlurriness:null!==(a=u.blur)&&void 0!==a?a:0,backgroundIntensity:1,backgroundRotation:[0,0,0],environmentIntensity:1,environmentRotation:[0,0,0],...u};const m=l(n||r),b=m.background,g=m.environment,v={backgroundBlurriness:m.backgroundBlurriness,backgroundIntensity:m.backgroundIntensity,backgroundRotation:null!==(i=null==(c=m.backgroundRotation)||null==c.clone?void 0:c.clone())&&void 0!==i?i:[0,0,0],environmentIntensity:m.environmentIntensity,environmentRotation:null!==(s=null==(d=m.environmentRotation)||null==d.clone?void 0:d.clone())&&void 0!==s?s:[0,0,0]};return"only"!==e&&(m.environment=o),e&&(m.background=o,t.applyProps(m,u)),()=>{"only"!==e&&(m.environment=g),e&&(m.background=b,t.applyProps(m,v))}}function m({scene:e,background:n=!1,map:r,...o}){const u=t.useThree((e=>e.scene));return s.useLayoutEffect((()=>{if(r)return d(n,e,u,r,o)})),null}function b({background:e=!1,scene:n,blur:r,backgroundBlurriness:o,backgroundIntensity:a,backgroundRotation:i,environmentIntensity:c,environmentRotation:l,...m}){const b=u.useEnvironment(m),g=t.useThree((e=>e.scene));return s.useLayoutEffect((()=>d(e,n,g,b,{blur:r,backgroundBlurriness:o,backgroundIntensity:a,backgroundRotation:i,environmentIntensity:c,environmentRotation:l}))),null}function g({children:e,near:n=1,far:o=1e3,resolution:u=256,frames:a=1,map:i,background:c=!1,blur:l,backgroundBlurriness:g,backgroundIntensity:v,backgroundRotation:p,environmentIntensity:f,environmentRotation:k,scene:y,files:E,path:h,preset:j,extensions:I}){const R=t.useThree((e=>e.gl)),x=t.useThree((e=>e.scene)),P=s.useRef(null),[q]=s.useState((()=>new r.Scene)),B=s.useMemo((()=>{const e=new r.WebGLCubeRenderTarget(u);return e.texture.type=r.HalfFloatType,e}),[u]);s.useLayoutEffect((()=>(1===a&&P.current.update(R,q),d(c,y,x,B.texture,{blur:l,backgroundBlurriness:g,backgroundIntensity:v,backgroundRotation:p,environmentIntensity:f,environmentRotation:k}))),[e,q,B.texture,y,x,c,a,R]);let O=1;return t.useFrame((()=>{(a===1/0||O<a)&&(P.current.update(R,q),O++)})),s.createElement(s.Fragment,null,t.createPortal(s.createElement(s.Fragment,null,e,s.createElement("cubeCamera",{ref:P,args:[n,o,B]}),E||j?s.createElement(b,{background:!0,files:E,preset:j,path:h,extensions:I}):i?s.createElement(m,{background:!0,map:i,extensions:I}):null),q))}function v(e){var n,r,a,i;const l=u.useEnvironment(e),d=e.map||l;s.useMemo((()=>t.extend({GroundProjectedEnvImpl:o.GroundProjectedEnv})),[]);const b=s.useMemo((()=>[d]),[d]),g=null==(n=e.ground)?void 0:n.height,v=null==(r=e.ground)?void 0:r.radius,p=null!==(a=null==(i=e.ground)?void 0:i.scale)&&void 0!==a?a:1e3;return s.createElement(s.Fragment,null,s.createElement(m,c.default({},e,{map:d})),s.createElement("groundProjectedEnvImpl",{args:b,scale:p,height:g,radius:v}))}exports.Environment=function(e){return e.ground?s.createElement(v,e):e.map?s.createElement(m,e):e.children?s.createElement(g,e):s.createElement(b,e)},exports.EnvironmentCube=b,exports.EnvironmentMap=m,exports.EnvironmentPortal=g;

package/core/Environment.d.ts

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { Object3DNode } from '@react-three/fiber';
+import { Object3DNode, Vector3 } from '@react-three/fiber';
 import { Texture, Scene } from 'three';
 import { GroundProjectedEnv as GroundProjectedEnvImpl } from 'three-stdlib';
 import { PresetsType } from '../helpers/environment-assets';
@@ -12,6 +12,11 @@ export type EnvironmentProps = {
     resolution?: number;
     background?: boolean | 'only';
     blur?: number;
+    backgroundBlurriness?: number;
+    backgroundIntensity?: number;
+    backgroundRotation?: Vector3;
+    environmentIntensity?: number;
+    environmentRotation?: Vector3;
     map?: Texture;
     preset?: PresetsType;
     scene?: Scene | React.MutableRefObject<Scene>;
@@ -21,9 +26,9 @@ export type EnvironmentProps = {
         scale?: number;
     };
 } & EnvironmentLoaderProps;
-export declare function EnvironmentMap({ scene, background, blur, map }: EnvironmentProps): null;
-export declare function EnvironmentCube({ background, scene, blur, ...rest }: EnvironmentProps): null;
-export declare function EnvironmentPortal({ children, near, far, resolution, frames, map, background, blur, scene, files, path, preset, extensions, }: EnvironmentProps): React.JSX.Element;
+export declare function EnvironmentMap({ scene, background, map, ...config }: EnvironmentProps): null;
+export declare function EnvironmentCube({ background, scene, blur, backgroundBlurriness, backgroundIntensity, backgroundRotation, environmentIntensity, environmentRotation, ...rest }: EnvironmentProps): null;
+export declare function EnvironmentPortal({ children, near, far, resolution, frames, map, background, blur, backgroundBlurriness, backgroundIntensity, backgroundRotation, environmentIntensity, environmentRotation, scene, files, path, preset, extensions, }: EnvironmentProps): React.JSX.Element;
 declare global {
     namespace JSX {
         interface IntrinsicElements {

package/core/Environment.js

@@ -1,52 +1,86 @@
 import _extends from '@babel/runtime/helpers/esm/extends';
 import * as React from 'react';
-import { useThree, useFrame, createPortal, extend } from '@react-three/fiber';
+import { useThree, useFrame, createPortal, applyProps, extend } from '@react-three/fiber';
 import { Scene, WebGLCubeRenderTarget, HalfFloatType } from 'three';
 import { GroundProjectedEnv } from 'three-stdlib';
 import { useEnvironment } from './useEnvironment.js';
 
 const isRef = obj => obj.current && obj.current.isScene;
 const resolveScene = scene => isRef(scene) ? scene.current : scene;
-function setEnvProps(background, scene, defaultScene, texture, blur = 0) {
+function setEnvProps(background, scene, defaultScene, texture, sceneProps = {}) {
+  var _sceneProps$blur, _target$backgroundRot, _target$backgroundRot2, _target$environmentRo, _target$environmentRo2;
+  // defaults
+  sceneProps = {
+    backgroundBlurriness: (_sceneProps$blur = sceneProps.blur) !== null && _sceneProps$blur !== void 0 ? _sceneProps$blur : 0,
+    backgroundIntensity: 1,
+    backgroundRotation: [0, 0, 0],
+    environmentIntensity: 1,
+    environmentRotation: [0, 0, 0],
+    ...sceneProps
+  };
   const target = resolveScene(scene || defaultScene);
   const oldbg = target.background;
   const oldenv = target.environment;
-  // @ts-ignore
-  const oldBlur = target.backgroundBlurriness || 0;
+  const oldSceneProps = {
+    // @ts-ignore
+    backgroundBlurriness: target.backgroundBlurriness,
+    // @ts-ignore
+    backgroundIntensity: target.backgroundIntensity,
+    // @ts-ignore
+    backgroundRotation: (_target$backgroundRot = (_target$backgroundRot2 = target.backgroundRotation) == null || _target$backgroundRot2.clone == null ? void 0 : _target$backgroundRot2.clone()) !== null && _target$backgroundRot !== void 0 ? _target$backgroundRot : [0, 0, 0],
+    // @ts-ignore
+    environmentIntensity: target.environmentIntensity,
+    // @ts-ignore
+    environmentRotation: (_target$environmentRo = (_target$environmentRo2 = target.environmentRotation) == null || _target$environmentRo2.clone == null ? void 0 : _target$environmentRo2.clone()) !== null && _target$environmentRo !== void 0 ? _target$environmentRo : [0, 0, 0]
+  };
   if (background !== 'only') target.environment = texture;
-  if (background) target.background = texture;
-  // @ts-ignore
-  if (background && target.backgroundBlurriness !== undefined) target.backgroundBlurriness = blur;
+  if (background) {
+    target.background = texture;
+    applyProps(target, sceneProps);
+  }
   return () => {
     if (background !== 'only') target.environment = oldenv;
-    if (background) target.background = oldbg;
-    // @ts-ignore
-    if (background && target.backgroundBlurriness !== undefined) target.backgroundBlurriness = oldBlur;
+    if (background) {
+      target.background = oldbg;
+      applyProps(target, oldSceneProps);
+    }
   };
 }
 function EnvironmentMap({
   scene,
   background = false,
-  blur,
-  map
+  map,
+  ...config
 }) {
   const defaultScene = useThree(state => state.scene);
   React.useLayoutEffect(() => {
-    if (map) return setEnvProps(background, scene, defaultScene, map, blur);
-  }, [defaultScene, scene, map, background, blur]);
+    if (map) return setEnvProps(background, scene, defaultScene, map, config);
+  });
   return null;
 }
 function EnvironmentCube({
   background = false,
   scene,
   blur,
+  backgroundBlurriness,
+  backgroundIntensity,
+  backgroundRotation,
+  environmentIntensity,
+  environmentRotation,
   ...rest
 }) {
   const texture = useEnvironment(rest);
   const defaultScene = useThree(state => state.scene);
   React.useLayoutEffect(() => {
-    return setEnvProps(background, scene, defaultScene, texture, blur);
-  }, [texture, background, scene, defaultScene, blur]);
+    return setEnvProps(background, scene, defaultScene, texture, {
+      blur,
+      backgroundBlurriness,
+      backgroundIntensity,
+      backgroundRotation,
+      environmentIntensity,
+      environmentRotation
+    });
+  });
   return null;
 }
 function EnvironmentPortal({
@@ -58,6 +92,11 @@ function EnvironmentPortal({
   map,
   background = false,
   blur,
+  backgroundBlurriness,
+  backgroundIntensity,
+  backgroundRotation,
+  environmentIntensity,
+  environmentRotation,
   scene,
   files,
   path,
@@ -75,7 +114,14 @@ function EnvironmentPortal({
   }, [resolution]);
   React.useLayoutEffect(() => {
     if (frames === 1) camera.current.update(gl, virtualScene);
-    return setEnvProps(background, scene, defaultScene, fbo.texture, blur);
+    return setEnvProps(background, scene, defaultScene, fbo.texture, {
+      blur,
+      backgroundBlurriness,
+      backgroundIntensity,
+      backgroundRotation,
+      environmentIntensity,
+      environmentRotation
+    });
   }, [children, virtualScene, fbo.texture, scene, defaultScene, background, frames, gl]);
   let count = 1;
   useFrame(() => {

package/core/Outlines.cjs.js

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("@babel/runtime/helpers/extends"),n=require("three"),t=require("react"),r=require("./shaderMaterial.cjs.js"),i=require("@react-three/fiber"),o=require("three-stdlib"),c=require("../helpers/constants.cjs.js");function s(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}function a(e){if(e&&e.__esModule)return e;var n=Object.create(null);return e&&Object.keys(e).forEach((function(t){if("default"!==t){var r=Object.getOwnPropertyDescriptor(e,t);Object.defineProperty(n,t,r.get?r:{enumerable:!0,get:function(){return e[t]}})}})),n.default=e,Object.freeze(n)}var l=s(e),u=a(n),d=a(t);const f=r.shaderMaterial({screenspace:!1,color:new u.Color("black"),opacity:1,thickness:.05,size:new u.Vector2},"#include <common>\n   #include <morphtarget_pars_vertex>\n   #include <skinning_pars_vertex>\n   uniform float thickness;\n   uniform float screenspace;\n   uniform vec2 size;\n   void main() {\n     #if defined (USE_SKINNING)\n\t     #include <beginnormal_vertex>\n       #include <morphnormal_vertex>\n       #include <skinbase_vertex>\n       #include <skinnormal_vertex>\n       #include <defaultnormal_vertex>\n     #endif\n     #include <begin_vertex>\n\t   #include <morphtarget_vertex>\n\t   #include <skinning_vertex>\n     #include <project_vertex>\n     vec4 tNormal = vec4(normal, 0.0);\n     vec4 tPosition = vec4(transformed, 1.0);\n     #ifdef USE_INSTANCING\n       tNormal = instanceMatrix * tNormal;\n       tPosition = instanceMatrix * tPosition;\n     #endif\n     if (screenspace == 0.0) {\n       vec3 newPosition = tPosition.xyz + tNormal.xyz * thickness;\n       gl_Position = projectionMatrix * modelViewMatrix * vec4(newPosition, 1.0); \n     } else {\n       vec4 clipPosition = projectionMatrix * modelViewMatrix * tPosition;\n       vec4 clipNormal = projectionMatrix * modelViewMatrix * tNormal;\n       vec2 offset = normalize(clipNormal.xy) * thickness / size * clipPosition.w * 2.0;\n       clipPosition.xy += offset;\n       gl_Position = clipPosition;\n     }\n   }",`uniform vec3 color;\n   uniform float opacity;\n   void main(){\n     gl_FragColor = vec4(color, opacity);\n     #include <tonemapping_fragment>\n     #include <${c.version>=154?"colorspace_fragment":"encodings_fragment"}>\n   }`);exports.Outlines=function({color:e="black",opacity:n=1,transparent:t=!1,screenspace:r=!1,toneMapped:c=!0,polygonOffset:s=!1,polygonOffsetFactor:a=0,renderOrder:p=0,thickness:m=.05,angle:g=Math.PI,...v}){const x=d.useRef(),[y]=d.useState((()=>new f({side:u.BackSide}))),{gl:h}=i.useThree(),_=h.getDrawingBufferSize(new u.Vector2);d.useMemo((()=>i.extend({OutlinesMaterial:f})),[]);const M=d.useRef(0),b=d.useRef();return d.useLayoutEffect((()=>{const e=x.current;if(!e)return;const n=e.parent;if(n&&n.geometry&&(M.current!==g||b.current!==n.geometry)){M.current=g,b.current=n.geometry;let t=e.children[0];t&&(g&&t.geometry.dispose(),e.remove(t)),n.skeleton?(t=new u.SkinnedMesh,t.material=y,t.bind(n.skeleton,n.bindMatrix),e.add(t)):n.isInstancedMesh?(t=new u.InstancedMesh(n.geometry,y,n.count),t.instanceMatrix=n.instanceMatrix,e.add(t)):(t=new u.Mesh,t.material=y,e.add(t)),t.geometry=g?o.toCreasedNormals(n.geometry,g):n.geometry}})),d.useLayoutEffect((()=>{const o=x.current;if(!o)return;const l=o.children[0];l&&(l.renderOrder=p,i.applyProps(l.material,{transparent:t,thickness:m,color:e,opacity:n,size:_,screenspace:r,toneMapped:c,polygonOffset:s,polygonOffsetFactor:a}))})),d.useEffect((()=>()=>{const e=x.current;if(!e)return;const n=e.children[0];n&&(g&&n.geometry.dispose(),e.remove(n))}),[]),d.createElement("group",l.default({ref:x},v))};
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("@babel/runtime/helpers/extends"),n=require("three"),t=require("react"),r=require("./shaderMaterial.cjs.js"),i=require("@react-three/fiber"),o=require("three-stdlib"),c=require("../helpers/constants.cjs.js");function s(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}function a(e){if(e&&e.__esModule)return e;var n=Object.create(null);return e&&Object.keys(e).forEach((function(t){if("default"!==t){var r=Object.getOwnPropertyDescriptor(e,t);Object.defineProperty(n,t,r.get?r:{enumerable:!0,get:function(){return e[t]}})}})),n.default=e,Object.freeze(n)}var l=s(e),u=a(n),d=a(t);const f=r.shaderMaterial({screenspace:!1,color:new u.Color("black"),opacity:1,thickness:.05,size:new u.Vector2},"#include <common>\n   #include <morphtarget_pars_vertex>\n   #include <skinning_pars_vertex>\n   uniform float thickness;\n   uniform float screenspace;\n   uniform vec2 size;\n   void main() {\n     #if defined (USE_SKINNING)\n\t     #include <beginnormal_vertex>\n       #include <morphnormal_vertex>\n       #include <skinbase_vertex>\n       #include <skinnormal_vertex>\n       #include <defaultnormal_vertex>\n     #endif\n     #include <begin_vertex>\n\t   #include <morphtarget_vertex>\n\t   #include <skinning_vertex>\n     #include <project_vertex>\n     vec4 tNormal = vec4(normal, 0.0);\n     vec4 tPosition = vec4(transformed, 1.0);\n     #ifdef USE_INSTANCING\n       tNormal = instanceMatrix * tNormal;\n       tPosition = instanceMatrix * tPosition;\n     #endif\n     if (screenspace == 0.0) {\n       vec3 newPosition = tPosition.xyz + tNormal.xyz * thickness;\n       gl_Position = projectionMatrix * modelViewMatrix * vec4(newPosition, 1.0); \n     } else {\n       vec4 clipPosition = projectionMatrix * modelViewMatrix * tPosition;\n       vec4 clipNormal = projectionMatrix * modelViewMatrix * tNormal;\n       vec2 offset = normalize(clipNormal.xy) * thickness / size * clipPosition.w * 2.0;\n       clipPosition.xy += offset;\n       gl_Position = clipPosition;\n     }\n   }",`uniform vec3 color;\n   uniform float opacity;\n   void main(){\n     gl_FragColor = vec4(color, opacity);\n     #include <tonemapping_fragment>\n     #include <${c.version>=154?"colorspace_fragment":"encodings_fragment"}>\n   }`);exports.Outlines=function({color:e="black",opacity:n=1,transparent:t=!1,screenspace:r=!1,toneMapped:c=!0,polygonOffset:s=!1,polygonOffsetFactor:a=0,renderOrder:p=0,thickness:m=.05,angle:g=Math.PI,...v}){const x=d.useRef(),[y]=d.useState((()=>new f({side:u.BackSide}))),{gl:h}=i.useThree(),_=h.getDrawingBufferSize(new u.Vector2);d.useMemo((()=>i.extend({OutlinesMaterial:f})),[]);const M=d.useRef(0),b=d.useRef();return d.useLayoutEffect((()=>{const e=x.current;if(!e)return;const n=e.parent;if(n&&n.geometry&&(M.current!==g||b.current!==n.geometry)){var t;M.current=g,b.current=n.geometry;let r=null==(t=e.children)?void 0:t[0];r&&(g&&r.geometry.dispose(),e.remove(r)),n.skeleton?(r=new u.SkinnedMesh,r.material=y,r.bind(n.skeleton,n.bindMatrix),e.add(r)):n.isInstancedMesh?(r=new u.InstancedMesh(n.geometry,y,n.count),r.instanceMatrix=n.instanceMatrix,e.add(r)):(r=new u.Mesh,r.material=y,e.add(r)),r.geometry=g?o.toCreasedNormals(n.geometry,g):n.geometry}})),d.useLayoutEffect((()=>{const o=x.current;if(!o)return;const l=o.children[0];l&&(l.renderOrder=p,i.applyProps(l.material,{transparent:t,thickness:m,color:e,opacity:n,size:_,screenspace:r,toneMapped:c,polygonOffset:s,polygonOffsetFactor:a}))})),d.useEffect((()=>()=>{const e=x.current;if(!e)return;const n=e.children[0];n&&(g&&n.geometry.dispose(),e.remove(n))}),[]),d.createElement("group",l.default({ref:x},v))};

package/core/Outlines.js

@@ -85,11 +85,12 @@ function Outlines({
     const parent = group.parent;
     if (parent && parent.geometry) {
       if (oldAngle.current !== angle || oldGeometry.current !== parent.geometry) {
+        var _group$children;
         oldAngle.current = angle;
         oldGeometry.current = parent.geometry;
 
         // Remove old mesh
-        let mesh = group.children[0];
+        let mesh = (_group$children = group.children) == null ? void 0 : _group$children[0];
         if (mesh) {
           if (angle) mesh.geometry.dispose();
           group.remove(mesh);