Javascript three.js-ipad管状几何图形上的画布纹理

我有一个管状几何体的3d模型。生产方面有18000个坐标。我每取9个坐标，这样就可以绘制9000个坐标来构建一个管状几何体。我只能使用

CanvasRenderer

现在，当我在

WebGLRenderer

中使用

vertexColors:THREE.vertexColors

时，模型在每个面上显示不同的颜色。当我将其更改为

CanvasRenderer

时，模型将仅变为白色。即使我更改了

顶点颜色：三种.FaceColors

，结果也是一样的

请在下面找到jsfiddle的链接和我之前的链接，其中mrdoob为CanvasRenderer添加了对

material.vertexColors=THREE.FaceColors

的支持

请在下面的图像中查找，以便根据值应用颜色。

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

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

//获取res值并应用颜色 var lblSeg=0；var pntId；var d=0；变量faceLength=tube.faces.length； 变量度=['30'，'60'，'90'，'120'，'150'，'180'，'210'，'240'，'270'，'300'，'330']； 变量面=管面；var degreeCntr=0；var degreeProp； //控制台日志（面）； 变量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-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++;                  
            }
        }

//获取不同程度电阻率值的json数据//如图所示
var result=getResValue（）；
对于（var k=0；k我相信这将给您带来更好的性能+如果您能够想出一些自动计算每个角度偏移的颜色的方法，您可以直接设置十六进制颜色：

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

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

}

for（变量i=0；i

正如我在上一条消息中向您解释的，如果您试图渲染如此多的面，那么使用画布纹理只会增加fps的负载

如果你真的想在画布渲染器上渲染24000张脸，还希望它能在iPad上显示得很好，那你就疯了！）

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

1） 将管状体设置为仅1段

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

3） 现在想象一下，您将在每个画布内创建2000个片段。所以，你把你的画布长度除以2000，并为每一部分设置你的计算颜色！！！（就像Stats（）FPS栏显示它的栏一样，但每个栏都有不同的颜色）

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

这样你只会得到初始页面加载（计算24000条彩色条），而你的整个管道只有12个面

现在，我知道你们的下一个问题是：我将如何选择我的脸来用标记文本显示我的线条

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

希望有帮助
 小提琴正在演奏r.50。变化是r.52。同样，如果你一次只问一个问题，并且保持你的例子简单，你会得到更多的帮助。这个问题会让读者的眼睛变得呆滞。好的，我会把它改成r.52。我的问题是在画布地图上，所以我解释了整个场景，因为最终我只能在画布上渲染模型。如何从github下载旧版本的three.js？因为最新版本是r53。我可以从标签中选择它，但它没有显示下载r52包的选项@Westlangley设置“无库”，并将其包括在内。这里是一个有着脸的颜色和画布的：感谢如此伟大的高性能逻辑。我已经开始更改为r.53，段=1，画布上的12个面重新绘制。但当我和电子管互动时，它突然消失并再次出现。原因可能是什么-@Alex在“创建宽度等于管长度的12个画布元素（每个半径段）”-如何查找管长度。你能详细解释一下这个步骤吗？——@Alex UnderPlease提供一些例子（JSFiddle？）。现在，对于管状体长度-为什么不自己设置它，使管状体在场景中看起来很好（就像它已经做的那样？），然后获得画布宽度；）你能解释一下你的逻辑吗？——@Alex Under——还有一条路要走。我发现我的方法有些问题。1） 您将无法仅处理12个面（因为画布渲染器）。2） 您可能无法使用“路径”中的管几何体。我认为最好的方法是以30度角组合12个平面。这样你可以操纵他们的纹理贴图，但不是现在这样。看看，告诉我你的想法。