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个面部一样;）

希望有所帮助！