# Wireframe with rectangle

**URL:** <https://discourse.threejs.org/t/wireframe-with-rectangle/2856>\
**Category:** Questions\
**Tags:** wireframe\
**Created:** [May 17, 2018, 3:13am UTC](https://discourse.threejs.org/t/wireframe-with-rectangle/2856 "2018-05-17T03:13:20Z")\
**Posts on this page:** 5\
**Page:** 1

<div class="post-metadata">

**Author:** ![chenxiaoleizi](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/chenxiaoleizi/32/5519_2.png) [@chenxiaoleizi](https://discourse.threejs.org/u/chenxiaoleizi)\
**Post date:** [May 17, 2018, 3:13am UTC](https://discourse.threejs.org/t/wireframe-with-rectangle/2856/1 "2018-05-17T03:13:20Z")

</div>

I want to do something like this.  
 ![QQ%E6%88%AA%E5%9B%BE20180517110058](https://cdck-file-uploads-canada1.s3.dualstack.ca-central-1.amazonaws.com/flex035/uploads/threejs/original/2X/b/b3ffe288e820d85c09f279ac148e9b083c6a7004.png)  
here is my code, and this is the result.  
 ![QQ%E6%88%AA%E5%9B%BE20180517104904](https://cdck-file-uploads-canada1.s3.dualstack.ca-central-1.amazonaws.com/flex035/uploads/threejs/original/2X/a/a0315d2e116fefc377b94515208187b40c2859f9.png)

```
var mtlLoader = new THREE.MTLLoader();
var objLoader = new THREE.OBJLoader();
mtlLoader.setPath('./model/hd/');
objLoader.setPath('./model/hd/');
mtlLoader.load('hd.mtl', function(materials){
  materials.preload();
  objLoader.setMaterials(materials);
  objLoader.load('hd.obj', function(obj){
    var geom = new THREE.Geometry();
    geom.fromBufferGeometry(obj.children[0].geometry); // BufferGeometry to Geometry
    var faces = geom.faces;
    var vertices = geom.vertices;
    var material = new THREE.LineBasicMaterial( { color: 0x0000ff } );
    faces.forEach(function(val, index){
      var geometry = new THREE.Geometry();
      geometry.vertices.push(vertices[val.a]);
      geometry.vertices.push(vertices[val.b]);
      var line = new THREE.Line(geometry, material.clone()); // line
      scene.add(line)
     }
 })
})

```

But it will reduce the `fps` because of so many `line` in the `scene`. Is there any better way to do this?

---

<div class="post-metadata">

**Author:** ![calrk](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/calrk/32/2746_2.png) [@calrk](https://discourse.threejs.org/u/calrk)\
**Post date:** [May 17, 2018, 5:40am UTC](https://discourse.threejs.org/t/wireframe-with-rectangle/2856/2 "2018-05-17T05:40:05Z")

</div>

What if instead of using separate line objects, you put them into a single geometry buffer object like this example?

[https://threejs.org/examples/?q=lines#webgl\_buffergeometry\_lines](https://threejs.org/examples/?q=lines#webgl_buffergeometry_lines)

Also in your example you shouldn’t need to clone the materials, just reuse the same one.

---

<div class="post-metadata">

**Author:** ![Atul\_Mourya](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/atul_mourya/32/1155_2.png) [@Atul\_Mourya](https://discourse.threejs.org/u/Atul_Mourya)\
**Post date:** [May 17, 2018, 12:00pm UTC](https://discourse.threejs.org/t/wireframe-with-rectangle/2856/3 "2018-05-17T12:00:38Z")

</div>

Best solution would be to use `EgdesGeometry` and assign `LineBasicMaterial`;

```
    var mtlLoader = new THREE.MTLLoader();
    var objLoader = new THREE.OBJLoader();
    mtlLoader.setPath('./model/hd/');
    objLoader.setPath('./model/hd/');
    mtlLoader.load('hd.mtl', function(materials){
      materials.preload();
      objLoader.setMaterials(materials);
      objLoader.load('hd.obj', function(obj){
        var geometry = obj.geometry;
        var edges = new THREE.EdgesGeometry( geometry );
        var line = new THREE.LineSegments( edges, new THREE.LineBasicMaterial( { color: 0xffffff } ) );
        scene.add( line );
     })
    })
```

---

<div class="post-metadata">

**Author:** ![chenxiaoleizi](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/chenxiaoleizi/32/5519_2.png) [@chenxiaoleizi](https://discourse.threejs.org/u/chenxiaoleizi)\
**Post date:** [May 18, 2018, 12:44am UTC](https://discourse.threejs.org/t/wireframe-with-rectangle/2856/4 "2018-05-18T00:44:23Z")

</div>

thanks! this is the best solution to solve the problem:grin:

---

<div class="post-metadata">

**Author:** ![chenxiaoleizi](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/chenxiaoleizi/32/5519_2.png) [@chenxiaoleizi](https://discourse.threejs.org/u/chenxiaoleizi)\
**Post date:** [May 18, 2018, 12:48am UTC](https://discourse.threejs.org/t/wireframe-with-rectangle/2856/5 "2018-05-18T00:48:16Z")

</div>

yes, this way will not reduce the `fps`, but i think it will not create rectangle.So i tyr the `EgdesGeometry`, it works well.