three.js - ipad管幾何上的畫布紋理

Question

我有一個管幾何的三維模型。 生產方面有18000個坐標。 我正在采取每9個坐標，以便實際繪制9000個坐標來構建管幾何。 我只能使用CanvasRenderer 。

現在，當我在WebGLRenderer使用vertexColors: THREE.VertexColors時，模型在每個面上顯示不同的顏色。 當我將其更改為CanvasRenderer ，模型僅變為白色。 即使我改變了vertexColors: THREE.FaceColors ，結果也一樣。

請在下面找到jsfiddle的鏈接和我以前的鏈接，其中mrdoob添加了對material.vertexColors = THREE.FaceColors支持到CanvasRenderer。

支持畫布渲染中的頂點顏色

在畫布渲染管

請在下面找到圖像以根據值應用顏色。

如圖所示，對於每個坐標，有12個不同程度的值。 所以我創建了一個半徑為12的管子。然后我將這些值存儲到JSON文件中，但是當有18000個點時，文件變得很重。 即使我正在繪制2000點，也需要花費太多時間。 對於2000個區段，每個區段有12個面，管上有24000個面。

請在下面找到編程邏輯，以根據參數值應用顏色。

//獲取res值並應用顏色var lblSeg = 0; var pntId; var d = 0; var faceLength = tube.faces.length; var degrees = ['30'，'60'，'90'，'120'，'150'，'180'，'210'，'240'，'270'，'300'，'330']; var faces = tube.faces; var degreeCntr = 0; var degreeProp; //console.log(faces）; 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上渲染這個模型，所以只能使用canvas渲染器。

那么，如何讓這款機型更輕巧，在iPad上運行順暢呢？ 還有其他方法可以在每張臉上塗上顏色嗎？ 如果可以應用畫布貼圖作為紋理使模型更亮，那么如何使用基於值的所有顏色構建該貼圖？

更新：將庫版本更改為r53， vertexColors: THREE.FaceColors和face.color.setRGB( Math.random(), Math.random(), Math.random()) ，模型在畫布上為每個面顯示隨機顏色渲染。

所以現在的問題是根據要求應用顏色（通過畫布地圖或任何可行的解決方案），並使模型更輕，以便在iPad上平滑加載。

Answer 1

我相信這會給你帶來更好的性能+如果你能想出一些計算每個角度偏移的顏色的自動方法，你可以直接設置十六進制顏色：

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

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

}

正如我在上一條消息中解釋的那樣 - three.js - 文本旁邊的文字 ，如果你試圖渲染這么多面孔，使用畫布紋理只會增加你fps的負荷。

如果你真的想在畫布渲染器上渲染24,000個面孔並且仍然希望它能在iPad上顯示出來 - 那么你就不在乎了！））

這是我現在能想到的唯一解決方案：

1）將您的管設置為僅1段。

2）創建12個畫布元素（對於每個半徑段），寬度等於管長度（參見上面的鏈接）。

3）現在想象一下你要在每個畫布內創建的2000個片段。 因此，您將畫布長度除以2000，並為此分區的每個部分設置您計算的顏色！ （就像Stats（）FPS欄顯示它的欄一樣，但你會得到每個欄不同的顏色）。

4）然后你只需將你的彩色條紋帆布紋理應用到你的12個半徑段中的每一個，你就可以去！

這樣你只能獲得初始頁面加載（計算'24,000個彩色條）和你的整個管只有GONNA 12個面！

現在，我知道你的下一個問題是：我將如何選擇我的面孔以顯示帶有標簽文字的線條？

好吧，很簡單！ 只需取當前面（12個中的1個）選擇位置坐標並將它們轉換回您的JSON，就像使用24,000個面部一樣;）

希望有所幫助！