How to create multiple polygon into single geometry with three js

Question

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.

Wilt · Accepted Answer · 2016-01-25 16:03:03Z

2

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!

edited Jan 25, 2016 at 16:03

Wilt

44.9k15 gold badges163 silver badges216 bronze badges

answered Apr 19, 2013 at 18:11

Stemkoski

9,0733 gold badges49 silver badges64 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

How to create multiple polygon into single geometry with three js

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related