导入 SnappyTree (proctree) 模型 [英] Importing SnappyTree (proctree) model

问题描述

我正在尝试显示由 SnappyTree/Proctree 创建的模型 ( http://www.snappytree.com/).

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

Proctree 旨在与 GLGE 一起使用，但我几乎可以在 Three.js 中使用库生成的数据.基本上，我构建了一个自定义的 json 对象，向其中添加 proctree 数据并使用 JSONLoader 生成最终几何图形.

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
}

它几乎可以工作(还没有进入材料......)树看起来有点正确，但是面孔有点乱，我确定存在一些简单的格式差异，应该可以修改 faces 数组，使其与 Three.js 一起正常工作.

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 在这里:http://jsfiddle.net/nrZuS/

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

如何将数据正确导入 Three.js?

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)

推荐答案

没关系，开始吧.

代替:

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

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/

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

这篇关于导入 SnappyTree (proctree) 模型的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！