我正在尝试显示由 SnappyTree/Proctree ( http://www.snappytree.com/ ) 创建的模型。
Proctree 旨在与 GLGE 一起使用,但我几乎可以使用 Three.js 中的库生成数据。基本上,我构建了一个自定义 json 对象,向其中添加 proctree 数据并使用 JSONLoader 生成最终的几何图形。
我怀疑正在发生的事情,顶点(点云)被正确导入,但数组面指的是错误的顶点或被错误地解释。
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
}
它几乎可以工作(还没有进入材料..)树看起来有点正确,但是面有点乱,我敢肯定有一些简单的格式差异,应该可以修改面数组,因此它可以与 Three.js 一起正常工作。
JSFiddle在这里:http: //jsfiddle.net/nrZuS/
如何将数据正确导入 Three.js?
这就是它的样子: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=1.55&trunkMaterial=TrunchType=TrunkType 2& twigMaterial树枝,并且没有纹理,所以此时我只担心在 jsfiddle 中可以看到的树干形状)