1

チューブ形状の 3D モデルがあります。生産側の座標は 18000 あります。実際に 9000 座標をプロットしてチューブ ジオメトリを構築するように、9 番目ごとの座標を取得しています。使うCanvasRendererしかない。

で使用vertexColors: THREE.VertexColorsするWebGLRendererと、モデルは面ごとに異なる色を表示します。に変更するとCanvasRenderer、モデルは白色のみになります。変えvertexColors: THREE.FaceColorsても結果は同じです。

以下の jsfiddle のリンクと、mrdoob が CanvasRenderer のサポートを追加した以前のリンクを見つけてくださいmaterial.vertexColors = THREE.FaceColors。

キャンバス レンダリングでの頂点カラーのサポート

キャンバス レンダリングのチューブ

値に基づいて色を適用するには、画像の下を参照してください。 パラメータ値

画像に示すように、座標ごとに 12 の異なる角度で 12 の値があります。そこで、半径セグメントが 12 のチューブを作成しました。次に、これらの値を JSON ファイルに保存しましたが、18000 ポイントあるため、ファイルが重くなります。2000 ポイントをプロットしていますが、時間がかかりすぎます。2000 セグメントで各セグメントに 12 の面がある場合、チューブには 24000 の面があります。

パラメータの値に基づいて色を適用するプログラミング ロジックを以下に示します。

// res 値を取得して色を適用 var lblSeg=0; var pntId; 変数 d=0; var faceLength=tube.faces.length; var 度 = [ '30', '60', '90', '120', '150', '180', '210', '240', '270', '300', '330' ]; var 面 = tube.faces; var degreeCntr=0; var degreeProp; //console.log(顔); var res30=0,res60=0,res90=0,res120=0,res150=0,res180=0,res210=0,res240=0,res270=0,res300=0,res330=0; var res; var resDegree; var pnt=0;

                // fetching json data of resistivity values at different degree as                                                          //shown in the image
        var result = getResValue(); 


        for(var k=0; k<faceLength; k++){
            resDegree = degrees[degreeCntr];
            degreeProp = "r"+resDegree;

            res = result.resistivity[pnt][degreeProp];
            objects.push(result.resistivity[pnt]);              

            f = faces[k];               

            color = new THREE.Color( 0xffffff );

            if(res<5){                      
                color.setRGB( 197/255, 217/255, 241/255);
            }

            else if(res>=5 && res<50){                                                                          
                color.setRGB( 141/255, 180/255, 226/255);
            }

            else if(res>=50 && res<100){                                
                color.setRGB( 83/255, 141/255, 213/255);
            }

            else if(res>=100 && res<200){                               
                color.setRGB( 22, 54, 92);
            }

            else if(res>=200 && res<300){                           
                color.setRGB( 15/255,36/255,62/255);
            }

            else if(res>=300 && res<400){                               
                color.setRGB( 220/255, 230/255, 241/255);
            }

            else if(res>=400 && res<700){                               
                color.setRGB( 184/255, 204/255, 228/255);
            }

            else if(res>=700 && res<1200){                              
                color.setRGB( 149/255, 179/255, 215/255);
            }

            else if(res>=1200 && res<1500){                             
                color.setRGB( 54/255, 96/255, 146/255);
            }

            else if(res>=1700 && res<1800){                             
                color.setRGB( 36/255, 84/255, 98/255);
            }

            else if(res>1900){                              
                color.setRGB( 128/255, 128/255, 128/255);
            }

            for(var j=0;j<4;j++)
            {                   
                tube.vertices.push(f.centroid);
                vertexIndex = f[ faceIndices[ j ] ];    
                p = tube.vertices[ vertexIndex ];                   
                f.vertexColors[ j ] = color;                    
            }

            degreeCntr++;
            if(degreeCntr==10){
                degreeCntr=0;
            }
            if(k%12==0 && k!=0){
                pnt++;                  
            }
        }

このロジックでは、モデルのレンダリングに時間がかかりすぎて、モデルが重くなりすぎて、他の操作を実行できなくなります。Android の FPS は 2 ～ 3 FPS に低下します。実際には、このモデルを iPad でレンダリングする必要があるため、キャンバス レンダラーのみを使用する必要があります。

では、このモデルの負荷を軽くし、iPad でスムーズに動作させるにはどうすればよいでしょうか? すべての面に色を適用する他の方法はありますか? キャンバス マップをテクスチャとして適用してモデルを軽量化できる場合、値に基づいてすべての色を使用してそのマップを作成するにはどうすればよいですか?

更新: ライブラリのバージョンを r53 に変更した後vertexColors: THREE.FaceColors、face.color.setRGB( Math.random(), Math.random(), Math.random())モデルはキャンバス レンダリングで面ごとにランダムな色を表示します。

そのため、問題は要件に従って (キャンバス マップまたは実行可能なソリューションのいずれかによって) 色を適用し、モデルを軽量にして iPad にスムーズにロードすることです。

4

1 に答える 1

3

これにより、パフォーマンスが少し向上すると思います+各角度オフセットの色を自動計算する方法を思いつくことができれば、16進数の色を直接設定できます:

for ( var i = 0; i < tube.faces.length; i ++ ) {

    tube.faces[ i ].color.setHex( Math.random() * 0xffffff );

}

前のメッセージ - three.js - text next to lineで説明したように、キャンバス テクスチャを使用しても、非常に多くの面をレンダリングしようとすると、fps への負荷が増加するだけです。

本当にキャンバス レンダラーで 24,000 の顔をレンダリングしたいのに、iPad でうまく表示されることを期待しているのなら、気が狂っています!))

今のところ私が考えることができる唯一の解決策は次のとおりです。

1) チューブを 1 セグメントのみに設定します。

2)幅がチューブの長さに等しい12個のキャンバス要素(半径セグメントごと)を作成します(上記のリンクを参照)。

3) 各キャンバス内に 2000 個のセグメントを作成するとします。したがって、キャンバスの長さを 2000 で割り、この部分のすべての部分に対して、計算された色を設定します!!! (ちょうど Stats() FPS バーがそれをバーとして示していますが、各バーは異なる色で表示されます)。

4) 次に、colored-bars-canvas-texture を 12 の半径セグメントのそれぞれに適用するだけで、準備完了です!!

この方法では、最初のページの読み込み (24,000 の色付きバーを計算) だけが取得され、チューブ全体が 12 面になるだけです!!!

さて、あなたの次の質問は次のようなものになると思います: タグ テキスト付きのセリフを表示するために顔を選択するにはどうすればよいですか?

とてもシンプルです。現在の顔 (12 個中 1 個) の位置座標を選択し、24,000 個の顔の場合と同じ方法で JSON に変換するだけです;)

それが役立つことを願っています!

于 2012-12-08T00:01:22.080 に答える