bellbind/spiral.html

## spiral.html
<!doctype html>
<html>
<head>
<meta charset="utf-8" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r68/three.min.js"
></script>
<script src="https://rawgit.com/mrdoob/three.js/master/examples/js/controls/Trac
kballControls.js"
></script>
<script src="spiral.js"></script>
</head>
<body><div id="view"></div></body>
</html>

## spiral.js
window.addEventListener("load", function () {
    "use strict";

    var w = 800, h = 800;

    var renderer = new THREE.WebGLRenderer();
    renderer.setSize(w, h);
    var view = document.getElementById("view");
    view.appendChild(renderer.domElement);

    var camera = new THREE.PerspectiveCamera(45, w / h, 1, 1000);
    camera.position.set(50, 50, 50);
    var controls = new THREE.TrackballControls(camera, view);

    var scene = new THREE.Scene();
    scene.add(new THREE.AmbientLight(0x333333));

    var obj = new THREE.Line(
        new THREE.Geometry(), new THREE.LineBasicMaterial({color: 0x339900}));
    obj.geometry.dynamic = true;
    scene.add(obj);

    // ES6 Math polyfill
    var tanh = Math.tanh || function tanh(x) {
        return (Math.exp(x) - Math.exp(-x)) / (Math.exp(x) + Math.exp(-x));
    };
    var cosh = Math.cosh || function cosh(x) {
        return (Math.exp(x) + Math.exp(-x)) / 2;
    };
    var sinh = Math.sinh || function sinh(x) {
        return (Math.exp(x) - Math.exp(-x)) / 2;
    };
    // sphere spiral
    var sz = 16, cxy = 100, cz = cxy * sz;
    var hxy = Math.PI / cxy, hz = Math.PI / cz;
    var r = 20;
    for (var i = -cz; i < cz; i++) {
        var lxy = i * hxy;
        var lz = i * hz;
        var rxy = r /  cosh(lz);
        var x = rxy * Math.cos(lxy);
        var y = rxy * Math.sin(lxy);
        var z = r * tanh(lz);
        obj.geometry.vertices.push(new THREE.Vector3(x, y, z));
    }

    var loop = function loop() {
        requestAnimationFrame(loop);
        obj.rotation.z += 0.05;
        controls.update();
        renderer.clear();
        renderer.render(scene, camera);
    };
    loop();
}, false);
	<!doctype html>
	<html>
	<head>
	<meta charset="utf-8" />
	<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r68/three.min.js"
	></script>
	<script src="https://rawgit.com/mrdoob/three.js/master/examples/js/controls/Trac
	kballControls.js"
	></script>
	<script src="spiral.js"></script>
	</head>
	<body><div id="view"></div></body>
	</html>
	window.addEventListener("load", function () {
	"use strict";

	var w = 800, h = 800;

	var renderer = new THREE.WebGLRenderer();
	renderer.setSize(w, h);
	var view = document.getElementById("view");
	view.appendChild(renderer.domElement);

	var camera = new THREE.PerspectiveCamera(45, w / h, 1, 1000);
	camera.position.set(50, 50, 50);
	var controls = new THREE.TrackballControls(camera, view);

	var scene = new THREE.Scene();
	scene.add(new THREE.AmbientLight(0x333333));

	var obj = new THREE.Line(
	new THREE.Geometry(), new THREE.LineBasicMaterial({color: 0x339900}));
	obj.geometry.dynamic = true;
	scene.add(obj);

	// ES6 Math polyfill
	var tanh = Math.tanh \|\| function tanh(x) {
	return (Math.exp(x) - Math.exp(-x)) / (Math.exp(x) + Math.exp(-x));
	};
	var cosh = Math.cosh \|\| function cosh(x) {
	return (Math.exp(x) + Math.exp(-x)) / 2;
	};
	var sinh = Math.sinh \|\| function sinh(x) {
	return (Math.exp(x) - Math.exp(-x)) / 2;
	};
	// sphere spiral
	var sz = 16, cxy = 100, cz = cxy * sz;
	var hxy = Math.PI / cxy, hz = Math.PI / cz;
	var r = 20;
	for (var i = -cz; i < cz; i++) {
	var lxy = i * hxy;
	var lz = i * hz;
	var rxy = r / cosh(lz);
	var x = rxy * Math.cos(lxy);
	var y = rxy * Math.sin(lxy);
	var z = r * tanh(lz);
	obj.geometry.vertices.push(new THREE.Vector3(x, y, z));
	}

	var loop = function loop() {
	requestAnimationFrame(loop);
	obj.rotation.z += 0.05;
	controls.update();
	renderer.clear();
	renderer.render(scene, camera);
	};
	loop();
	}, false);