@react-three/drei 9.94.0 → 9.95.0

package/README.md

@@ -3623,6 +3623,7 @@ type HudProps = {
 
 <p>
   <a href="https://codesandbox.io/s/v5i9wl"><img width="20%" src="https://codesandbox.io/api/v1/sandboxes/v5i9wl/screenshot.png" alt="Demo"/></a>
+  <a href="https://codesandbox.io/s/r9w2ob"><img width="20%" src="https://codesandbox.io/api/v1/sandboxes/r9w2ob/screenshot.png" alt="Demo"/></a>
   <a href="https://codesandbox.io/s/bp6tmc"><img width="20%" src="https://codesandbox.io/api/v1/sandboxes/bp6tmc/screenshot.png" alt="Demo"/></a>
   <a href="https://codesandbox.io/s/1wmlew"><img width="20%" src="https://codesandbox.io/api/v1/sandboxes/1wmlew/screenshot.png" alt="Demo"/></a>
 </p>

package/core/Line.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"),i=require("three-stdlib");function o(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}function s(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 a=o(e),c=s(t);const u=c.forwardRef((function({points:e,color:t="black",vertexColors:o,linewidth:s,lineWidth:u,segments:l,dashed:f,...d},m){const h=n.useThree((e=>e.size)),p=c.useMemo((()=>l?new i.LineSegments2:new i.Line2),[l]),[b]=c.useState((()=>new i.LineMaterial)),y=c.useMemo((()=>{const t=l?new i.LineSegmentsGeometry:new i.LineGeometry,n=e.map((e=>{const t=Array.isArray(e);return e instanceof r.Vector3||e instanceof r.Vector4?[e.x,e.y,e.z]:e instanceof r.Vector2?[e.x,e.y,0]:t&&3===e.length?[e[0],e[1],e[2]]:t&&2===e.length?[e[0],e[1],0]:e}));if(t.setPositions(n.flat()),o){const e=o.map((e=>e instanceof r.Color?e.toArray():e));t.setColors(e.flat())}return t}),[e,l,o]);return c.useLayoutEffect((()=>{p.computeLineDistances()}),[e,p]),c.useLayoutEffect((()=>{f?b.defines.USE_DASH="":delete b.defines.USE_DASH,b.needsUpdate=!0}),[f,b]),c.useEffect((()=>()=>y.dispose()),[y]),c.createElement("primitive",a.default({object:p,ref:m},d),c.createElement("primitive",{object:y,attach:"geometry"}),c.createElement("primitive",a.default({object:b,attach:"material",color:t,vertexColors:Boolean(o),resolution:[h.width,h.height],linewidth:null!=s?s:u,dashed:f},d)))}));exports.Line=u;
+"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"),i=require("three-stdlib");function o(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 s=o(e),c=a(t);const l=c.forwardRef((function({points:e,color:t="black",vertexColors:o,linewidth:a,lineWidth:l,segments:u,dashed:f,...d},m){var h;const p=n.useThree((e=>e.size)),b=c.useMemo((()=>u?new i.LineSegments2:new i.Line2),[u]),[y]=c.useState((()=>new i.LineMaterial)),v=4===(null==o||null==(h=o[0])?void 0:h.length)?4:3,g=c.useMemo((()=>{const t=u?new i.LineSegmentsGeometry:new i.LineGeometry,n=e.map((e=>{const t=Array.isArray(e);return e instanceof r.Vector3||e instanceof r.Vector4?[e.x,e.y,e.z]:e instanceof r.Vector2?[e.x,e.y,0]:t&&3===e.length?[e[0],e[1],e[2]]:t&&2===e.length?[e[0],e[1],0]:e}));if(t.setPositions(n.flat()),o){const e=o.map((e=>e instanceof r.Color?e.toArray():e));t.setColors(e.flat(),v)}return t}),[e,u,o,v]);return c.useLayoutEffect((()=>{b.computeLineDistances()}),[e,b]),c.useLayoutEffect((()=>{f?y.defines.USE_DASH="":delete y.defines.USE_DASH,y.needsUpdate=!0}),[f,y]),c.useEffect((()=>()=>g.dispose()),[g]),c.createElement("primitive",s.default({object:b,ref:m},d),c.createElement("primitive",{object:g,attach:"geometry"}),c.createElement("primitive",s.default({object:y,attach:"material",color:t,vertexColors:Boolean(o),resolution:[p.width,p.height],linewidth:null!=a?a:l,dashed:f,transparent:4===v},d)))}));exports.Line=l;

package/core/Line.d.ts

@@ -4,7 +4,7 @@ import { LineMaterial, LineMaterialParameters, Line2, LineSegments2 } from 'thre
 import { ForwardRefComponent } from '../helpers/ts-utils';
 export type LineProps = {
     points: Array<Vector3 | Vector2 | [number, number, number] | [number, number] | number>;
-    vertexColors?: Array<Color | [number, number, number]>;
+    vertexColors?: Array<Color | [number, number, number] | [number, number, number, number]>;
     lineWidth?: number;
     segments?: boolean;
 } & Omit<LineMaterialParameters, 'vertexColors' | 'color'> & Omit<ReactThreeFiber.Object3DNode<Line2, typeof Line2>, 'args'> & Omit<ReactThreeFiber.Object3DNode<LineMaterial, [LineMaterialParameters]>, 'color' | 'vertexColors' | 'args'> & {

package/core/Line.js

@@ -14,9 +14,11 @@ const Line = /* @__PURE__ */React.forwardRef(function Line({
   dashed,
   ...rest
 }, ref) {
+  var _vertexColors$;
   const size = useThree(state => state.size);
   const line2 = React.useMemo(() => segments ? new LineSegments2() : new Line2(), [segments]);
   const [lineMaterial] = React.useState(() => new LineMaterial());
+  const itemSize = (vertexColors == null || (_vertexColors$ = vertexColors[0]) == null ? void 0 : _vertexColors$.length) === 4 ? 4 : 3;
   const lineGeom = React.useMemo(() => {
     const geom = segments ? new LineSegmentsGeometry() : new LineGeometry();
     const pValues = points.map(p => {
@@ -26,10 +28,10 @@ const Line = /* @__PURE__ */React.forwardRef(function Line({
     geom.setPositions(pValues.flat());
     if (vertexColors) {
       const cValues = vertexColors.map(c => c instanceof Color ? c.toArray() : c);
-      geom.setColors(cValues.flat());
+      geom.setColors(cValues.flat(), itemSize);
     }
     return geom;
-  }, [points, segments, vertexColors]);
+  }, [points, segments, vertexColors, itemSize]);
   React.useLayoutEffect(() => {
     line2.computeLineDistances();
   }, [points, line2]);
@@ -58,7 +60,8 @@ const Line = /* @__PURE__ */React.forwardRef(function Line({
     vertexColors: Boolean(vertexColors),
     resolution: [size.width, size.height],
     linewidth: linewidth !== null && linewidth !== void 0 ? linewidth : lineWidth,
-    dashed: dashed
+    dashed: dashed,
+    transparent: itemSize === 4
   }, rest)));
 });