Question

我用外部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);                 
            }

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

Answer 1

如果您希望线条随管移动/旋转，请将这些线条添加为tubeMesh的子项，而不是scene的子项。

tubeMesh.add( line );

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

three.js - 在管几何中的每个段绘制线

1 个答案: