<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 );
External CSS
This Pen doesn't use any external CSS resources.