CODEWITHSUNDEEP
three.js
hgates
hgates

Reputation: 229

How to create multiple polygon into single geometry with three js

I have some countries polygon. I want to draw them on top of my sphere with three js, but when I'm trying to draw these polygons, fps drop down, at 3fps....

Someone told me to create juste ONE geometry and include all the polygons into it, did you have an example?

What I'm doing:

foreach countrie in countries 
  geometry = new THREE.shapeGeometry();
  geometry.push(vectorArray);
  var mesh = new Mesh(geometry);
  globe.Add(mesh);

With over 250 countries, Three js just creates over 38k buffer. Strange behaviour, without any control, we shouldn't be able to create such buffers... so where am I wrong? I need help.

Upvotes: 1

Views: 2765

Answers (1)

Stemkoski
Stemkoski

Reputation: 9045

The three.js class THREE.GeometryUtils has a number of helpful methods for situations like these...

In particular, there is a merge method that will combine two Geometry objects into one. Assume that you have three geometry objects, country1, country2, country3. Then you could do something like:

temp = THREE.GeometryUtils.merge( country1, country2 );

allCountries = THREE.GeometryUtils.merge( temp, country3 );

Hope this helps!

Upvotes: 2

Related Questions