1

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

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

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

支持画布渲染中的顶点颜色

画布渲染中的管

请在图像下方找到根据值应用颜色。 参数值

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

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

// 获取 res 值并应用颜色 var 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; 变量 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 上顺利加载和运行？还有其他方法可以在每张脸上涂上颜色吗？如果可以将画布贴图作为纹理应用以使模型更轻，那么如何根据值构建具有所有颜色的贴图？

更新： 将库版本更改为 r53vertexColors: THREE.FaceColors和face.color.setRGB( Math.random(), Math.random(), Math.random())后，模型在画布渲染上显示每个面的随机颜色。

所以现在的问题是根据要求应用颜色（通过画布地图或任何可行的解决方案）并使模型更轻以在 iPad 上顺利加载。

4

1 回答 1

3

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

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

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

}

正如我在上一条消息-three.js-line 旁边的文本中向您解释的那样，如果您尝试渲染如此多的面孔，使用画布纹理只会增加您的 fps 负载。

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

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

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

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

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

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

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

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

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

希望有帮助！

于 2012-12-08T00:01:22.080 回答