geoJSONをthree.jsで線としてではなくメッシュとして描画し、色で塗りつぶすにはどうすればよいですか？

Question

私はthree.jsで地球儀を作っており、いくつかのデータレイヤーを追加しています。すべてのレイヤーはgeoJSONから作成されます。私は地球（地球の最初のデータファイル）が線として表示されるように設定しました。これはThreeGeoJSONを使用します。

しかし、私はちょうど輪郭を望んでいません。私は色で国を記入したいと思います。

私の現在のプロジェクトはここで見ることができます： http://bl.ocks.org/jhubley/321232d4ccefefcdc53218fd0adccac5

コードはここにある： https://gist.github.com/jhubley/321232d4ccefefcdc53218fd0adccac5

私はメッシュの代わりに、線としてポリゴンとマルチポリゴンを描画する新しい機能を作成しようとしました。その機能は次のとおりです。

function drawShape(x_values, y_values, z_values, options) { 
     var shape_geom = new THREE.BoxGeometry(); 
     createVertexForEachPoint(shape_geom, x_values, y_values, z_values); 

     var shape_material = new THREE.MeshBasicMaterial({color: 0xffff00 }); 
     var shape = new THREE.Mesh(shape_geom, shape_material); 
     scene.add(shape); 

     clearArrays(); 
    } 

残念ながら、私はそれを使用すると何も表示されません。理由を理解するのに役立つコンソールにエラーはありません。

どのように国を設定して記入できるのか説明できる人はいますか？アドバイスや指針は非常に高く評価されます。

Answer 1

@ mlknは、メッシュを塗りつぶすために三角形を使用する必要があると言っていました。

私は少し周りめちゃめちゃ：

function drawLine(x_values, y_values, z_values, options) { 
    // container 
    var obj = new THREE.Object3D(); 

    // lines 
    var line_geom = new THREE.Geometry(); 
    createVertexForEachPoint(line_geom, x_values, y_values, z_values); 
    var line_material = new THREE.LineBasicMaterial({ 
    color: 'yellow' 
    }); 

    var line = new THREE.Line(line_geom, line_material); 

    obj.add(line); 

    // mesh 
    var mesh_geom = new THREE.Geometry(); 
    createVertexForEachPoint(mesh_geom, x_values, y_values, z_values); 
    var mesh_material = new THREE.MeshBasicMaterial({ 
    color: 'blue', 
    side: THREE.DoubleSide 
    }); 
    var mesh = new THREE.Mesh(mesh_geom, mesh_material); 

    obj.add(mesh); 

    scene.add(obj); 

    clearArrays(); 
} 

Object3Dobjはラインとメッシュの両方をラップしています。

顔（三角形）は、ここで作成されます。

function createVertexForEachPoint(object_geometry, values_axis1, values_axis2, values_axis3) { 
    for (var i = 0; i < values_axis1.length; i++) { 
     object_geometry.vertices.push(new THREE.Vector3(values_axis1[i], 
      values_axis2[i], values_axis3[i])); 

     object_geometry.faces.push(new THREE.Face3(0, i + 1, i)); // <- add faces 
    } 
} 

結果があるため、データや頂点の順序/生成の場合は混乱のビットが、私にはわからないです。

デモ：

• https://gist.github.com/marcopompili/f5e071ce646c5cf3d600828ace734ce7
• http://bl.ocks.org/marcopompili/f5e071ce646c5cf3d600828ace734ce7

threeGeoJSONが悪いあなただけvar myscene = ...にvar scene = ...の名前を変更する必要がある例と全体として、構造なしに、IMO書かれていますlibはうまく動作しません。

また、CPU使用量が多く、おそらく描画コールが多すぎます。

Answer 2

アウトラインを構成し、線で描画するセグメントがあります。しかし、塗りつぶされた形は三角形から構築されなければなりません（Webgl描画モードの詳細there）。

したがって、塗りつぶし国をレンダリングするには、セグメントセットの三角形分割を行う必要があります。これを行うには複数の方法があり、コードの使用準備ができています（たとえば、this earcut implementation）。

しかし、地球儀上の図形をマップしたいので、次の問題は生成されたポリゴンのサイズになる可能性があります。使用する三角形分割が大きな三角形を生成し、頂点を球形の座標に変換すると、大きな三角形がフラットになります。ここでは、フラグメントシェーダまたはそれ以上の三角形分割（たとえば、三角形領域に基づく）でdisplacement mappingを使用できます。

最後の三角法は計算コストが高いので、動的に行う必要がない場合は、オフラインジオメトリの作成を検討してください。動的データを三角形分割する必要がある場合は、そのタスク（またはプロジェクトが大きい場合は超高速非javascriptサーバー）にwebworkerを使用することを検討してください。