Home Explore Help
Sign In
javascript
/
three.js
mirror of https://github.com/tazdij/three.js.git
2
0
Fork 0
Files Issues 0 Wiki
Browse Source

Implement LineLoop using `LINE_LOOP` rendering

Marcel Greter 8 years ago
parent
48b9efec18
commit
246393ebf1
7 changed files with 95 additions and 0 deletions
Unified View Show Diff Stats
  1. 55 0
      docs/api/objects/LineLoop.html
  2. 1 0
      docs/list.js
  3. 4 0
      examples/js/loaders/GLTFLoader.js
  4. 1 0
      src/Three.js
  5. 6 0
      src/loaders/ObjectLoader.js
  6. 24 0
      src/objects/LineLoop.js
  7. 4 0
      src/renderers/WebGLRenderer.js

+ 55 - 0
docs/api/objects/LineLoop.html
View File 

@@ -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>

+ 1 - 0
docs/list.js
View File 

@@ -286,6 +286,7 @@ var list = {
 
 			[ "Group", "api/objects/Group" ],
 
 			[ "Group", "api/objects/Group" ],
 
 			[ "LensFlare", "api/objects/LensFlare" ],
 
 			[ "LensFlare", "api/objects/LensFlare" ],
 
 			[ "Line", "api/objects/Line" ],
 
 			[ "Line", "api/objects/Line" ],
 
+			[ "LineLoop", "api/objects/LineLoop" ],
 
 			[ "LineSegments", "api/objects/LineSegments" ],
 
 			[ "LineSegments", "api/objects/LineSegments" ],
 
 			[ "LOD", "api/objects/LOD" ],
 
 			[ "LOD", "api/objects/LOD" ],
 
 			[ "Mesh", "api/objects/Mesh" ],
 
 			[ "Mesh", "api/objects/Mesh" ],

+ 4 - 0
examples/js/loaders/GLTFLoader.js
View File 

@@ -1940,6 +1940,10 @@ THREE.GLTFLoader = ( function () {
 
 										child = new THREE.LineSegments( originalGeometry, material );
 
 										child = new THREE.LineSegments( originalGeometry, material );
 
 										break;
 
 										break;
 
 
 
+									case 'LineLoop':
 
+										child = new THREE.LineLoop( originalGeometry, material );
 
+										break;
 
+
 
 									case 'Line':
 
 									case 'Line':
 
 										child = new THREE.Line( originalGeometry, material );
 
 										child = new THREE.Line( originalGeometry, material );
 
 										break;
 
 										break;

+ 1 - 0
src/Three.js
View File 

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

+ 6 - 0
src/loaders/ObjectLoader.js
View File 

@@ -666,6 +666,12 @@ Object.assign( ObjectLoader.prototype, {
 
 
 
 					break;
 
 					break;
 
 
 
+				case 'LineLoop':
 
+
 
+					object = new LineLoop( getGeometry( data.geometry ), getMaterial( data.material ) );
 
+
 
+					break;
 
+
 
 				case 'LineSegments':
 
 				case 'LineSegments':
 
 
 
 					object = new LineSegments( getGeometry( data.geometry ), getMaterial( data.material ) );
 
 					object = new LineSegments( getGeometry( data.geometry ), getMaterial( data.material ) );

+ 24 - 0
src/objects/LineLoop.js
View File 

@@ -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 };

+ 4 - 0
src/renderers/WebGLRenderer.js
View File 

@@ -855,6 +855,10 @@ function WebGLRenderer( parameters ) {
 
 
 
 				renderer.setMode( _gl.LINES );
 
 				renderer.setMode( _gl.LINES );
 
 
 
+			} else if ( object.isLineLoop ) {
 
+
 
+				renderer.setMode( _gl.LINE_LOOP );
 
+
 
 			} else {
 
 			} else {
 
 
 
 				renderer.setMode( _gl.LINE_STRIP );
 
 				renderer.setMode( _gl.LINE_STRIP );