@react-three/drei 9.62.3 → 9.63.0

package/README.md

@@ -1999,6 +1999,10 @@ return <Stats parent={parent} />
 
 [![](https://img.shields.io/badge/-storybook-%23ff69b4)](https://drei.vercel.app/?path=/story/staging-wireframe--wireframe-st)
 
+<p>
+  <a href="https://codesandbox.io/s/2572o5"><img width="20%" src="https://codesandbox.io/api/v1/sandboxes/2572o5/screenshot.png" alt="Demo"/></a>
+</p>
+
 Renders an Antialiased, shader based wireframe on or around a geometry.
 
 ```jsx

package/core/Decal.cjs.js

@@ -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"),o=require("three-stdlib");function a(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 s=a(e),c=i(t),l=i(r);function u(e=[0,0,0]){return function(e){return Array.isArray(e)}(e)?e:e instanceof l.Vector3||e instanceof l.Euler?[e.x,e.y,e.z]:[e,e,e]}exports.Decal=function({debug:e,mesh:t,children:r,position:a,rotation:i,scale:f,...p}){const m=c.useRef(null),y=c.useRef(null);return c.useLayoutEffect((()=>{const e=(null==t?void 0:t.current)||m.current.parent,r=m.current;if(!(e instanceof l.Mesh))throw new Error('Decal must have a Mesh as parent or specify its "mesh" prop');const s={position:new l.Vector3,rotation:new l.Euler,scale:new l.Vector3(1,1,1)};if(e){n.applyProps(s,{position:a,scale:f});const t=e.matrixWorld.clone();if(e.matrixWorld.identity(),i&&"number"!=typeof i)n.applyProps(s,{rotation:i});else{const t=new l.Object3D;t.position.copy(s.position),t.lookAt(e.position),"number"==typeof i&&t.rotateZ(i),n.applyProps(s,{rotation:t.rotation})}return r.geometry=new o.DecalGeometry(e,s.position,s.rotation,s.scale),y.current&&n.applyProps(y.current,s),e.matrixWorld=t,()=>{r.geometry.dispose()}}}),[t,...u(a),...u(f),...u(i)]),c.createElement("mesh",{ref:m},r||c.createElement("meshStandardMaterial",s.default({transparent:!0,polygonOffset:!0,polygonOffsetFactor:-10},p)),e&&c.createElement("mesh",{ref:y},c.createElement("boxGeometry",null),c.createElement("meshNormalMaterial",{wireframe:!0}),c.createElement("axesHelper",null)))};
+"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"),o=require("three-stdlib");function a(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 s=a(e),c=i(t),l=i(r);function u(e=[0,0,0]){return function(e){return Array.isArray(e)}(e)?e:e instanceof l.Vector3||e instanceof l.Euler?[e.x,e.y,e.z]:[e,e,e]}const f=c.forwardRef((function({debug:e,mesh:t,children:r,position:a,rotation:i,scale:f,...p},m){const y=c.useRef(null);c.useImperativeHandle(m,(()=>y.current));const d=c.useRef(null);return c.useLayoutEffect((()=>{const e=(null==t?void 0:t.current)||y.current.parent,r=y.current;if(!(e instanceof l.Mesh))throw new Error('Decal must have a Mesh as parent or specify its "mesh" prop');const s={position:new l.Vector3,rotation:new l.Euler,scale:new l.Vector3(1,1,1)};if(e){n.applyProps(s,{position:a,scale:f});const t=e.matrixWorld.clone();if(e.matrixWorld.identity(),i&&"number"!=typeof i)n.applyProps(s,{rotation:i});else{const t=new l.Object3D;t.position.copy(s.position),t.lookAt(e.position),"number"==typeof i&&t.rotateZ(i),n.applyProps(s,{rotation:t.rotation})}return r.geometry=new o.DecalGeometry(e,s.position,s.rotation,s.scale),d.current&&n.applyProps(d.current,s),e.matrixWorld=t,()=>{r.geometry.dispose()}}}),[t,...u(a),...u(f),...u(i)]),c.createElement("mesh",{ref:y},r||c.createElement("meshStandardMaterial",s.default({transparent:!0,polygonOffset:!0,polygonOffsetFactor:-10},p)),e&&c.createElement("mesh",{ref:d},c.createElement("boxGeometry",null),c.createElement("meshNormalMaterial",{wireframe:!0}),c.createElement("axesHelper",null)))}));exports.Decal=f;

package/core/Decal.d.ts

@@ -1,7 +1,7 @@
 import * as React from 'react';
 import * as THREE from 'three';
 import * as FIBER from '@react-three/fiber';
-declare type DecalProps = Omit<JSX.IntrinsicElements['meshStandardMaterial'], 'children'> & {
+export declare type DecalProps = Omit<JSX.IntrinsicElements['meshStandardMaterial'], 'children'> & {
     debug?: boolean;
     mesh?: React.MutableRefObject<THREE.Mesh>;
     position?: FIBER.Vector3;
@@ -10,5 +10,4 @@ declare type DecalProps = Omit<JSX.IntrinsicElements['meshStandardMaterial'], 'c
     map?: THREE.Texture;
     children?: React.ReactNode;
 };
-export declare function Decal({ debug, mesh, children, position, rotation, scale, ...props }: DecalProps): JSX.Element;
-export {};
+export declare const Decal: React.ForwardRefExoticComponent<Pick<DecalProps, "attach" | "args" | "children" | "key" | "onUpdate" | "position" | "scale" | "rotation" | "mesh" | keyof THREE.MeshStandardMaterial | "debug"> & React.RefAttributes<THREE.Mesh<THREE.BufferGeometry, THREE.Material | THREE.Material[]>>>;

package/core/Decal.js

@@ -18,7 +18,7 @@ function vecToArray(vec = [0, 0, 0]) {
   }
 }
 
-function Decal({
+const Decal = /*#__PURE__*/React.forwardRef(function Decal({
   debug,
   mesh,
   children,
@@ -26,8 +26,9 @@ function Decal({
   rotation,
   scale,
   ...props
-}) {
+}, forwardRef) {
   const ref = React.useRef(null);
+  React.useImperativeHandle(forwardRef, () => ref.current);
   const helper = React.useRef(null);
   React.useLayoutEffect(() => {
     const parent = (mesh == null ? void 0 : mesh.current) || ref.current.parent;
@@ -86,6 +87,6 @@ function Decal({
   }, /*#__PURE__*/React.createElement("boxGeometry", null), /*#__PURE__*/React.createElement("meshNormalMaterial", {
     wireframe: true
   }), /*#__PURE__*/React.createElement("axesHelper", null)));
-}
+});
 
 export { Decal };