three.js所 - 上管的几何形状设计的ipad帆布质地(three.js - canvas t

我有一个管几何形状的3D模型。 有对生产方18000坐标。 我走的每第九统筹，这样实际上绘制9000坐标建立一个管的几何形状。 我已经使用CanvasRenderer只。

现在，当我使用vertexColors: THREE.VertexColors在WebGLRenderer ，该模型显示在每个面上不同的颜色。 当我将其更改为CanvasRenderer ，模型变成只有白色。 即使我改变vertexColors: THREE.FaceColors ，结果是一样的。

请找的jsfiddle和我以前的链接下面的链接，其中mrdoob添加支持material.vertexColors = THREE.FaceColors到CanvasRenderer。

在画布上绘制顶点颜色支持

管在画布上绘制

请找到下面的图像应用基于价值观的颜色。

由于图像中示出有在12种不同的程度每坐标12倍的值。 所以，我创建了为12半径段管然后我保存这些值转换成JSON文件，但因为有18000点，该文件将成为重。 即使我绘制2000点需要花费太多的时间。 对于2000段，每段具有12面，有24000分的面上的管。

请从下面的编程逻辑基于参数的值，以应用颜色。

//获取资源价值和应用颜色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(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资源; 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。

Answer 1:

我相信这会给你一个更好一点的性能+如果你能想出偏移，你可以直接设置十六进制颜色计算每个角色的一些自动化的方法：

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

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

}

-正如我在以前的消息向你解释three.js所-旁边的文字行 ，给你fps的，如果你会尝试呈现这么多的面孔用帆布质地，只会增加负担。

如果你真的想呈现在画布上渲染24000个脸，还是希望它会出现在iPad好 - 你出你的心））！

这里是我能想到的，现在唯一的解决办法：

1）设置你管到只有1段。

2）创建画布12名的元素（每半径段）与宽度等于您的管长度（见上文我的链接）。

3）现在想象你的2000段你要每个画布中创建。 所以，你用2000和这种分工您设定计算颜色的部分中的每一个划分你的画布长度！ （就像统计（）FPS栏显示它的酒吧，但你将不得不各条不同的颜色）。

4）然后你只需运用您的彩色酒吧，帆布质地的12个半径段的每一个，你是好去！

这样，你就只能得到初始页面加载（计算“时间24000有色条）和你的整个管ONLY会是12个脸部！

现在，我知道你的下一个问题将是：我怎么会接我的面孔展示我行与标签的文字？

好了，很简单！ 就拿当前面（12 1）挑位置坐标，并将它们转换回到你的JSON，只是你会拥有24,000面做同样的方式;）

希望帮助！

文章来源: three.js - canvas texture on tube geometry for ipad