JSFiddle - React, Tailwind, and code Playground

by lighty1235

HTML

<script src="//cdn.rawgit.com/mrdoob/three.js/master/build/three.js"></script>

CSS

body {
	  margin: 0;
}
canvas {
	display: block;
}

JavaScript

var scene = new THREE.Scene();

var camera = new THREE.PerspectiveCamera( 75, window.innerWidth / window.innerHeight, 0.1, 1000 );
camera.position.z = 10;

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 endPointZ = 1;

const curve = new THREE.QuadraticBezierCurve3(
   [new THREE.Vector3(289.76843686945404, 452.51481137238443, 56.10018915737797),
          new THREE.Vector3(-53.56300074753207, 171.49711742836848, -14.495472686253045),
          new THREE.Vector3(-91.40118730204415, 176.4306956436485, -6.958271935582161),
          new THREE.Vector3(-383.785318791128, 491.1365363371675, 47.869296953772746)],
  new THREE.Vector3(0, config.length * config.curvature, 1),
  new THREE.Vector3(endPointX, endPointY, endPointZ)
);

const geometry = new THREE.TubeBufferGeometry(
  curve,
  config.lengthSegments,
  config.radius,
  config.radialSegments,
  true
);
const material = new THREE.MeshBasicMaterial({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 );