Question

I’m trying to display a model created by SnappyTree/Proctree ( http://www.snappytree.com/ ).

Proctree is designed to work with GLGE, but I’m nearly there in using the library generated data in Three.js. Basically I construct a custom json object, add proctree data to it and use JSONLoader to generate the final geometry.

What I suspect is happening, the vertices (pointcloud) are imported correctly, but the array faces refer to wrong vertices or are otherwise interpreted wrong.

var tree = new Tree(json); // Proctree
// window.console.log(tree);
var model = { "metadata" : { "formatVersion" : 3.1, "generatedBy": "bb3d2proctree",      "vertices": 0,  "faces": 0, "description": "Autogenerated from proctree." },
  "materials": [{ // just testing...
  "diffuse": 20000
  }],
  "colors": [0xff00ff, 0xff0000] // just testing
};

model.vertices = Tree.flattenArray(tree.verts);
model.normals  = Tree.flattenArray(tree.normals);
model.uvs      = [Tree.flattenArray(tree.UV)];

model.faces    = Tree.flattenArray(tree.faces);

var loader = new THREE.JSONLoader();
loader.createModel(model, function(geometry, materials) {
    // cut out for brewity... see jsfiddle
}

It’s almost working (haven’t got into materials yet..) The tree looks kinda correct, however the faces are a bit messed up, and I’m sure there is some simple format difference, and it should be possible to modify the faces array so it works correctly with Three.js.

JSFiddle here: http://jsfiddle.net/nrZuS/

How could I import the data correctly into Three.js?

This is how it should look like: http://www.snappytree.com/#seed=861&segments=10&levels=5&vMultiplier=0.66&twigScale=0.47&initalBranchLength=0.5&lengthFalloffFactor=0.85&lengthFalloffPower=0.99&clumpMax=0.449&clumpMin=0.404&branchFactor=2.75&dropAmount=0.07&growAmount=-0.005&sweepAmount=0.01&maxRadius=0.269&climbRate=0.626&trunkKink=0.108&treeSteps=4&taperRate=0.876&radiusFalloffRate=0.66&twistRate=2.7&trunkLength=1.55&trunkMaterial=TrunkType2&twigMaterial=BranchType5 (except my code so far only tries to import the trunk without twigs, and without textures, so at this point I’m only worried about the trunk shape as can be seen in the jsfiddle)

Answer 1

Never mind, got it to work.

Instead of:

model.faces = Tree.flattenArray(tree.faces);

I do:

model.faces    = [];
for (var i = 0; i < tree.faces.length; i++) {
  var face = tree.faces[i];
  model.faces.push(0);
  model.faces.push(face[0]); // v1
  model.faces.push(face[1]); // v2
  model.faces.push(face[2]); // v3
}    

Updated jsFiddle here: http://jsfiddle.net/KY7eq/