Wireframe with rectangle

Questions
1

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?

2

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.

3

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
4

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

5

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