Add triangle strip and line loop example and fix bufferAttribute componentType detection

examples/gltf_exporter.html

@@ -150,7 +150,7 @@
 
 				group1 = new THREE.Group();
 				group1.name = "Group";
-				scene1.add( group1 );
+				// scene1.add( group1 );
 
 				group2 = new THREE.Group();
 				group2.name = "subGroup";
@@ -159,14 +159,96 @@
 				object2 = new THREE.Mesh( new THREE.BoxBufferGeometry( 30, 30, 30 ), material );
 				object2.name = "Cube in group";
 				object2.position.set( 0, 100, 100 );
-				// group2.add( object2 );
+				group2.add( object2 );
+
+				// ---------------------------------
+				// Triangle Strip
+				// ---------------------------------
+				var geometry = new THREE.BufferGeometry();
+				var positions = new Float32Array( 6 * 3 );
+
+				positions[ 0 ] = 0;
+				positions[ 1 ] = 0;
+				positions[ 2 ] = 0;
+
+				positions[ 3 ] = 0;
+				positions[ 4 ] = 100;
+				positions[ 5 ] = 0;
+
+				positions[ 6 ] = 100;
+				positions[ 7 ] = 0;
+				positions[ 8 ] = 0;
+
+				positions[ 9 ] = 100;
+				positions[ 10 ] = 100;
+				positions[ 11 ] = 0;
+
+				positions[ 12 ] = 100;
+				positions[ 13 ] = 0;
+				positions[ 14 ] = 100;
+
+				positions[ 15 ] = 100;
+				positions[ 16 ] = 100;
+				positions[ 17 ] = 100;
+
+
+				geometry.addAttribute( 'position', new THREE.BufferAttribute( positions, 3 ) );
+				object = new THREE.Mesh( geometry, new THREE.MeshStandardMaterial( { color: 0xff00ff, side: THREE.DoubleSide } ) );
+				object.position.x = 150;
+				object.setDrawMode( THREE.TriangleStripDrawMode );
+				console.log(object);
+				console.log('>>>>', JSON.stringify(object));
+				scene1.add( object );
+
+
+				// ---------------------------------
+				// Line Strip
+				// ---------------------------------
+				var geometry = new THREE.BufferGeometry();
+				var numPoints = 100;
+				var positions = new Float32Array( numPoints * 3 );
+
+				for (var i = 0; i < numPoints; i++ ) {
+					positions[ i * 3 ] = i;
+					positions[ i * 3 + 1 ] = Math.sin( i / 2 ) * 20;
+					positions[ i * 3 + 2 ] = 0;
+				}
+
+				geometry.addAttribute( 'position', new THREE.BufferAttribute( positions, 3 ) );
+				object = new THREE.Line( geometry, new THREE.LineBasicMaterial( { color: 0xffff00 } ) );
+				object.position.x = -150;
+
+				scene1.add( object );
+
+
+				// ---------------------------------
+				// Line Loop
+				// ---------------------------------
+				var geometry = new THREE.BufferGeometry();
+				var numPoints = 5;
+				var radius = 100;
+				var positions = new Float32Array( numPoints * 3 );
+
+				for (var i = 0; i < numPoints; i++ ) {
+					var s = i * Math.PI * 2 / numPoints;
+					positions[ i * 3 ] = radius * Math.sin ( s );
+					positions[ i * 3 + 1 ] = radius * Math.cos ( s );
+					positions[ i * 3 + 2 ] = 0;
+				}
+
+				geometry.addAttribute( 'position', new THREE.BufferAttribute( positions, 3 ) );
+				object = new THREE.LineLoop( geometry, new THREE.LineBasicMaterial( { color: 0xffff00 } ) );
+				object.position.x = -100;
+
+				scene1.add( object );
+
 
 				// ---------------------------------
 				// Axis
 				// ---------------------------------
 				var axis = new THREE.AxisHelper(100);
 				axis.name = "AxisHelper";
-				// scene1.add( axis );
+				//scene1.add( axis );
 
 				// ---------------------------------
 				// Points
@@ -185,10 +267,7 @@
 				var pointsMaterial = new THREE.PointsMaterial( { color: 0xffff00 } );
 				var points = new THREE.Points( pointsGeo, pointsMaterial );
 				points.name = "Points";
-				scene1.add( points );
-
-
-
+				// scene1.add( points );
 
 				scene1.add( camera );
 

examples/js/exporters/GLTFExporter.js

@@ -172,9 +172,18 @@ THREE.GLTFExporter.prototype = {
 				'VEC4'
 			];
 
+			var componentType;
+
 			// Detect the component type of the attribute array (float, uint or ushort)
-			var componentType = attribute instanceof THREE.Float32BufferAttribute ? gl.FLOAT :
-				( attribute instanceof THREE.Uint32BufferAttribute ? gl.UNSIGNED_INT : gl.UNSIGNED_SHORT );
+			if ( attribute.array.constructor === Float32Array ) {
+				componentType = gl.FLOAT;
+			} else if ( attribute.array.constructor === Uint32Array ) {
+				componentType = gl.UNSIGNED_INT;
+			} else if ( attribute.array.constructor === Uint16Array ) {
+				componentType = gl.UNSIGNED_SHORT;
+			} else {
+				throw new Error( 'THREE.GLTF2Exporter: Unsupported bufferAttribute component type.' );
+			}
 
 			var minMax = getMinMax( attribute );
 			var bufferView = processBufferView( attribute, componentType );
@@ -421,15 +430,16 @@ THREE.GLTFExporter.prototype = {
 				mode = gl.POINTS;
 
 			} else {
+				console.log(mesh.drawMode, THREE.TrianglesDrawMode, THREE.TriangleStripDrawMode, THREE.TriangleFanDrawMode,gl.TRIANGLE_STRIP);
 
 				// @QUESTION Set mode = gl.LINES if material.wireframe = true ?
 				if ( mesh.drawMode === THREE.TriangleFanDrawMode ) {
 
-					mode = gl.TRIANGLES_FAN;
+					mode = gl.TRIANGLE_FAN;
 
 				} else if ( mesh.drawMode === THREE.TriangleStripDrawMode ) {
 
-					mode = gl.TRIANGLES_STRIP;
+					mode = gl.TRIANGLE_STRIP;
 
 				} else {
 
@@ -572,7 +582,7 @@ THREE.GLTFExporter.prototype = {
 			}
 
 			if ( object instanceof THREE.Mesh
-				|| object instanceof THREE.Line 
+				|| object instanceof THREE.Line
 				|| object instanceof THREE.Points ) {
 				gltfNode.mesh = processMesh( object );
 			} else if ( object instanceof THREE.Camera ) {