I have successfully rendered a THREE.TubeGeometry figure, which can be viewed https://i.sstatic.net/XpszN.png
Below is the code and a link to view it on JSBin
<html>
<body>
<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r75/three.js"></script>
<script>
// Global variables
var renderer;
var scene;
var camera;
var geometry;
var control;
var count = 0;
var animationTracker;
init();
drawSpline();
function init()
{
// Creating a scene to hold all elements
scene = new THREE.Scene();
// Setting up a camera for perspective viewing
camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 0.1, 1000);
// Creating a WebGL render with lightgray background
renderer = new THREE.WebGLRenderer();
renderer.setClearColor('lightgray', 1.0);
renderer.setSize(window.innerWidth, window.innerHeight);
// Positioning the camera
camera.position.x = 0;
camera.position.y = 40;
camera.position.z = 40;
camera.lookAt(scene.position);
// Adding renderer output to HTML element
document.body.appendChild(renderer.domElement);
}
function drawSpline(numPoints)
{
var numPoints = 100;
var start = new THREE.Vector3(-5, 0, 20);
var middle = new THREE.Vector3(0, 35, 0);
var end = new THREE.Vector3(5, 0, -20);
var curveQuad = new THREE.QuadraticBezierCurve3(start, middle, end);
var tube = new THREE.TubeGeometry(curveQuad, numPoints, 0.5, 20, false);
var mesh = new THREE.Mesh(tube, new THREE.MeshNormalMaterial({
opacity: 0.9,
transparent: true
}));
scene.add(mesh);
renderer.render(scene, camera);
}
</script>
</body>
</html>
To enhance the display by incrementally loading as an arc, I decided to animate the process of drawing the arc line by line. You can see this in action on JSBin
Here's the additional code snippet:
<!DOCTYPE html>
<html>
<head>
<title>Incremental Spline Curve</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r75/three.js"></script>
<style>
body {
margin: 0;
overflow: hidden;
}
</style>
</head>
<script>
// Global variables
var renderer;
var scene;
var camera;
var splineGeometry;
var count = 0;
var animationTracker;
var sphere;
var light;
function init() {
// Creating a scene
scene = new THREE.Scene();
// Setting up a camera
camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 0.1, 1000);
// Creating a WebGL renderer
renderer = new THREE.WebGLRenderer();
renderer.setClearColor( 'lightblue', 1 );
renderer.setSize(window.innerWidth, window.innerHeight);
// Positioning the camera
camera.position.x = 0;
camera.position.y = 40;
camera.position.z = 40;
camera.lookAt(scene.position);
// Adding renderer output to HTML
document.body.appendChild(renderer.domElement);
sphere = new THREE.Mesh(new THREE.SphereGeometry(0.8,31,31), new THREE.MeshLambertMaterial({
color: 'yellow',
}));
light = new THREE.DirectionalLight('white', 1);
light.position.set(0,10,10).normalize();
getSplineData();
}
function getSplineData() {
var curve = new THREE.CubicBezierCurve3(
new THREE.Vector3( -5, 0, 10 ),
new THREE.Vector3(0, 20, 0 ),
new THREE.Vector3(0, 20, 0 ),
new THREE.Vector3( 2, 0, -25 )
);
splineGeometry = new THREE.Geometry();
splineGeometry.vertices = curve.getPoints( 50 );
animate();
}
function animate() {
if(count == 50)
{
cancelAnimationFrame(animationTracker);
return;
}
drawLine();
renderer.render(scene, camera);
count += 1;
animationTracker = requestAnimationFrame(animate);
}
function drawLine() {
var lineGeometry = new THREE.Geometry();
var lineMaterial = new THREE.LineBasicMaterial({
color: 0x0000ff
});
lineGeometry.vertices.push(
splineGeometry.vertices[count],
splineGeometry.vertices[count+1]
);
var line = new THREE.Line( lineGeometry, lineMaterial );
scene.add( line );
}
window.onload = init;
</script>
<body>
</body>
</html>
The drawback of my current approach is that I lose out on some effects possible in TubeGeometry such as thickness and transparency. If you have any suggestions on achieving smooth incremental loading for TubeGeometry, please let me know.