proctree.js
Procedural tree creation library
Usage
GLGE
Mesh creation, GLGE example:
<script>
var myTree = new Tree({
"seed": 262,
"segments": 6,
"levels": 5,
"vMultiplier": 2.36,
"twigScale": 0.39,
"initalBranchLength": 0.49,
"lengthFalloffFactor": 0.85,
"lengthFalloffPower": 0.99,
"clumpMax": 0.454,
"clumpMin": 0.404,
"branchFactor": 2.45,
"dropAmount": -0.1,
"growAmount": 0.235,
"sweepAmount": 0.01,
"maxRadius": 0.139,
"climbRate": 0.371,
"trunkKink": 0.093,
"treeSteps": 5,
"taperRate": 0.947,
"radiusFalloffRate": 0.73,
"twistRate": 3.02,
"trunkLength": 2.4
});
var treeMesh = new GLGE.Mesh({
Positions: Tree.flattenArray(myTree.verts),
Normals: Tree.flattenArray(myTree.normals),
UV: Tree.flattenArray(myTree.UV),
Faces: Tree.flattenArray(myTree.Faces),
});
var twigMesh = new GLGE.Mesh({
Positions: Tree.flattenArray(myTree.vertsTwig),
Normals: Tree.flattenArray(myTree.normalsTwig),
UV: Tree.flattenArray(myTree.uvsTwig),
Faces: Tree.flattenArray(myTree.facesTwig),
});
</script>Three.js
Mesh creation, Three.js example:
// Helper function to transform the vertices and faces
function newTreeGeometry(tree, isTwigs) {
var output = new THREE.Geometry();
tree[ isTwigs ? 'vertsTwig' : 'verts'].forEach(function(v) {
output.vertices.push(new THREE.Vector3(v[0], v[1], v[2]));
});
var uv = isTwigs ? tree.uvsTwig : tree.UV;
tree[ isTwigs ? 'facesTwig' : 'faces'].forEach(function(f) {
output.faces.push(new THREE.Face3(f[0], f[1], f[2]));
output.faceVertexUvs[0].push(f.map(function(v) {
return new THREE.Vector2(uv[v][0], uv[v][1]);
}));
});
output.computeFaceNormals();
output.computeVertexNormals(true);
return output;
}
var myTree = new Tree(/* same parameters as previous example */);
var trunkGeo = newTreeGeometry(tree);
var trunkMaterial = new THREE.MeshLambertMaterial( { color: 0xdddddd, wireframe: false } );
var trunkMesh = new THREE.Mesh(trunkGeo, trunkMaterial);
scene.add(trunkMesh); // Use your own scene
var twigsGeo = newTreeGeometry(tree, true);
var twigsMaterial = new THREE.MeshLambertMaterial( { color: 0x999999, wireframe: false } );
var twigsMesh = new THREE.Mesh(twigsGeo, twigsMaterial);
scene.add(twigsMesh); // Use your own scene