@react-three/drei 9.77.2 → 9.77.4

package/README.md

@@ -1618,19 +1618,21 @@ The decal box has to intersect the surface, otherwise it will not be visible. if
     position={[0, 0, 0]} // Position of the decal
     rotation={[0, 0, 0]} // Rotation of the decal (can be a vector or a degree in radians)
     scale={1} // Scale of the decal
+    polygonOffset
+    polygonOffsetFactor={-1} // The mesh should take precedence over the original
   >
     <meshBasicMaterial map={texture} />
   </Decal>
 </mesh>
 ```
 
-If you do not specify a material it will create a transparent meshStandardMaterial with a polygonOffsetFactor of -10 and all rest-props will be spread over it.
+If you do not specify a material it will create a transparent meshBasicMaterial with a polygonOffsetFactor of -10.
 
 ```jsx
 <mesh>
   <sphereGeometry />
   <meshBasicMaterial />
-  <Decal map={texture} roughness={0.5} />
+  <Decal map={texture} />
 </mesh>
 ```
 
@@ -1638,7 +1640,7 @@ If declarative composition is not possible, use the `mesh` prop to define the su
 
 ```js
 <Decal mesh={ref}>
-  <meshBasicMaterial map={texture} />
+  <meshBasicMaterial map={texture} polygonOffset polygonOffsetFactor={-1} />
 </Decal>
 ```
 

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

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';
-export declare type DecalProps = Omit<JSX.IntrinsicElements['meshStandardMaterial'], 'children'> & {
+export declare type DecalProps = Omit<JSX.IntrinsicElements['mesh'], 'children'> & {
     debug?: boolean;
     mesh?: React.MutableRefObject<THREE.Mesh>;
     position?: FIBER.Vector3;
@@ -9,5 +9,7 @@ export declare type DecalProps = Omit<JSX.IntrinsicElements['meshStandardMateria
     scale?: FIBER.Vector3;
     map?: THREE.Texture;
     children?: React.ReactNode;
+    polygonOffsetFactor?: number;
+    depthTest?: boolean;
 };
-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[]>>>;
+export declare const Decal: React.ForwardRefExoticComponent<Pick<DecalProps, "visible" | "attach" | "args" | "children" | "key" | "onUpdate" | "position" | "up" | "scale" | "rotation" | "matrix" | "quaternion" | "layers" | "dispose" | "type" | "id" | "uuid" | "name" | "parent" | "modelViewMatrix" | "normalMatrix" | "matrixWorld" | "matrixAutoUpdate" | "matrixWorldAutoUpdate" | "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" | "getObjectsByProperty" | "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" | "map" | "mesh" | "depthTest" | "polygonOffsetFactor" | "morphTargetInfluences" | "morphTargetDictionary" | "isMesh" | "updateMorphTargets" | "getVertexPosition" | "debug"> & React.RefAttributes<THREE.Mesh<THREE.BufferGeometry, THREE.Material | THREE.Material[]>>>;

package/core/Decal.js

@@ -20,6 +20,9 @@ function vecToArray(vec = [0, 0, 0]) {
 
 const Decal = /*#__PURE__*/React.forwardRef(function Decal({
   debug,
+  depthTest = false,
+  polygonOffsetFactor = -10,
+  map,
   mesh,
   children,
   position,
@@ -81,14 +84,16 @@ const Decal = /*#__PURE__*/React.forwardRef(function Decal({
         target.geometry.dispose();
       };
     }
-  }, [mesh, ...vecToArray(position), ...vecToArray(scale), ...vecToArray(rotation)]);
-  return /*#__PURE__*/React.createElement("mesh", {
-    ref: ref
-  }, children || /*#__PURE__*/React.createElement("meshStandardMaterial", _extends({
-    transparent: true,
-    polygonOffset: true,
-    polygonOffsetFactor: -10
-  }, props)), debug && /*#__PURE__*/React.createElement("mesh", {
+  }, [mesh, ...vecToArray(position), ...vecToArray(scale), ...vecToArray(rotation)]); // <meshStandardMaterial transparent polygonOffset polygonOffsetFactor={-10} {...props} />}
+
+  return /*#__PURE__*/React.createElement("mesh", _extends({
+    ref: ref,
+    "material-transparent": true,
+    "material-polygonOffset": true,
+    "material-polygonOffsetFactor": polygonOffsetFactor,
+    "material-depthTest": depthTest,
+    "material-map": map
+  }, props), children, debug && /*#__PURE__*/React.createElement("mesh", {
     ref: helper
   }, /*#__PURE__*/React.createElement("boxGeometry", null), /*#__PURE__*/React.createElement("meshNormalMaterial", {
     wireframe: true

package/core/useHelper.cjs.js

@@ -1 +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 u=Object.getOwnPropertyDescriptor(e,t);Object.defineProperty(r,t,u.get?u:{enumerable:!0,get:function(){return e[t]}})}})),r.default=e,Object.freeze(r)}var u=t(e);exports.useHelper=function(e,t,...n){const c=u.useRef(),o=r.useThree((e=>e.scene));return u.useLayoutEffect((()=>{let r;if(e&&null!=e&&e.current&&t&&(c.current=r=new t(e.current,...n)),r)return o.add(r),()=>{c.current=void 0,o.remove(r),null==r.dispose||r.dispose()}}),[o,t,e,...n]),r.useFrame((()=>{var e;null==(e=c.current)||null==e.update||e.update()})),c};
+"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 u=Object.getOwnPropertyDescriptor(e,t);Object.defineProperty(r,t,u.get?u:{enumerable:!0,get:function(){return e[t]}})}})),r.default=e,Object.freeze(r)}var u=t(e);exports.useHelper=function(e,t,...n){const c=u.useRef(),a=r.useThree((e=>e.scene));return u.useLayoutEffect((()=>{let r;if(e&&null!=e&&e.current&&t&&(c.current=r=new t(e.current,...n)),r)return r.traverse((e=>e.raycast=()=>null)),a.add(r),()=>{c.current=void 0,a.remove(r),null==r.dispose||r.dispose()}}),[a,t,e,...n]),r.useFrame((()=>{var e;null==(e=c.current)||null==e.update||e.update()})),c};

package/core/useHelper.js

@@ -12,6 +12,8 @@ function useHelper(object3D, helperConstructor, ...args) {
     }
 
     if (currentHelper) {
+      // Prevent the helpers from blocking rays
+      currentHelper.traverse(child => child.raycast = () => null);
       scene.add(currentHelper);
       return () => {
         helper.current = undefined;