0

我从外部 json 文件创建了一个具有 200 个坐标的管几何图形。请找到以下代码。

function plotPath()
        {                                           
            var obj = getPath();
            var segments = obj.path.length;
            var closed = false;
            var debug = false;
            var radiusSegments = 12;
            var tube;
            var points = [];
            var x=0,y=0,z=0; var vertices=[];           

            var point2x, point2y;

            function v(x,y,z) {
                  return new THREE.Vertex(new THREE.Vector3(x,y,z));
                };

            for(var i=0; i<obj.path.length; i++)
            {                               
                var point = obj.path[i].point;                              
                points.push(point);                 
            }

            extrudePath = new THREE.SplineCurve3(points);           
            extrudePath.dynamic = true;         

            tube = new THREE.TubeGeometry(extrudePath, segments, 60, radiusSegments, closed, debug);
            tube.dynamic = true;

            tube.verticesNeedUpdate = true;
            tube.dynamic = true;

            var faceIndices = [ 'a', 'b', 'c', 'd' ];
            var f;

            console.log(tube.faces[0]);
            for ( var i = 0; i < tube.faces.length; i ++ ) 
            {                           
                f = tube.faces[i];
                color = new THREE.Color( 0xffffff );
                color.setRGB( Math.random(), Math.random(), Math.random());

                for(var j=0;j<4;j++)
                {
                    vertexIndex = f[ faceIndices[ j ] ];    
                    p = tube.vertices[ vertexIndex ];                   
                    f.vertexColors[ j ] = color;
                }
            }


            tubeMesh = new THREE.Mesh(tube ,new THREE.MeshBasicMaterial( 
                    { color: 0xffffff, shading: THREE.FlatShading, side: THREE.DoubleSide, wireframe: false, transparent: false, 
                        vertexColors: THREE.VertexColors, overdraw: true } ));


            var v = new THREE.Vector3(1,0,0).normalize();           
            tubeMesh.applyMatrix(matrix.makeRotationAxis(v, 0));
            tubeMesh.applyMatrix(matrix.makeTranslation(-500,0,0)); 


            if ( tube.debug ) tubeMesh.add( tube.debug );                                   
            scene.add(tubeMesh);
            objects.push(tubeMesh);                                         
        }

现在我想在每个段放置/绘制一些标记，例如带有文本的线条。我试图通过在每个坐标的 x 和 y 上加 10 来画线，但是管子是平移的，所以无法从确切的点画线。下面是我用来添加行的代码。

for(var i=0; i<obj.path.length; i++)
            {                               
                var point = obj.path[i].point;
                point2x = point.x+10;
                point2y = point.y+10;

                var lineGeo = new THREE.Geometry();
                  lineGeo.vertices.push(v(point.x, point.y, 0), v(point2x, point2y, 0));
                  var lineMat = new THREE.LineBasicMaterial({
                    color: 0x000000, lineWidth: 2});
                  var line = new THREE.Line(lineGeo, lineMat);
                  line.type = THREE.Lines;
                  scene.add(line);

                points.push(point);                 
            }

如何在管几何的每个部分绘制/放置带有文本的此类标记？

4

1 回答 1

1

如果您希望您的线条与您的管一起移动/旋转，则将线条添加为 的子级tubeMesh，而不是 . 的子级scene。

tubeMesh.add( line );

如果您需要知道如何正确绘制线条，请查看 three.js 线条示例。

于 2012-11-08T14:29:26.297 回答