threejs重合顶点纹理已停止

Question

我想制作一个带有半球末端的动画管，管状段是200.我有前60个段的顶点来复制SphereGeometry的上半部分的位置，以及最后60个段的下半部分。< / p>

上半球和下半球之间的线段都被复制到球体赤道周围的顶点。

几何看起来很好，但是球体的赤道上停止了球形环境贴图纹理。

我的代码如下，有谁知道如何解决问题？

var camera, scene, renderer;


			init();
			animate();

			function init() {

				camera = new THREE.PerspectiveCamera( 28, window.innerWidth / window.innerHeight, 1, 1000 );
				camera.position.z = 50;

				scene = new THREE.Scene();


				var nMat = new THREE.MeshNormalMaterial({side:THREE.DoubleSide,});
				var tube = new DSTube( 200, 30, 10, nMat);

				scene.add( tube.mesh );

				renderer = new THREE.WebGLRenderer();
				renderer.setPixelRatio( window.devicePixelRatio );
				renderer.setSize( window.innerWidth, window.innerHeight );
				document.body.appendChild( renderer.domElement );

				//

				window.addEventListener( 'resize', onWindowResize, false );

			}

			function onWindowResize() {

				camera.aspect = window.innerWidth / window.innerHeight;
				camera.updateProjectionMatrix();

				renderer.setSize( window.innerWidth, window.innerHeight );

			}

			function animate() {

				requestAnimationFrame( animate );
				renderer.render( scene, camera );

			}

body {
				margin: 0px;
				background-color: #000000;
				overflow: hidden;
			}

<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r78/three.js"></script>

<script>
			function DSTube( lengthSeg, radiusSeg, radius, material ) {
				//for speed
				this.framerate = 60;
				//center
				this.origin = new THREE.Vector3();
				this.head = this.origin;
				this.tail = this.origin;
				//setup
				this.lengthSeg = lengthSeg;
				this.radiusSeg = radiusSeg;
				this.radius = radius;


				this.pathPoints = [];
				for(var i=0; i<this.lengthSeg; i++) {
					this.pathPoints.push( new THREE.Vector3( 0, 0, 0) );
				}

				// TubeGeometry(path, tubularSegments, radius, radiusSegments, closed)
				this.geometry = new THREE.TubeGeometry( new THREE.CatmullRomCurve3(this.pathPoints), this.lengthSeg, this.radius, this.radiusSeg, false );
				this.material = material;
				this.mesh = new THREE.Mesh( this.geometry, this.material );

				this.verticeCount = this.geometry.vertices.length;


				//sphere part
				//adjust height segment if needed
				this.sphereHeightSegments = 60;
				//SphereGeometry(radius, widthSegments, heightSegments, phiStart, phiLength, thetaStart, thetaLength)
				this.headSphere =  new THREE.SphereGeometry( this.radius, this.radiusSeg, this.sphereHeightSegments );
				this.tailSphere =  new THREE.SphereGeometry( this.radius, this.radiusSeg, this.sphereHeightSegments );

				this.sphereVerticeCount = this.headSphere.vertices.length;

				//count for tube hemisphere
				this.headHemisphereVerticeCount = ( this.sphereHeightSegments / 2 + 1 ) *  this.radiusSeg;

				//layer
				this.tubeLayerCount = this.lengthSeg + 1;
				this.headHemisphereLayerCount = this.tailHemisphereLayerCount = this.sphereHeightSegments / 2 + 1;
				this.tailHemisphereStartLayer = this.tubeLayerCount - this.sphereHeightSegments / 2;
				this.middleLayerCount = this.tubeLayerCount - this.headHemisphereLayerCount * 2;


				this.initGeometry();

				// return this.mesh;
			}

			DSTube.prototype.initGeometry = function() {
				this.copyHeadSphere();
				this.copyInitialTubePart();
				this.copyTailSphere();

			}

			DSTube.prototype.copyHeadSphere = function() {
				//copy head hemisphere vertice
				for( var y = 0; y < this.headHemisphereLayerCount; y++ ) {

					for( var x = 0; x < this.radiusSeg; x++ ) {

						if( x == 0 ) {

							var sphereVertex = this.headSphere.vertices[ y * (this.radiusSeg + 1) + x ];
							this.geometry.vertices[ y * this.radiusSeg + x ].copy( sphereVertex );

						} else {

							var sphereVertex = this.headSphere.vertices[ y * (this.radiusSeg + 1) + ( this.radiusSeg - x ) ];
							this.geometry.vertices[ y * this.radiusSeg + x ].copy( sphereVertex );

						}

					}

				}
				this.geometry.computeBoundingSphere();
				this.geometry.computeFaceNormals();
				this.geometry.computeVertexNormals();
			}

			DSTube.prototype.copyInitialTubePart = function() {
				//copy head hemisphere vertice
				for( var y = this.headHemisphereLayerCount - 1; y < this.tubeLayerCount ; y++ ) {

					for( var x = 0; x < this.radiusSeg; x++ ) {

						var vertex = this.geometry.vertices[ ( this.headHemisphereLayerCount - 1 ) * this.radiusSeg + x ];
						this.geometry.vertices[ y * this.radiusSeg + x ].copy( vertex );

					}

				}
				this.geometry.computeBoundingSphere();
				this.geometry.computeFaceNormals();
				this.geometry.computeVertexNormals();
			}

			DSTube.prototype.copyTailSphere = function() {

				//copy tail hemisphere vertice
				for( var y = this.tailHemisphereStartLayer; y < this.tubeLayerCount; y++ ) {

					for( var x = 0; x < this.radiusSeg; x++ ) {

						if( x == 0 ) {

							var sphereVertex = this.tailSphere.vertices[ ( y - this.middleLayerCount - 1 ) * (this.radiusSeg + 1) + x ];
							this.geometry.vertices[ y * this.radiusSeg + x ].copy( sphereVertex );

						} else {

							var sphereVertex = this.tailSphere.vertices[ ( y - this.middleLayerCount - 1 ) * (this.radiusSeg + 1) + ( this.radiusSeg - x ) ];
							this.geometry.vertices[ y * this.radiusSeg + x ].copy( sphereVertex );

						}

					}

				}
				this.geometry.computeBoundingSphere();
				this.geometry.computeFaceNormals();
				this.geometry.computeVertexNormals();
			}
		</script>