MeshLine Won't render

Questions
1

I’m trying to use MeshLines but I get the following error and the lines do not draw:
image

I have included a snippet of code. Can you tell me what I’m doing wrong?

 function draw(bGeometry)
        {

            
             
            
             var lineGeometry;
             var lineSeg;
             var graph = new THREE.Object3D();
             
             bGeometry.computeBoundingSphere();
              
           
             var mesh;
             var resolution = new THREE.Vector2( window.innerWidth, window.innerHeight );
             var material = new MeshLineMaterial({color: 0xff9900,  opacity:.6,useMap: false,
               
                resolution: resolution,
                sizeAttenuation: !false,
                lineWidth: .01,
                near: camera.near,
                far: camera.far});

            camera = new THREE.OrthographicCamera($container.width() / -2, $container.width() / 2, $container.height() / 2, $container.height() / -2, -500, 4000);

            for (var i = 0; i < bGeometry.vertices.length;  i += 2 )
            {
                
                     
             
                     lineGeometry = new THREE.Geometry();

                     lineGeometry.vertices.push(new THREE.Vector3(bGeometry.vertices[i].x,
                                    bGeometry.vertices[i].y,
                                    bGeometry.vertices[i].z));

                    lineGeometry.vertices.push(new THREE.Vector3(bGeometry.vertices[i+1].x,
                                    bGeometry.vertices[i+1].y,
                                    bGeometry.vertices[i+1].z));

                    lineSeg = new MeshLine(); 
                    lineSeg.setGeometry(lineGeometry);
    
                    mesh = new THREE.Mesh(lineSeg.geometry,material);
                    graph = new THREE.Object3D();
                    graph.add(mesh);
                    scene.add(graph);
                  

                  
                    
            }
2

The MeshLine class does not exist in the repo of three.js so I assume you are using a third party library, right?

I suggest you use the code from the following example which is a more efficient implementation of triangulated lines (it uses instanced rendering).

https://threejs.org/examples/webgl_lines_fat.html

3

I got the MeshLine code from (here:https://github.com/spite/THREE.MeshLine/blob/master/src/THREE.MeshLine.js

Thanks for your quick response, I appreciate it!

I thought MeshLine was a part of Threejs. I will use what you suggest, but I have another question. I need to create about 50,000 of the LineSegment2 objects. My concern is performance. I think if I try to group the line segments, it will be like trying to render 50k objects individually. I don’t think I can merge LineSegmentsGeometry into a single geometry and if it is possible, I think I might lose critical information about the line segment such as the name I attach to it and information about the coordinates of the endpoints. How can I render that many line segments and not take a performance hit?

4

I think it might be easier to provide help if you demonstrate your use case in a live demo.

In any event, you are in a conflict situation. You have to decide between performance or flexibility. In most situations, you can’t have both at the same time. I suggest you merge the geometry data and try to retain individual informations with a custom data structure as good as possible. For example you could create for each item a record and save the information at which position in the merged geometry buffer the item starts and ends. You can then attach additional information to this record like the name of the item.

5

Your recommendation is good. I appreciate the help. :smile:

6

I’m curious, why did you think this? I don’t think that many of the examples are part of three, but it’s a philosophical stance, at least they’re in their own repo. But this thing is in a different repo, three.js actually has something else called fat line. I know there were lots of modules too published under THREEx namespace, so i’m wondering if that makes things clearer for example.

7

To be honest, I saw this: THREE.MeshLine/src/ THREE.MeshLine.js

I did a cursory review.