Implement LineLoop using LINE_LOOP rendering

mrdoob · Jan 24, 2017 · 246393e · 246393e
1 parent 48b9efe
commit 246393e
Show file tree

Hide file tree

Showing 7 changed files with 95 additions and 0 deletions.
diff --git a/docs/api/objects/LineLoop.html b/docs/api/objects/LineLoop.html
@@ -0,0 +1,55 @@
+<!DOCTYPE html>
+<html lang="en">
+	<head>
+		<meta charset="utf-8" />
+		<base href="../../" />
+		<script src="list.js"></script>
+		<script src="page.js"></script>
+		<link type="text/css" rel="stylesheet" href="page.css" />
+	</head>
+	<body>
+		[page:Object3D] &rarr; [page:Line] &rarr;
+
+		<h1>[name]</h1>
+
+		<div class="desc">
+			A continuous line that connects back to the start.<br /><br />
+
+			This is nearly the same	as [page:Line]; the only difference is that it is rendered using
+			[link:https://developer.mozilla.org/en-US/docs/Web/API/WebGLRenderingContext/drawElements gl.LINE_LOOP]
+			instead of [link:https://developer.mozilla.org/en-US/docs/Web/API/WebGLRenderingContext/drawElements gl.LINE_STRIP],
+			which draws a straight line to the next vertex, and connects the last vertex back to the first.
+		</div>
+
+
+		<h2>Constructor</h2>
+
+		<h3>[name]( [page:Geometry geometry], [page:Material material] )</h3>
+
+		<div>
+		[page:Geometry geometry] — List of vertices representing points on the line loop.<br />
+		[page:Material material] — Material for the line. Default is [page:LineBasicMaterial LineBasicMaterial].
+		</div>
+
+		<div>If no material is supplied, a randomized line material will be created and assigned to the object.</div>
+
+
+		<h2>Properties</h2>
+		<div>See the base [page:Line] class for common properties.</div>
+
+		<h3>[property:Boolean isLineLoop]</h3>
+		<div>
+			Used to check whether this or derived classes are line loops. Default is *true*.<br /><br />
+
+			You should not change this, as it used internally for optimisation.
+		</div>
+
+
+		<h2>Methods</h2>
+		<div>See the base [page:Line] class for common methods.</div>
+
+		<h2>Source</h2>
+
+		[link:https://github.com/mrdoob/three.js/blob/master/src/[path].js src/[path].js]
+	</body>
+</html>
diff --git a/docs/list.js b/docs/list.js
@@ -286,6 +286,7 @@ var list = {
 			[ "Group", "api/objects/Group" ],
 			[ "LensFlare", "api/objects/LensFlare" ],
 			[ "Line", "api/objects/Line" ],
+			[ "LineLoop", "api/objects/LineLoop" ],
 			[ "LineSegments", "api/objects/LineSegments" ],
 			[ "LOD", "api/objects/LOD" ],
 			[ "Mesh", "api/objects/Mesh" ],

diff --git a/examples/js/loaders/GLTFLoader.js b/examples/js/loaders/GLTFLoader.js
@@ -1940,6 +1940,10 @@ THREE.GLTFLoader = ( function () {
 										child = new THREE.LineSegments( originalGeometry, material );
 										break;
 
+									case 'LineLoop':
+										child = new THREE.LineLoop( originalGeometry, material );
+										break;
+
 									case 'Line':
 										child = new THREE.Line( originalGeometry, material );
 										break;

diff --git a/src/Three.js b/src/Three.js
@@ -19,6 +19,7 @@ export { Skeleton } from './objects/Skeleton.js';
 export { Bone } from './objects/Bone.js';
 export { Mesh } from './objects/Mesh.js';
 export { LineSegments } from './objects/LineSegments.js';
+export { LineLoop } from './objects/LineLoop.js';
 export { Line } from './objects/Line.js';
 export { Points } from './objects/Points.js';
 export { Group } from './objects/Group.js';

diff --git a/src/loaders/ObjectLoader.js b/src/loaders/ObjectLoader.js
@@ -666,6 +666,12 @@ Object.assign( ObjectLoader.prototype, {
 
 					break;
 
+				case 'LineLoop':
+
+					object = new LineLoop( getGeometry( data.geometry ), getMaterial( data.material ) );
+
+					break;
+
 				case 'LineSegments':
 
 					object = new LineSegments( getGeometry( data.geometry ), getMaterial( data.material ) );

diff --git a/src/objects/LineLoop.js b/src/objects/LineLoop.js
@@ -0,0 +1,24 @@
+import { Line } from './Line';
+
+/**
+ * @author mgreter / http://github.com/mgreter
+ */
+
+function LineLoop( geometry, material ) {
+
+	Line.call( this, geometry, material );
+
+	this.type = 'LineLoop';
+
+}
+
+LineLoop.prototype = Object.assign( Object.create( Line.prototype ), {
+
+	constructor: LineLoop,
+
+	isLineLoop: true,
+
+} );
+
+
+export { LineLoop };
diff --git a/src/renderers/WebGLRenderer.js b/src/renderers/WebGLRenderer.js
@@ -855,6 +855,10 @@ function WebGLRenderer( parameters ) {
 
 				renderer.setMode( _gl.LINES );
 
+			} else if ( object.isLineLoop ) {
+
+				renderer.setMode( _gl.LINE_LOOP );
+
 			} else {
 
 				renderer.setMode( _gl.LINE_STRIP );