<html>
	<head>
		<meta charset="utf-8">
		<title>Faceless Tube</title>
		<style>
			body { margin: 0; }
			canvas { display: block; }
		</style>
	</head>
	<body>
		<script src="js/three.js"></script>
	</body>
</html>
var scene = new THREE.Scene();
var camera = new THREE.PerspectiveCamera( 75, window.innerWidth / window.innerHeight, 0.1, 1000 );

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

const config = {
  angle: 45, // in degrees
  curvature: 0.5, // value between 0 and 1, translates to the Y of bezier control point
  radius: 1,
  radialSegments: 32,
  lengthSegments: 100,
  length: 10, // linear distance between start and end points of the curve
  color: 0x5E2100,
  position: new THREE.Vector3(0, 0, 0)
}

// the lines below translate degrees to radians
const endPointX = Math.cos(config.angle * Math.PI / 180) * config.length;
const endPointY = Math.sin(config.angle * Math.PI / 180) * config.length;

const curve = new THREE.QuadraticBezierCurve(
  new THREE.Vector2(0, 0),
  new THREE.Vector2(0, config.length * config.curvature),
  new THREE.Vector2(endPointX, endPointY)
);

const geometry = new THREE.TubeGeometry(
  curve,
  config.lengthSegments,
  config.radius,
  config.radialSegments,
  true
);
const material = new THREE.MeshLambertMaterial({color: config.color});
const TubeObject = new THREE.Mesh(geometry, material);

scene.add( TubeObject );

camera.position.z = 15;
camera.position.y = 10;

renderer.render( scene, camera );
Run Pen

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

  1. https://cdnjs.cloudflare.com/ajax/libs/three.js/110/three.min.js