我正在尝试显示由SnappyTree / Proctree(http://www.snappytree.com/)创建的模型。
Proctree旨在与GLGE一起使用,但我几乎在使用Three.js中的库生成数据。基本上我构造一个自定义的json对象,向它添加proctree数据并使用JSONLoader生成最终的几何体。
我怀疑发生了什么,顶点(pointcloud)被正确导入,但是数组面引用错误的顶点或者被解释为错误。
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
}
它几乎正常工作(尚未进入材料......)树看起来有点正确,但面部有点混乱,我确信有一些简单的格式差异,应该可以修改faces数组,使其与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=TrunkType2&twigMaterial=BranchType5(除了我的代码到目前为止只尝试导入没有树枝的树干,没有纹理,所以在这一点上我只是担心树干的形状,因为可以在jsfiddle中看到
答案 0 :(得分:1)
没关系,让它发挥作用。
而不是:
model.faces = Tree.flattenArray(tree.faces);
我做:
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
}
在此处更新了jsFiddle:http://jsfiddle.net/KY7eq/