TubeGeometry to Geometry

Questions
1

Is there a way to convert a TubeGeometry to a Geometry with faces?

2 
// lets say tubeGeometry is the instance of TubeGeometry
var geometry = new THREE.Geometry().fromBufferGeometry( tubeGeometry ._bufferGeometry )
3

A TubeGeometry is a Geometry with faces. See console output.

<!DOCTYPE html>

<head>
	<title> TubeGeometry faces  </title>
	<meta charset="utf-8" />
</head>
<body> 	
</body>
	<script src="https://threejs.org/build/three.min.js"></script>
	<script src="https://threejs.org/examples/js/controls/OrbitControls.js"></script>
<script>

var scene = new THREE.Scene();
var camera = new THREE.PerspectiveCamera( 75, window.innerWidth / window.innerHeight, 0.1, 20000 );
camera.position.set( 10, 10, 20 );
var renderer = new THREE.WebGLRenderer( { antialias: true } );
renderer.setSize( window.innerWidth, window.innerHeight );
renderer.setClearColor( 0xdddddd, 1 );	
var container = document.createElement( 'div' );
document.body.appendChild( container );
container.appendChild( renderer.domElement ); 
var controls = new THREE.OrbitControls( camera, renderer.domElement );

function CustomSinCurve( scale ) {

	THREE.Curve.call( this );

	this.scale = ( scale === undefined ) ? 1 : scale;

}

CustomSinCurve.prototype = Object.create( THREE.Curve.prototype );
CustomSinCurve.prototype.constructor = CustomSinCurve;

CustomSinCurve.prototype.getPoint = function ( t ) {

	var tx = t * 3 - 1.5;
	var ty = Math.sin( 2 * Math.PI * t );
	var tz = 0;

	return new THREE.Vector3( tx, ty, tz ).multiplyScalar( this.scale );

};

var path = new CustomSinCurve( 10 );
var tubGeometry = new THREE.TubeGeometry( path, 20, 2, 8, false );
var material = new THREE.MeshBasicMaterial( { color: 0x00ff00, side: THREE.DoubleSide, wireframe: true } );
var mesh = new THREE.Mesh( tubGeometry , material );
scene.add( mesh );

for ( i = 0; i < tubGeometry.faces.length; i ++  ) { 
 
 console.log(tubGeometry.faces[ i ] );  // faces 
 
}


animate();

function animate() {

	requestAnimationFrame( animate );	
	renderer.render( scene, camera );
	controls.update();
	
}
</script>

</html>
1 Like
4

Thank you very much.

5

Thanks for your quick response! That’s interesting because the documentation does not show a faces property but I see from the console output that it exists.

6

TubeGeometry is a geometry and inherits the properties.
https://threejs.org/docs/index.html#api/en/core/Geometry
20180917-2141-53216

7

Oops! i must have gotten distracted :blush: by the nice graphics. lol.