+ A polyline drawn between vertices. +
+ ++ This adds functionality beyond [page:Line], like arbitrary line width and changing width to be in world units. + It extends [page:LineSegments2], simplifying constructing segments from a chain of points. +
+ ++ [name] is an add-on, and therefore must be imported explicitly. + See [link:#manual/introduction/Installation Installation / Addons]. +
+ +
+ import { Line2 } from 'three/addons/lines/Line2.js';
+
+
+
+ [example:webgl_lines_fat WebGL / lines / fat ]
+ [example:webgl_lines_fat_raycasting WebGL / lines / fat / raycasting ]
+ [example:webgpu_lines_fat WebGPU / lines / fat / raycasting ]
+
+ [page:LineGeometry geometry] — (optional) Pair(s) of vertices representing each line segment.
+ [page:Material material] — (optional) Material for the line. Default is a [page:LineMaterial] with random color.
+
See the base [page:LineSegments2] class for common properties.
+ +Read-only flag to check if a given object is of type [name].
+ +See the base [page:LineSegments2] class for common methods.
+ ++ [link:https://github.com/mrdoob/three.js/blob/master/examples/jsm/lines/Line2.js examples/jsm/lines/Line2.js] +
+ + diff --git a/docs/examples/en/lines/LineGeometry.html b/docs/examples/en/lines/LineGeometry.html new file mode 100644 index 00000000000000..d1a3ff370e036d --- /dev/null +++ b/docs/examples/en/lines/LineGeometry.html @@ -0,0 +1,84 @@ + + + + ++ A chain of vertices, forming a polyline. +
+ ++ This is used in [page:Line2] to describe the shape. +
+ ++ [name] is an add-on, and therefore must be imported explicitly. + See [link:#manual/introduction/Installation Installation / Addons]. +
+ +
+ import { LineGeometry } from 'three/addons/lines/LineGeometry.js';
+
+
+
+ [example:webgl_lines_fat WebGL / lines / fat ]
+ [example:webgl_lines_fat_raycasting WebGL / lines / fat / raycasting ]
+ [example:webgpu_lines_fat WebGPU / lines / fat / raycasting ]
+
+ Creates a new geometry. + Call [page:LineGeometry.setPositions setPositions] to add segments. +
+ +See the base [page:LineSegmentsGeometry] class for common properties.
+ +Read-only flag to check if a given object is of type [name].
+ +See the base [page:LineSegmentsGeometry] class for common methods.
+ ++ Copy the vertex positions of a [page:Line] object into this geometry. + Assumes the source geometry is not using indices. +
+ ++ Replace the per-vertex colors. + Every triple describes a line vertex: `[r1, g1, b1]`. + The array can be an `Array` or `Float32Array`. +
+ ++ Replace the vertex positions with a new set. + The array can be an `Array` or `Float32Array`. + The length must be a multiple of three. +
+ ++ [link:https://github.com/mrdoob/three.js/blob/master/examples/jsm/lines/LineGeometry.js examples/jsm/lines/LineGeometry.js] +
+ + diff --git a/docs/examples/en/lines/LineMaterial.html b/docs/examples/en/lines/LineMaterial.html new file mode 100644 index 00000000000000..d988ad641df6d6 --- /dev/null +++ b/docs/examples/en/lines/LineMaterial.html @@ -0,0 +1,92 @@ + + + + ++ A material for drawing wireframe-style geometries. + Unlike [page:LineBasicMaterial], it supports arbitrary line widths and allows using world units instead of screen space units. + This material is used with [page:LineSegments2] and [page:Line2]. +
+ ++ Lines are always rendered with round caps and round joints. +
+ +
+ [example:webgl_lines_fat WebGL / lines / fat ]
+ [example:webgl_lines_fat_raycasting WebGL / lines / fat / raycasting ]
+ [example:webgl_lines_fat_wireframe WebGL / lines / fat / wireframe ]
+ [example:webgpu_lines_fat WebGPU / lines / fat / raycasting ]
+
+ [page:Object parameters] - (optional) an object with one or more properties defining the material's appearance. + Any property of the material (including any property inherited from [page:ShaderMaterial]) can be passed in here. +
+ ++ The exception is the property [page:Hexadecimal color], which can be passed in as a number or hexadecimal string and is `0xffffff` (white) by default. + [page:Color.set]( color ) is called internally. +
+ +See the base [page:ShaderMaterial] class for common properties.
+ +[page:Color] of the material, by default set to white (0xffffff).
+ +Whether the line is dashed, or solid. Default is `false`.
+ +Where in the dash cycle the dash starts. Default is `0`.
+ +The scale of the dashes and gaps. Default is `1`.
+ +The size of the dash. Default is `1`.
+ +The size of the gap. Default is `1`.
+ +Controls line thickness. Default is `1`.
+ ++ The size of the viewport, in screen pixels. + This must be kept updated to make screen-space rendering accurate. + The [page:LineSegments2.onBeforeRender] callback performs the update for visible objects. + Default is `[1, 1]`. +
+ ++ Whether the material's sizes (width, dash gaps) are in world units. + Default is `false` (screen space units.) +
+ +See the base [page:ShaderMaterial] class for common methods.
+ ++ [link:https://github.com/mrdoob/three.js/blob/master/examples/jsm/lines/LineMaterial.js examples/jsm/lines/LineMaterial.js] +
+ + diff --git a/docs/examples/en/lines/LineSegments2.html b/docs/examples/en/lines/LineSegments2.html new file mode 100644 index 00000000000000..ae32f9d8d2f17c --- /dev/null +++ b/docs/examples/en/lines/LineSegments2.html @@ -0,0 +1,69 @@ + + + + ++ A series of lines drawn between pairs of vertices. +
+ ++ This adds functionality beyond [page:LineSegments], like arbitrary line width and changing width to be in world units. + The [page:Line2] extends this object, forming a polyline instead of individual segments. +
+ ++ [name] is an add-on, and therefore must be imported explicitly. + See [link:#manual/introduction/Installation Installation / Addons]. +
+ +
+ import { LineSegments2 } from 'three/addons/lines/LineSegments2.js';
+
+
+ [example:webgl_lines_fat_raycasting WebGL / lines / fat / raycasting ]
+ +
+ [page:LineSegmentsGeometry geometry] — (optional) Pair(s) of vertices representing each line segment.
+ [page:Material material] — (optional) Material for the line. Default is a [page:LineMaterial] with random color.
+
See the base [page:Mesh] class for common properties.
+ +Read-only flag to check if a given object is of type [name].
+ +See the base [page:Mesh] class for common methods.
+ ++ Called by the framework to update the material's resolution property, needed for screen-scaled widths. +
++ If your object is not visible to a camera (e.g. by [page:Object3D.layers layers] or [page:Object3D.visible visible],) you must call this manually whenever the viewport changes. +
+ ++ [link:https://github.com/mrdoob/three.js/blob/master/examples/jsm/lines/LineSegments2.js examples/jsm/lines/LineSegments2.js] +
+ + diff --git a/docs/examples/en/lines/LineSegmentsGeometry.html b/docs/examples/en/lines/LineSegmentsGeometry.html new file mode 100644 index 00000000000000..56e81af1859ec7 --- /dev/null +++ b/docs/examples/en/lines/LineSegmentsGeometry.html @@ -0,0 +1,103 @@ + + + + ++ A series of vertex pairs, forming line segments. +
+ ++ This is used in [page:LineSegments2] to describe the shape. +
+ ++ [name] is an add-on, and therefore must be imported explicitly. + See [link:#manual/introduction/Installation Installation / Addons]. +
+ +
+ import { LineSegmentsGeometry } from 'three/addons/lines/LineSegmentsGeometry.js';
+
+
+ [example:webgl_lines_fat_raycasting WebGL / lines / fat / raycasting ]
+ ++ Creates a new geometry. + Call [page:LineSegmentsGeometry.setPositions setPositions] to add segments. +
+ +See the base [page:InstancedBufferGeometry] class for common properties.
+ +Read-only flag to check if a given object is of type [name].
+ +See the base [page:Mesh] class for common methods.
+ ++ Copy the vertex positions of an edge geometry into this geometry. +
+ ++ Copy the vertex positions of a [page:LineSegments] object into this geometry. + Assumes the source geometry is not using indices. +
+ ++ Copy the vertex positions of a mesh object into this geometry. +
+ ++ Copy the vertex positions of a wireframe geometry into this geometry. +
+ ++ Replace the per-vertex colors. + Every sixtuple describes a segment: `[r1, g1, b1, r2, g2, b2]`. + The array can be an `Array` or `Float32Array`. +
+ ++ Replace the vertex positions with a new set. + The array can be an `Array` or `Float32Array`. + The length must be a multiple of six. +
++ See also [page:LineSegmentsGeometry.positions positions]. +
+ ++ Unimplemented. +
+ ++ [link:https://github.com/mrdoob/three.js/blob/master/examples/jsm/lines/LineSegmentsGeometry.js examples/jsm/lines/LineSegmentsGeometry.js] +
+ + diff --git a/docs/list.json b/docs/list.json index 60293ad3703986..81426149a26793 100644 --- a/docs/list.json +++ b/docs/list.json @@ -362,6 +362,14 @@ "LightProbeGenerator": "examples/en/lights/LightProbeGenerator" }, + "Lines": { + "Line2": "examples/en/lines/Line2", + "LineGeometry": "examples/en/lines/LineGeometry", + "LineMaterial": "examples/en/lines/LineMaterial", + "LineSegments2": "examples/en/lines/LineSegments2", + "LineSegmentsGeometry": "examples/en/lines/LineSegmentsGeometry" + }, + "Loaders": { "3DMLoader": "examples/en/loaders/3DMLoader", "DRACOLoader": "examples/en/loaders/DRACOLoader", @@ -433,7 +441,7 @@ "SceneUtils": "examples/en/utils/SceneUtils", "SkeletonUtils": "examples/en/utils/SkeletonUtils" }, - + "WebXR": { "XREstimatedLight": "examples/en/webxr/XREstimatedLight" } @@ -1367,7 +1375,7 @@ "TrackballControls": "examples/ko/controls/TrackballControls", "TransformControls": "examples/ko/controls/TransformControls" }, - + "WebXR": { "XREstimatedLight": "examples/ko/webxr/XREstimatedLight" }