@react-three/drei 9.52.6 → 9.53.1

package/README.md

@@ -787,13 +787,14 @@ A triangle that fills the screen, ideal for full-screen fragment shader work (ra
 
 [![](https://img.shields.io/badge/-storybook-%23ff69b4)](https://drei.vercel.app/?path=/story/abstractions-line--basic-line)
 
-Renders a THREE.Line2.
+Renders a THREE.Line2 or THREE.LineSegments2 (depending on the value of `segments`).
 
 ```jsx
 <Line
   points={[[0, 0, 0], ...]}       // Array of points, Array<Vector3 | Vector2 | [number, number, number] | [number, number] | number>
   color="black"                   // Default
   lineWidth={1}                   // In pixels (default)
+  segments                        // If true, renders a THREE.LineSegments2. Otherwise, renders a THREE.Line2
   dashed={false}                  // Default
   vertexColors={[[0, 0, 0], ...]} // Optional array of RGB values for each point
   {...lineProps}                  // All THREE.Line2 props are valid

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 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 u=c.forwardRef((function({points:e,color:t="black",vertexColors:o,linewidth:a,lineWidth:u,dashed:l,...f},d){const h=n.useThree((e=>e.size)),[p]=c.useState((()=>new i.Line2)),[b]=c.useState((()=>new i.LineMaterial)),m=c.useMemo((()=>{const t=new i.LineGeometry,n=e.map((e=>{const t=Array.isArray(e);return e instanceof r.Vector3?[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,o]);return c.useLayoutEffect((()=>{p.computeLineDistances()}),[e,p]),c.useLayoutEffect((()=>{l?b.defines.USE_DASH="":delete b.defines.USE_DASH,b.needsUpdate=!0}),[l,b]),c.useEffect((()=>()=>m.dispose()),[m]),c.createElement("primitive",s.default({object:p,ref:d},f),c.createElement("primitive",{object:m,attach:"geometry"}),c.createElement("primitive",s.default({object:b,attach:"material",color:t,vertexColors:Boolean(o),resolution:[h.width,h.height],linewidth:null!=a?a:u,dashed:l},f)))}));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 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.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;

package/core/Line.d.ts

@@ -1,12 +1,13 @@
 import * as React from 'react';
 import { Vector2, Vector3, Color, ColorRepresentation } from 'three';
 import { ReactThreeFiber } from '@react-three/fiber';
-import { LineMaterial, LineMaterialParameters, Line2 } from 'three-stdlib';
+import { LineMaterial, LineMaterialParameters, Line2, LineSegments2 } from 'three-stdlib';
 export declare type LineProps = {
     points: Array<Vector3 | Vector2 | [number, number, number] | [number, number] | number>;
     vertexColors?: Array<Color | [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'> & {
     color?: ColorRepresentation;
 };
-export declare const Line: React.ForwardRefExoticComponent<Pick<LineProps, "visible" | "attach" | "children" | "key" | "onUpdate" | "position" | "up" | "scale" | "rotation" | "matrix" | "quaternion" | "layers" | "dispose" | "type" | "id" | "uuid" | "name" | "parent" | "modelViewMatrix" | "normalMatrix" | "matrixWorld" | "matrixAutoUpdate" | "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" | "getWorldPosition" | "getWorldQuaternion" | "getWorldScale" | "getWorldDirection" | "raycast" | "traverse" | "traverseVisible" | "traverseAncestors" | "updateMatrix" | "updateMatrixWorld" | "updateWorldMatrix" | "toJSON" | "clone" | "copy" | "addEventListener" | "hasEventListener" | "removeEventListener" | "dispatchEvent" | "color" | keyof import("@react-three/fiber/dist/declarations/src/core/events").EventHandlers | "material" | "geometry" | "blending" | "transparent" | "dashed" | "points" | "fog" | "alphaTest" | "alphaToCoverage" | "blendDst" | "blendDstAlpha" | "blendEquation" | "blendEquationAlpha" | "blendSrc" | "blendSrcAlpha" | "clipIntersection" | "clippingPlanes" | "clipShadows" | "colorWrite" | "defines" | "depthFunc" | "depthTest" | "depthWrite" | "stencilWrite" | "stencilFunc" | "stencilRef" | "stencilWriteMask" | "stencilFuncMask" | "stencilFail" | "stencilZFail" | "stencilZPass" | "isMaterial" | "needsUpdate" | "opacity" | "polygonOffset" | "polygonOffsetFactor" | "polygonOffsetUnits" | "precision" | "premultipliedAlpha" | "dithering" | "side" | "shadowSide" | "toneMapped" | "vertexColors" | "version" | "onBeforeCompile" | "customProgramCacheKey" | "setValues" | "morphTargetInfluences" | "morphTargetDictionary" | "isMesh" | "updateMorphTargets" | "computeLineDistances" | "uniforms" | "vertexShader" | "fragmentShader" | "linewidth" | "wireframe" | "wireframeLinewidth" | "lights" | "clipping" | "derivatives" | "extensions" | "defaultAttributeValues" | "index0AttributeName" | "uniformsNeedUpdate" | "glslVersion" | "isShaderMaterial" | "dashSize" | "gapSize" | "format" | "dashScale" | "dashOffset" | "resolution" | "worldUnits" | "isLine2" | "isLineSegments2" | "isLineMaterial" | "lineWidth"> & React.RefAttributes<Line2>>;
+export declare const Line: React.ForwardRefExoticComponent<Pick<LineProps, "visible" | "attach" | "children" | "key" | "onUpdate" | "position" | "up" | "scale" | "rotation" | "matrix" | "quaternion" | "layers" | "dispose" | "type" | "id" | "uuid" | "name" | "parent" | "modelViewMatrix" | "normalMatrix" | "matrixWorld" | "matrixAutoUpdate" | "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" | "getWorldPosition" | "getWorldQuaternion" | "getWorldScale" | "getWorldDirection" | "raycast" | "traverse" | "traverseVisible" | "traverseAncestors" | "updateMatrix" | "updateMatrixWorld" | "updateWorldMatrix" | "toJSON" | "clone" | "copy" | "addEventListener" | "hasEventListener" | "removeEventListener" | "dispatchEvent" | "color" | keyof import("@react-three/fiber/dist/declarations/src/core/events").EventHandlers | "material" | "geometry" | "blending" | "transparent" | "dashed" | "points" | "fog" | "alphaTest" | "alphaToCoverage" | "blendDst" | "blendDstAlpha" | "blendEquation" | "blendEquationAlpha" | "blendSrc" | "blendSrcAlpha" | "clipIntersection" | "clippingPlanes" | "clipShadows" | "colorWrite" | "defines" | "depthFunc" | "depthTest" | "depthWrite" | "stencilWrite" | "stencilFunc" | "stencilRef" | "stencilWriteMask" | "stencilFuncMask" | "stencilFail" | "stencilZFail" | "stencilZPass" | "isMaterial" | "needsUpdate" | "opacity" | "polygonOffset" | "polygonOffsetFactor" | "polygonOffsetUnits" | "precision" | "premultipliedAlpha" | "dithering" | "side" | "shadowSide" | "toneMapped" | "vertexColors" | "version" | "onBeforeCompile" | "customProgramCacheKey" | "setValues" | "morphTargetInfluences" | "morphTargetDictionary" | "isMesh" | "updateMorphTargets" | "computeLineDistances" | "uniforms" | "vertexShader" | "fragmentShader" | "linewidth" | "wireframe" | "wireframeLinewidth" | "lights" | "clipping" | "derivatives" | "extensions" | "defaultAttributeValues" | "index0AttributeName" | "uniformsNeedUpdate" | "glslVersion" | "isShaderMaterial" | "dashSize" | "gapSize" | "format" | "dashScale" | "dashOffset" | "resolution" | "worldUnits" | "isLine2" | "isLineSegments2" | "isLineMaterial" | "lineWidth" | "segments"> & React.RefAttributes<Line2 | LineSegments2>>;

package/core/Line.js

@@ -2,7 +2,7 @@ import _extends from '@babel/runtime/helpers/esm/extends';
 import * as React from 'react';
 import { Vector3, Vector2, Color } from 'three';
 import { useThree } from '@react-three/fiber';
-import { Line2, LineMaterial, LineGeometry } from 'three-stdlib';
+import { LineSegments2, Line2, LineMaterial, LineSegmentsGeometry, LineGeometry } from 'three-stdlib';
 
 const Line = /*#__PURE__*/React.forwardRef(function Line({
   points,
@@ -10,14 +10,15 @@ const Line = /*#__PURE__*/React.forwardRef(function Line({
   vertexColors,
   linewidth,
   lineWidth,
+  segments,
   dashed,
   ...rest
 }, ref) {
   const size = useThree(state => state.size);
-  const [line2] = React.useState(() => new Line2());
+  const line2 = React.useMemo(() => segments ? new LineSegments2() : new Line2(), [segments]);
   const [lineMaterial] = React.useState(() => new LineMaterial());
   const lineGeom = React.useMemo(() => {
-    const geom = new LineGeometry();
+    const geom = segments ? new LineSegmentsGeometry() : new LineGeometry();
     const pValues = points.map(p => {
       const isArray = Array.isArray(p);
       return p instanceof Vector3 ? [p.x, p.y, p.z] : p instanceof Vector2 ? [p.x, p.y, 0] : isArray && p.length === 3 ? [p[0], p[1], p[2]] : isArray && p.length === 2 ? [p[0], p[1], 0] : p;
@@ -30,7 +31,7 @@ const Line = /*#__PURE__*/React.forwardRef(function Line({
     }
 
     return geom;
-  }, [points, vertexColors]);
+  }, [points, segments, vertexColors]);
   React.useLayoutEffect(() => {
     line2.computeLineDistances();
   }, [points, line2]);