Json的WireFrame在Three.js中形成几何

Question

我想使用以下Three.js代码以Json格式显示由顶点定义的并行线框

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 );

但是，上面的代码产生了这种可视化：

​

​

虽然我想要制作一个可视化，其中内部线框也是可见的，如下：

​

​

问题：您知道我如何修改上面的Three.js代码以生成第二张图片中显示的完整线框吗？

Upadate：使用函数WireframeGeometry，您有以下情节：

​

​

对角线出现在网格的每个面上。你知道一个不产生对角线的函数吗？

非常感谢您的帮助！

Answer 1

解决方案粗糙且不完善，是一个有待改进和优化的巨大领域。

您创建一个几何图形，并在THREE.LineSegments()的两个实例之间共享它，用于一个盒子的对立面。

​

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>

​