Implementation for Flat End Caps on Tube Geometry

LICENSE

@@ -0,0 +1,21 @@
+The MIT License
+
+Copyright (c) 2010-present shawn0326
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in
+all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
+THE SOFTWARE.

build/three.path.js

@@ -614,7 +614,14 @@
 		 */
 		update(pathPointList, options = {}) {
 			const generateUv2 = !!this.getAttribute('uv2');
-			const vertexData = generateTubeVertexData(pathPointList, options, generateUv2);
+            const vertexData = generateTubeVertexData(pathPointList, {
+                radius: options.radius || 0.1,
+                progress: options.progress !== undefined ? options.progress : 1,
+                radialSegments: options.radialSegments || 8,
+                startRad: options.startRad || 0,
+                generateFlatStartCap: options.generateFlatStartCap !== undefined ? options.generateFlatStartCap : true,
+                generateFlatEndCap: options.generateFlatEndCap !== undefined ? options.generateFlatEndCap : true
+            }, generateUv2);
 			if (vertexData) {
 				this._updateAttributes(vertexData.position, vertexData.normal, vertexData.uv, generateUv2 ? vertexData.uv2 : null, vertexData.indices);
 				this.drawRange.count = vertexData.count;
@@ -631,6 +638,8 @@
 		const progress = options.progress !== undefined ? options.progress : 1;
 		const radialSegments = Math.max(2, options.radialSegments || 8);
 		const startRad = options.startRad || 0;
+        const generateFlatStartCap = options.generateFlatStartCap !== undefined ? options.generateFlatStartCap : true;
+        const generateFlatEndCap = options.generateFlatEndCap !== undefined ? options.generateFlatEndCap : true;
 		const circum = radius * 2 * Math.PI;
 		const totalDistance = pathPointList.distance();
 		const progressDistance = progress * totalDistance;
@@ -647,7 +656,59 @@
 		const indices = [];
 		let verticesCount = 0;
 		const normalDir = new three.Vector3();
-		function addVertices(pathPoint, radius, radialSegments) {
+
+    // Logic to create vertices, normals, UVs, and indices for flat end caps
+    function addFlatEndCap(pathPoint, isTop) {
+        const center = pathPoint.pos.clone();
+        const normalVec = isTop ? pathPoint.dir.clone().negate() : pathPoint.dir.clone();
+
+        // Add center vertex
+        position.push(center.x, center.y, center.z);
+        normal.push(normalVec.x, normalVec.y, normalVec.z);
+        uv.push(0.5, 0.5);
+        if (generateUv2) {
+            uv2.push(isTop ? 0 : 1, 0.5);
+        }
+        verticesCount++;
+
+        const centerIndex = verticesCount - 1;
+        const ringStartIndex = isTop ? 0 : verticesCount - (radialSegments + 2);
+
+        // Vertices for the end cap edges
+        // Create triangles using the center vertex and the last ring of the tube
+        for (let r = 0; r < radialSegments; r++) {
+            const current = ringStartIndex + r;
+            const next = ringStartIndex + ((r + 1) % (radialSegments + 1));
+            if (isTop) {
+                indices.push(centerIndex, next, current);
+            } else {
+                indices.push(centerIndex, current, next);
+            }
+            count += 3;
+        }
+
+        // Adjust UVs for the ring to create a proper cap appearance
+        for (let r = 0; r <= radialSegments; r++) {
+            const index = (ringStartIndex + r) * 2;
+            const angle = startRad + (Math.PI * 2 * r) / radialSegments;
+            uv[index] = (Math.cos(angle) + 1) / 2;
+            uv[index + 1] = (Math.sin(angle) + 1) / 2;
+            if (generateUv2) {
+                uv2[index] = isTop ? 0 : 1;
+                uv2[index + 1] = r / radialSegments;
+            }
+        }
+    }
+
+    if (generateFlatStartCap && progressDistance > 0) {
+        // Notice: start and end caps have the same number of vertices and are not constructed in the same way
+        // start cap has more vertices and is not geometrically consistent with the end cap
+        // This can be inspected in wireframe mode
+        addVertices(pathPointList.array[0], radius, radialSegments);
+        addFlatEndCap(pathPointList.array[0], true);
+    }
+
+	function addVertices(pathPoint, radius, radialSegments) {
 			const first = position.length === 0;
 			const uvDist = pathPoint.dist / circum;
 			const uvDist2 = pathPoint.dist / totalDistance;
@@ -691,6 +752,12 @@
 				}
 			}
 		}
+
+        if (generateFlatEndCap && progressDistance > 0) {
+            const lastPoint = pathPointList.array[pathPointList.count - 1];
+            addFlatEndCap(lastPoint, false);
+        }
+
 		return {
 			position,
 			normal,

examples/js/tube.js

@@ -67,13 +67,29 @@ window.onload = function() {
 	const tube = new THREE.Mesh(geometry, material);
 	scene.add(tube);
 
-	const params = { useTexture: true, color: [88, 222, 222], scrollUV: true, scrollSpeed: 0.03, radius: 0.2, radialSegments: 8, cornerRadius: 0.3, cornerSplit: 10, progress: 1, playSpeed: 0.14 };
+	const params = { 
+        useTexture: true, 
+        color: [88, 222, 222], 
+        scrollUV: true, 
+        scrollSpeed: 0.03, 
+        radius: 0.2, 
+        radialSegments: 8, 
+        cornerRadius: 0.3, 
+        cornerSplit: 10, 
+        progress: 1, 
+        playSpeed: 0.14,
+        wireframe: false
+    };
 	const gui = new dat.GUI();
 
 	gui.add(params, 'useTexture').onChange(function(val) {
 		material.map = val ? texture : null;
 		material.needsUpdate = true;
 	});
+    gui.add(params, 'wireframe').onChange(function(val) {
+        material.wireframe = val;
+        material.needsUpdate = true;
+    });
 	gui.addColor(params, 'color').onChange(function(value) {
 		material.color.r = value[0] / 255;
 		material.color.g = value[1] / 255;