BufferGeometry from Path vertex colors

by callum

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/95/three.min.js"></script>
<script src="https://rawgit.com/mrdoob/three.js/dev/examples/js/controls/OrbitControls.js"></script>
<script src="https://threejs.org/examples/js/libs/stats.min.js"></script>

CSS

body {
    margin: 0;
    padding: 0;
    overflow: hidden;
}

JavaScript

var camera, scene, renderer, controls, stats;

init();
animate();

function init() {
    renderer = new THREE.WebGLRenderer({
        antialias: true
    });
    renderer.setClearColor(0x000000);
    renderer.setPixelRatio(window.devicePixelRatio);
    renderer.setSize(window.innerWidth, window.innerHeight);
    document.body.appendChild(renderer.domElement);

    scene = new THREE.Scene();
    scene.background = new THREE.Color(0x333399);

    camera = new THREE.PerspectiveCamera(60, window.innerWidth / window.innerHeight, 1, 1000);

    var ambientLight = new THREE.AmbientLight(0x999999, 0.4);
    scene.add(ambientLight);

    var light0 = new THREE.PointLight(0x999999, 1, 0);
    light0.position.set(-100, -200, -100);
    scene.add(light0);

    controls = new THREE.OrbitControls(camera, renderer.domElement);
    controls.minDistance = 0.0;
    controls.maxDistance = 1000.0;
    controls.panSpeed = 0.1;
    controls.enableDamping = true;
    controls.dampingFactor = 0.1;
    controls.rotateSpeed = 0.1;

    window.addEventListener('resize', onWindowResize, false);

	stats = new Stats();
	document.body.appendChild(stats.dom);

    buildScene();
}

function onWindowResize() {
    camera.aspect = window.innerWidth / window.innerHeight;
    camera.updateProjectionMatrix();
    renderer.setSize(window.innerWidth, window.innerHeight);
}

function animate() {
    requestAnimationFrame(animate);
    controls.update();
    
    stats.begin();
    renderer.render(scene, camera);
	stats.end();
}

function buildScene() {
    var pts = [];
    const divisions = 1024;
    const radius = 10.0;

    for (var d = 0; d < divisions; ++d) {

        var angle1 = (d / divisions) * Math.PI * 2;
        var angle2 = (d / divisions * 15.0) * Math.PI * 2;
        var x = Math.cos(angle1) * radius + Math.cos(angle2);
        var z = Math.sin(angle1) * radius + Math.sin(angle2);
        x = Math.cos(angle1) * radius;
        z = Math.sin(angle1) * radius;
        

        pts.push(new...