fixed material - option for the bottom and the top now 
also on GitHub | works with r89
THREEf creates morph BufferGeometry with a time parameter.
I wrote a small HTML/Script. 
It outputs the elementary BufferGeometry definition for a selected time. The output can be easily copied with Ctrl+A and Ctrl+C. There is no further .innerHTML content on the page!
Try it out
http://sandboxthreef.threejs.hofk.de/modifyCreateGeo.html
The code:
Change or add the parameters - nearly at line 190. Here I have taken as default for radius and height 1/100 of THREEf. So 0.16 and 1, respectively!
(also on GitHub: THREEf.js/modifyCreateGeo.html at master · hofk/THREEf.js · GitHub)
updated Jan 18: decimals can be selected
<!DOCTYPE html>
<!-- *** create to modify ***
(for THREEf created buffer geometries)
/**
* @author hofk / http://threejs.hofk.de/
*/
-->
<html lang="de">
<head>
<title> create modify </title>
<meta charset="utf-8" />
<!-- designed for Firefox -->
<style>
input[type="number"] { width: 80px }
input[type="range"] { width: 500px }
</style>
<script src="three.min.89.js"></script>
<script src="OrbitControls.js"></script>
<script src="THREEx.WindowResize.js"></script>
<script src="THREEf.js"></script>
</head>
<body>
<button id="export_geo.js">export t=</button>
<input type="radio" name="tInput" id="asNumber">
<input type="number" id="tNumber" min="0" max="100" value="0" step="0.001" >
<input type="radio" name="tInput" id="asRange" checked="checked">
<input type="range" id="tRange" min="0" max="100" value="0" step="0.001" >
<button id="dec">decimals=</button>
<input type="number" id="nDec" min="1" max="21" value="3" step="1" >
<button id="wirefr">wireframe</button>
<div id="webGL" style="position: absolute; top: 40px; left: 0px; " > </div>
<div id="output" style="position: absolute; top: 600px; left: 5px; text-align: left;">
NOTICE!<br />
<br />
If used functions with parameter t <br />
choose a time before export. <br />
<br />
Then copy code with Ctrl+A Ctrl+C.
</div>
</body>
<script>
'use strict'
var tNumber = document.getElementById( "tNumber" );
var tRange = document.getElementById( "tRange" );
var btnWireframe = document.getElementById( "wirefr" );
var scene = new THREE.Scene();
var camera = new THREE.PerspectiveCamera( 45, window.innerWidth / window.innerHeight, 0.01, 2000 );
camera.position.set( 0, 1, 3 ); // possibly change if geometry is much larger than 1
var renderer = new THREE.WebGLRenderer( { antialias: true } );
renderer.setSize( window.innerWidth, window.innerHeight );
renderer.setClearColor( 0xf1f1f1, 1 );
var container = document.getElementById( 'webGL' );
container.appendChild( renderer.domElement );
THREEx.WindowResize( renderer, camera );
var controls = new THREE.OrbitControls( camera, renderer.domElement );
//controls.enableZoom = true;
// material
var uvTex = new THREE.TextureLoader().load( "uvgrid01.png" );
var waterlilyTex = new THREE.TextureLoader().load( "waterlily.png" );
//var earth = new THREE.TextureLoader().load( "earth_nasa_map_900.png" );
var side = THREE.DoubleSide;
var wireframe = false;
var specular = 0x333333;
var flatShading = true;
var materials = [
new THREE.MeshBasicMaterial( {
opacity: 0.15, transparent: true,
side: side, wireframe: wireframe } ), // 0 transparent
new THREE.MeshPhongMaterial( {
color: 0x440033, emissive: 0x330033, specular: specular,
side: side, wireframe: wireframe, flatShading: flatShading } ), // 1 color
new THREE.MeshPhongMaterial( {
color: 0xff0000, emissive: 0xff0000, specular: specular,
side: side, wireframe: wireframe, flatShading: flatShading } ), // 2 red
new THREE.MeshPhongMaterial( {
color: 0x00ff00, emissive: 0x00ff00, specular: specular,
side: side, wireframe: wireframe, flatShading: flatShading } ), // 3 green
new THREE.MeshPhongMaterial( {
color: 0x0000ff, emissive: 0x0000ff, specular: specular,
side: side, wireframe: wireframe, flatShading: flatShading } ), // 4 blue
new THREE.MeshPhongMaterial( {
color: 0xffff00, emissive: 0xffff00, specular: specular,
side: side, wireframe: wireframe, flatShading: flatShading } ), // 5 yellow
new THREE.MeshPhongMaterial( {
color: 0xff00ff, emissive: 0xff00ff, specular: specular,
side: side, wireframe: wireframe, flatShading: flatShading } ), // 6 mgenta
new THREE.MeshPhongMaterial( {
color: 0x00ffff, emissive: 0x00ffff, specular: specular,
side: side, wireframe: wireframe, flatShading: flatShading } ), // 7 cyan
new THREE.MeshBasicMaterial( {
map: uvTex,
side: side, wireframe: wireframe, flatShading: flatShading } ), // 8 uv grid
new THREE.MeshBasicMaterial( {
map: waterlilyTex,
side: side, wireframe: wireframe, flatShading: flatShading } ), // 9 photo
new THREE.MeshPhongMaterial( {
color: 0x444444, emissive: 0x444444, specular: specular,
side: side, wireframe: wireframe, flatShading: flatShading } ) // 10 grey
];
var sun1 = new THREE.DirectionalLight( );
sun1.intensity = 0.6;
sun1.position.set(5, 20, 30 );
scene.add( sun1 );
var sun2 = new THREE.DirectionalLight( );
sun2.intensity = 0.5;
sun2.position.set( -5, -20, 30 );
scene.add( sun2 );
//aviable parameters
/*
indexed: false,
radius: 0.16,
height: 1,
radiusSegments: ,
heightSegments: ,
circOpen: true,
withTop: true,
fixedMatTop: "",
withBottom: true,
fixedMatBottom: "",
waffled: true,
quadLine: true,
quadColor: 0x000000,
style: 'cover',
rCircHeight: function ( u, v, t ) { return },
centerX: function ( v, t ) { return },
centerY: function ( v, t ) { return },
centerZ: function ( v, t ) { return },
unrollCover: function ( v, t ) { return },
waffleDeep: function ( u, v, t ) { return },
moveX: function ( u, v, t ) { return },
moveY: function ( u, v, t ) { return },
moveZ: function ( u, v, t ) { return },
endCircAngle: function ( v, t ) { return },
startCircAngle: function ( v, t ) { return },
scaleCircAngle: function ( u, t ) { return },
topHeight: function ( u, t ) { return },
bottomHeight: function ( u, t ) { return },
scaleHeight: function ( v, t ) { return },
materialTop: function ( u, t ) { return },
materialBottom: function ( u, t ) { return },
materialCover: function ( u, v, t ) { return },
fixedMaterial: [],
centerPoints: [ [ .6, 0, 0 ], [ .5, 0, 0 ], [ .4, 0, 0 ],[ .3, 0, 0 ], [ .2, 0, 0 ],[ .1, .01, 0 ], [ .02, .07, 0 ], [ 0, .1 , 0], [ .02, .13, 0], [ .1, .21, 0], [ .2, .28, 0], [ .3, .35 , 0], [ .4, .42 , 0], [ .5, .5 , 0],[ 0.58, .6 , 0 ],[ .6, .7, 0 ], [ .58, .8, 0 ], [ .51, .9, 0], [ .44, .95, 0], [ .38, .98, 0], [ .3, 1, 0 ],[ .2, .99, 0 ], [ .1, .94, 0 ], [ 0, 0.88, 0 ] ], // (only example)
*/
// create a THREEf BufferGeometry with your parameters
var parameters = {
// take, if possible approximate (or change the camera position at the top)
radius: 0.16, // default from THREEf / 100
height: 1, // default from THREEf / 100
// further parameters of your choice
radiusSegments: 5,
heightSegments: 6,
quadLine: true,
quadColor: 0x110011,
rCircHeight: function ( u, v, t ) { return (0.03 * ( t - 50 ) - v ) * (0.02 * ( t - 50 ) - v ) },
}
var geo = new THREE.BufferGeometry();
geo.createMorphGeometry = THREEf.createMorphGeometry;
geo.createMorphGeometry( parameters );
// mesh
var mesh = new THREE.Mesh( geo, materials );
scene.add( mesh );
if ( parameters.quadLine ) mesh.add( geo.quadLine );
btnWireframe.onclick = showWireframe;
document.getElementById( "export_geo.js" ).onclick = outputJavaScript;
var time;
animate();
//.........................
function showWireframe( ) {
wirefr = !wirefr;
btnWireframe.innerHTML = wirefr === true ? "no wirefr." : "wireframe";
for ( var m = 0; m < materials.length; m ++ ) materials[ m ].wireframe = wirefr;
}
function outputJavaScript( ) {
var vc3 = geo.vertices.length;
var fic = geo.faceIndices.length;
var fc = geo.faceIndices.length / 3;
var uvc2 = geo.uvs.length;
var out = "";
var ffd = Math.pow( 10, nDec.value );
function round( x ) {
return Math.floor( x * ffd ) / ffd;
}
// --- generate JavaScript code ---
output.innerHTML = " /* t = " + time + " (static timestamp) <br /> BufferGeometry generated with addon THREEf <br /> var geo = new THREE.BufferGeometry(); <br /> geo.createMorphGeometry = THREEf.createMorphGeometry; <br /> geo.createMorphGeometry( { ";
Object.keys( parameters ).forEach ( function ( val, key ) {
if( val !== 'quadColor' ) {
output.innerHTML += val + ": " + parameters[ val ] + ", ";
} else {
output.innerHTML += val + ": 0x" + parameters[ val ].toString(16) + ", ";
}
} );
output.innerHTML += " } ); <br /> */ <br />";
out += "var geo = new THREE.BufferGeometry(); <br />";
out += "geo.faceIndices = new Uint32Array( [ ";
for ( var i = 0; i < fic; i ++ ) {
out += geo.faceIndices[ i ];
out += i < fic - 1 ? ", " : "";
}
out += " ] ); <br /> ";
out += "geo.vertices = new Float32Array( [ ";
for ( var v = 0; v < vc3 ; v ++ ) {
out += round( geo.vertices[ v ] );
out += v < vc3 - 1 ? ", " : "";
}
out += " ] ); <br /> ";
out += "geo.normals = new Float32Array( [ ";
for ( var v = 0; v < vc3 ; v ++ ) {
out += round( geo.normals[ v ] );
out += v < vc3 - 1 ? ", " : "";
}
out += " ] ); <br /> "
out += "geo.uvs = new Float32Array( [ ";
for ( var v = 0; v < uvc2 ; v ++ ) {
out += round( geo.uvs[ v ] );
out += v < uvc2 - 1 ? ", " : "";
}
out += " ] ); <br /> "
out += "geo.setIndex( new THREE.BufferAttribute( geo.faceIndices, 1 ) ); <br /> geo.addAttribute( 'position', new THREE.BufferAttribute( geo.vertices, 3 ).setDynamic( true ) ); <br />geo.addAttribute( 'normal', new THREE.BufferAttribute( geo.normals, 3 ).setDynamic( true ) ); <br /> geo.addAttribute( 'uv', new THREE.BufferAttribute( geo.uvs, 2 ) );<br /> ";
out += "var geoGrp = [ ";
for ( var f = 0, p = 0; f < fc ; f ++, p += 3 ) {
out += geo.groups[ f ].start + ", " + geo.groups[ f ].count + ", " + geo.groups[ f ].materialIndex ;
out += f < fc - 1 ? ", " : "";
}
out += " ]; <br /> ";
out += " for ( var f = 0, p = 0; f < " + fc + "; f ++, p += 3 ) { geo.addGroup( geoGrp[ p ], geoGrp[ p + 1 ], geoGrp[ p + 2 ] ); } <br /> ";
if ( geo.quadLine ) {
out += "geo.lineGeometry = new THREE.BufferGeometry(); <br />";
out += "geo.quadColor = 0x" + geo.quadColor.toString(16) + "; <br />";
out += "geo.quadLine = new THREE.Line( geo.lineGeometry, new THREE.LineBasicMaterial( { color: geo.quadColor } ) ); <br />";
out += "geo.linePositions = new Float32Array( [ ";
var glc = geo.linePositions.length;
for ( var v = 0; v < glc; v ++ ) {
out += round( geo.linePositions[ v ] );
out += v < glc - 1 ? ", " : "";
}
out += " ] ); <br /> ";
out += "geo.lineGeometry.addAttribute( 'position', new THREE.BufferAttribute( geo.linePositions, 3 ) ); <br />";
}
output.innerHTML += out;
}
function animate() {
requestAnimationFrame( animate );
if ( asNumber.checked ) {
time = tNumber.value;
tRange.value = time;
}
if ( asRange.checked ) {
time = tRange.value;
tNumber.value = time;
}
geo.morphVertices( time );
renderer.render( scene, camera );
controls.update();
}
</script>
</html>
E T 
what will become of it.
, the problem is solved.
THREEp finished
with the geometry generated by functions.
of code.
