如何合并多个行，并在三个j中有差距 [英] How to merge multiple lines with gaps in threejs

问题描述

我成功加载了一个数据集，其中包含表示城市建筑物的多边形数据。所以每个多边形代表一个建筑物。在Threejs中，我可以成功地表示它们，但是当我尝试将单独的线合并到一个几何体中时，所有线都连接了（我明白为什么这是有意义的，因为所有顶点都添加到同一个集合中）。

但是，如何将这些单独的建筑多边形合并为一个单一的几何体，而不需要将单独的建筑多边形的线彼此连接？

我现在的代码：

  var geometry = new THREE.Geometry（）; （var i = 0; i< data.length; i ++）{
 var temp = new THREE.Geometry（）; 
 
 
 var polygon = data [i]; （var j = 0; j< polygon.length; j ++）{
 temp.vertices.push（new THREE.Vector3（polygon [j] [0]，polygon [j] [1 ]，0））; 
 
 temp.vertices.push（new THREE.Vector3（polygon [0] [0]，polygon [0] [1]，0））; 
 
 THREE.GeometryUtils.merge（geometry，temp）; 
} 
 scene.add（new THREE.Line（geometry，buildingMaterial，THREE.LineStrip））; 
  

数据是包含建筑物所有多边形数据的变量。

$ b $解决：

  var cube = new THREE。 几何（）; $ _ 
 $ b for（var i = 0; i< data.length; i ++）{
 var shape = new THREE.Shape（_。uniq（_。map（data [i]，函数（d）{return new THREE.Vector3（d [0]，d [1]，100）;}）））; 
 shape.extrude（{amount：100}）
 var points = shape.createPointsGeometry（）; 
 THREE.GeometryUtils.merge（cube，shape.extrude（{amount：-1  -  Math.random（）* 1，bevelSegments：0，steps：1，bevelSegments：0，bevelSize：0，bevelThickness：0} ））; 
 
 
 $ b var mesh = new THREE.Mesh（cube，new THREE.MeshBasicMaterial（{color：0x333333，wireframe：false}））; 
 scene.add（mesh）; 
  

I am successfully loading a dataset with polygon data that represent buildings in a city. So every polygon represents a single building. In Threejs I can successfully represent them, but when I try to merg the separate lines into one geometry, all the lines are connected (I understand why this makes sense, since all the vertices are added to the same collection).

But how do I merge those separate building polygons into a single geometry without having the lines of the separate building polygons connected to each other?

The code I have right now:

var geometry = new THREE.Geometry();

            for (var i = 0; i < data.length; i++) {
                var temp = new THREE.Geometry();
                var polygon = data[i];
                for (var j = 0; j < polygon.length; j++) {
                    temp.vertices.push(new THREE.Vector3(polygon[j][0], polygon[j][1], 0));
                }
                temp.vertices.push(new THREE.Vector3(polygon[0][0], polygon[0][1], 0));

                THREE.GeometryUtils.merge(geometry, temp);
            }
            scene.add(new THREE.Line(geometry, buildingMaterial, THREE.LineStrip));

data is the variable that contains all the polygon data for the buildings.

解决方案

Solved:

            var cube = new THREE.Geometry();

            for (var i = 0; i < data.length; i++) {
                var shape = new THREE.Shape(_.uniq(_.map(data[i], function(d) { return new THREE.Vector3(d[0], d[1], 100); })));
                shape.extrude({amount: 100})
                var points = shape.createPointsGeometry();
                THREE.GeometryUtils.merge(cube, shape.extrude({amount: -1 - Math.random() * 1, bevelSegments: 0, steps: 1 , bevelSegments: 0, bevelSize: 0, bevelThickness: 0}));

            }

            var mesh = new THREE.Mesh(cube, new THREE.MeshBasicMaterial({color: 0x333333, wireframe: false}));
            scene.add(mesh);

这篇关于如何合并多个行，并在三个j中有差距的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！