Wireframe with rectangle

I want to do something like this.
QQ%E6%88%AA%E5%9B%BE20180517110058
here is my code, and this is the result.
QQ%E6%88%AA%E5%9B%BE20180517104904

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?

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

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

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 );
     })
    })
3 Likes

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

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

1 Like