@react-three/drei 9.101.0 → 9.102.0

package/README.md

@@ -4887,6 +4887,8 @@ type CloudsProps = JSX.IntrinsicElements['group'] & {
   range?: number
   /** Which material it will override, default: MeshLambertMaterial */
   material?: typeof Material
+  /** Frustum culling, default: true */
+  frustumCulled?: boolean
 }
 
 type CloudProps = JSX.IntrinsicElements['group'] & {

package/core/Cloud.d.ts

@@ -33,6 +33,7 @@ type CloudsProps = JSX.IntrinsicElements['group'] & {
     limit?: number;
     range?: number;
     material?: typeof Material;
+    frustumCulled?: boolean;
 };
 type CloudProps = JSX.IntrinsicElements['group'] & {
     seed?: number;
@@ -51,7 +52,6 @@ type CloudProps = JSX.IntrinsicElements['group'] & {
     fade?: number;
     opacity?: number;
     color?: ReactThreeFiber.Color;
-    frustumCulled?: boolean;
 };
 export declare const Clouds: React.ForwardRefExoticComponent<Omit<CloudsProps, "ref"> & React.RefAttributes<Group>>;
 export declare const CloudInstance: React.ForwardRefExoticComponent<Omit<CloudProps, "ref"> & React.RefAttributes<Group>>;

package/core/Edges.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");function n(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}function u(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=n(e),a=u(r),o=u(t);const l=a.forwardRef((({userData:e,children:r,geometry:t,threshold:n=15,color:u="black",...l},s)=>{const f=a.useRef(null);return a.useLayoutEffect((()=>{const e=f.current.parent;if(e){const r=t||e.geometry;r===f.current.userData.currentGeom&&n===f.current.userData.currentThreshold||(f.current.userData.currentGeom=r,f.current.userData.currentThreshold=n,f.current.geometry=new o.EdgesGeometry(r,n))}})),a.useImperativeHandle(s,(()=>f.current)),a.createElement("lineSegments",c.default({ref:f,raycast:()=>null},l),r||a.createElement("lineBasicMaterial",{color:u}))}));exports.Edges=l;
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("@babel/runtime/helpers/extends"),t=require("react"),r=require("three"),n=require("three-stdlib"),i=require("@react-three/fiber");function u(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 c=u(e),o=a(t),s=a(r);const l=o.forwardRef((({children:e,threshold:t=15,color:r="black",opacity:u=1,linewidth:a,lineWidth:l,...d},f)=>{var m;const b=o.useRef(null);o.useImperativeHandle(f,(()=>b.current),[]);const h=o.useMemo((()=>new n.LineSegmentsGeometry),[]),p=o.useMemo((()=>new n.LineMaterial),[]),y=i.useThree((e=>e.size)),g=o.useRef(),v=o.useRef();return o.useLayoutEffect((()=>{const e=b.current.parent;if(e){const r=e.geometry;if(r!==g.current||t!==v.current){g.current=r,v.current=t;const e=new s.EdgesGeometry(r,t).attributes.position.array;b.current.geometry.setPositions(e),b.current.geometry.attributes.instanceStart.needsUpdate=!0,b.current.geometry.attributes.instanceEnd.needsUpdate=!0}}})),o.createElement("mesh",c.default({ref:b,raycast:()=>null},d),o.createElement("primitive",{object:h,attach:"geometry"}),o.createElement("primitive",{object:p,attach:"material",color:r,opacity:u,transparent:u<1,resolution:[y.width,y.height],linewidth:null!==(m=null!=a?a:l)&&void 0!==m?m:1}),e)}));exports.Edges=l;

package/core/Edges.d.ts

@@ -1,9 +1,13 @@
-import { ReactThreeFiber } from '@react-three/fiber';
 import * as THREE from 'three';
+import { LineSegmentsGeometry, LineMaterial } from 'three-stdlib';
 import { ForwardRefComponent } from '../helpers/ts-utils';
-type Props = JSX.IntrinsicElements['lineSegments'] & {
+import { type Color, type ThreeElements } from '@react-three/fiber';
+export type EdgesRef = THREE.Mesh<LineSegmentsGeometry, LineMaterial>;
+export interface EdgesProps extends Partial<ThreeElements['mesh']> {
+    color?: Color;
+    opacity?: number;
     threshold?: number;
-    color?: ReactThreeFiber.Color;
-};
-export declare const Edges: ForwardRefComponent<Props, THREE.LineSegments>;
-export {};
+    linewidth?: number;
+    lineWidth?: number;
+}
+export declare const Edges: ForwardRefComponent<EdgesProps, EdgesRef>;

package/core/Edges.js

@@ -1,34 +1,55 @@
 import _extends from '@babel/runtime/helpers/esm/extends';
 import * as React from 'react';
 import * as THREE from 'three';
+import { LineSegmentsGeometry, LineMaterial } from 'three-stdlib';
+import { useThree } from '@react-three/fiber';
 
 const Edges = /* @__PURE__ */React.forwardRef(({
-  userData,
   children,
-  geometry,
   threshold = 15,
   color = 'black',
+  opacity = 1,
+  linewidth,
+  lineWidth,
   ...props
 }, fref) => {
+  var _ref;
   const ref = React.useRef(null);
+  React.useImperativeHandle(fref, () => ref.current, []);
+  const geometry = React.useMemo(() => new LineSegmentsGeometry(), []);
+  const material = React.useMemo(() => new LineMaterial(), []);
+  const size = useThree(s => s.size);
+  const memoizedGeometry = React.useRef();
+  const memoizedThreshold = React.useRef();
   React.useLayoutEffect(() => {
     const parent = ref.current.parent;
     if (parent) {
-      const geom = geometry || parent.geometry;
-      if (geom !== ref.current.userData.currentGeom || threshold !== ref.current.userData.currentThreshold) {
-        ref.current.userData.currentGeom = geom;
-        ref.current.userData.currentThreshold = threshold;
-        ref.current.geometry = new THREE.EdgesGeometry(geom, threshold);
+      const geometry = parent.geometry;
+      if (geometry !== memoizedGeometry.current || threshold !== memoizedThreshold.current) {
+        memoizedGeometry.current = geometry;
+        memoizedThreshold.current = threshold;
+        const points = new THREE.EdgesGeometry(geometry, threshold).attributes.position.array;
+        ref.current.geometry.setPositions(points);
+        ref.current.geometry.attributes.instanceStart.needsUpdate = true;
+        ref.current.geometry.attributes.instanceEnd.needsUpdate = true;
       }
     }
   });
-  React.useImperativeHandle(fref, () => ref.current);
-  return /*#__PURE__*/React.createElement("lineSegments", _extends({
+  return /*#__PURE__*/React.createElement("mesh", _extends({
     ref: ref,
     raycast: () => null
-  }, props), children ? children : /*#__PURE__*/React.createElement("lineBasicMaterial", {
-    color: color
-  }));
+  }, props), /*#__PURE__*/React.createElement("primitive", {
+    object: geometry,
+    attach: "geometry"
+  }), /*#__PURE__*/React.createElement("primitive", {
+    object: material,
+    attach: "material",
+    color: color,
+    opacity: opacity,
+    transparent: opacity < 1,
+    resolution: [size.width, size.height],
+    linewidth: (_ref = linewidth !== null && linewidth !== void 0 ? linewidth : lineWidth) !== null && _ref !== void 0 ? _ref : 1
+  }), children);
 });
 
 export { Edges };