three.js - ipad 管几何上的画布纹理

Question

我有一个管几何的 3D 模型。生产端有18000个坐标。我每 9 个坐标取一次，以便实际绘制 9000 个坐标来构建管几何图形。我只能使用CanvasRenderer。

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

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

support for vertex color in canvas rendering

tube in canvas rendering

请在图片下方找到根据值应用颜色。

如图所示，每个坐标有 12 个不同角度的 12 个值。所以我创建了一个半径段为 12 的管。然后我将这些值存储到 JSON 文件中，但由于有 18000 个点，文件变得很重。即使我正在绘制 2000 个点，也需要花费太多时间。对于 2000 个段，每个段有 12 个面，管上有 24000 个面。

请在下面找到根据参数值应用颜色的编程逻辑。

// 获取 res 值并应用颜色 变量 lblSeg=0;变量 pntId;变量 d=0; var faceLength=tube.faces.length; var degree = ['30', '60', '90', '120', '150', '180', '210', '240', '270', '300', '330' ]; var faces = tube.faces;变量度Cntr = 0； var degreeProp; //console.log(faces); 变量 res30=0,res60=0,res90=0,res120=0,res150=0,res180=0,res210=0,res240=0,res270=0,res300=0,res330=0; 变量资源；变量 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 - text next to line 中向您解释的那样，如果您尝试渲染这么多面，使用画布纹理只会增加您的 fps 负载。

如果你真的想在画布渲染器上渲染 24,000 个面，并且仍然希望它在 iPad 上显示良好 - 你疯了！））

这是我目前能想到的唯一解决方案：

1) 将您的管子设置为仅 1 段。

2) 创建 12 个画布元素（对于每个半径段），其宽度等于您的管长度（请参阅上面的链接）。

3) 现在想象一下，您将在每个画布内创建 2000 个片段。因此，您将画布长度除以 2000，并为该除法的每一部分设置计算颜色！！！ （就像 Stats() FPS 条显示它的条一样，但您将让每个条具有不同的颜色）。

4) 然后，您只需将彩色条画布纹理应用于 12 个半径段中的每一个，就可以开始了！！

这样，您只会获得初始页面加载（计算 24,000 个彩色条），并且您的整个管道只有 12 个面！！！

现在，我知道你的下一个问题是：我将如何挑选我的面孔来显示我的带有标签文本的线条？

嗯，很简单！只需获取当前人脸（12 个中的 1 个）选择位置坐标并将它们转换回您的 JSON，就像处理 24,000 个人脸一样；）

希望有帮助！