WireFrame of Json formated geometry in Three.js

Question

I would like to display the wireframe of a parallelepiped defined by vertexes in a Json format using the following Three.js code

var testCube ={
                "metadata":{
                "version":json['version'],
                "type":json['type'],
                "uvs":json['n_uvs'],
                "normals":json['n_normals'],
                "faces":json['n_faces'],
                "generator":"io_three",
                "vertices":json['n_vertices'],
                                            },
                "faces":json['faces'],
                "vertices":json['vertices'],
                "normals":json['normals'],
                "uvs":[],
                "name":json['name']}

var loader = new THREE.JSONLoader();

var model = loader.parse( testCube );

meshBox = new THREE.Mesh( model.geometry, model.materials[ 0 ] );

var geo = new THREE.EdgesGeometry( meshBox.geometry );

var mat = new THREE.LineBasicMaterial( { color: 0xffffff, linewidth: 2 });

var wireframe = new THREE.LineSegments( geo, mat );

scene.add( wireframe );

however, the above code produce this kind of visualization:

while I would like to produce a visualization where also the internal wireframe is visible as the following:

Question: do you know how I can modify the above Three.js code to produce a full wireframe as displayed in the second picture?

Upadate: using the function WireframeGeometry you have the following plot:

Diagonals appear on each face of the mesh. Do yo know a function that does not produce diagonals?

Thank you very much for your help!

Answer 1

The solution is rough and imperfect, and it's a huge field for improvement and optimization.

You create one geometry and share it between two instances of THREE.LineSegments() for opposing sides of a box.

var scene = new THREE.Scene();
var camera = new THREE.PerspectiveCamera(60, window.innerWidth / window.innerHeight, 1, 1000);
camera.position.set(-15, 10, 10);
var renderer = new THREE.WebGLRenderer({antialias: true});
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);

var controls = new THREE.OrbitControls(camera, renderer.domElement);

scene.add(new THREE.AmbientLight(0xffffff, .5));
var light = new THREE.DirectionalLight(0xffffff, .5);
light.position.setScalar(10);
scene.add(light);

var box = new THREE.Mesh(new THREE.BoxGeometry(10, 5, 5, 5, 5, 5), new THREE.MeshLambertMaterial({color:"gray"}));
scene.add(box);

var material = new THREE.LineBasicMaterial({
  vertexColors: THREE.VertexColors
});
var params = box.geometry.parameters;
var geometryGridXY = Grid(params.width, params.height, params.widthSegments, params.heightSegments, "yellow");
var gridXYFront = new THREE.LineSegments(geometryGridXY, material);
gridXYFront.position.z = params.depth / 2 + 0.001;
box.add(gridXYFront);
var gridXYBack = new THREE.LineSegments(geometryGridXY, material);
gridXYBack.position.z = -params.depth / 2 - 0.001;
box.add(gridXYBack);

var geometryGridYZ = Grid(params.height, params.depth, params.heightSegments, params.depthSegments, "aqua");
var gridYZLeft = new THREE.LineSegments(geometryGridYZ, material);
gridYZLeft.position.x = -params.width / 2 - 0.001;
gridYZLeft.rotation.y = -Math.PI * .5;
box.add(gridYZLeft);

render();

function render() {
  requestAnimationFrame(render);
  renderer.render(scene, camera);

}

body {
  overflow: hidden;
  margin: 0;
}

<script src="https://threejs.org/build/three.min.js"></script>
<script src="https://threejs.org/examples/js/controls/OrbitControls.js"></script>
<script>
  
  function Grid(width, height, widthSegments, heightSegments, color) {

    width = width || 1;
    height = height || 1;
    widthSegments = widthSegments || 1;
    heightSegments = heightSegments || 1;
    color = new THREE.Color(color !== undefined ? color : 0x444444);

    var stepWidth = width / widthSegments;
    var stepHeight = height / heightSegments;
    var halfWidth = width / 2;
    var halfHeight = height / 2;

    var vertices = [],
      colors = [], j = 0;

    for (let i = 0, k = -halfHeight; i <= heightSegments; i++, k += stepHeight) {

      vertices.push(-halfWidth, k, 0, halfWidth, k, 0);

      color.toArray(colors, j); j += 3;
      color.toArray(colors, j); j += 3;
    }

    for (let i = 0, k = -halfWidth; i <= widthSegments; i++, k += stepWidth) {

      vertices.push(k, halfHeight, 0, k, -halfHeight, 0);

      color.toArray(colors, j); j += 3;
      color.toArray(colors, j); j += 3;
    }

    var geometry = new THREE.BufferGeometry();
    geometry.addAttribute('position', new THREE.BufferAttribute(new Float32Array(vertices), 3));
    geometry.addAttribute('color', new THREE.BufferAttribute(new Float32Array(colors), 3));

    return geometry;

  }

</script>