vasturiano / three-conic-polygon-geometry Goto Github PK

View Code? Open in Web Editor NEW

36.0 3.0 13.0 679 KB

ThreeJS geometry for drawing polygons on a sphere

Home Page: https://vasturiano.github.io/three-conic-polygon-geometry/example/countries-gdp-per-capita/

License: MIT License

HTML 30.00% JavaScript 70.00%

threejs polygon geojson sphere geography geometry

three-conic-polygon-geometry's Introduction

ThreeJS Conic Polygon Geometry

A ThreeJS geometry class for drawing polygons on a sphere using cones.

Examples:

Quick start

import { ConicPolygonGeometry } from 'three-conic-polygon-geometry';

or using a script tag

<script src="//unpkg.com/three-conic-polygon-geometry"></script>

then

const myMesh = new THREE.Mesh(
  new THREE.ConicPolygonGeometry(polygonGeoJson),
  new THREE.MeshBasicMaterial({ color: 'blue' })
);

API reference

Constructor

ConicPolygonGeometry(polygonGeoJson: GeoJson polygon coordinates, bottomHeight: Float, topHeight: Float, closedBottom: Boolean, closedTop: Boolean, includeSides: Boolean, curvatureResolution: Float)

polygonGeoJson: Coordinates array as specified in GeoJson geometry.coordinates for type: Polygon. The first item is the polygon contour, additional items are the inner holes. It's recommended to split the geometries at the anti-meridian.
bottomHeight: Starting height of the cone. Default is 0.
topHeight: Ending height of the cone. Default is 1.
closedBottom: Whether to add a cap surface on the cone bottom. Default is true.
closedTop: Whether to add a cap surface on the cone top. Default is true.
includeSides: Whether to include the side surfaces of the cone. Default is true.
curvatureResolution: The resolution in angular degrees of the sphere curvature. The finer the resolution, the more the polygon is fragmented into smaller faces to approximate the spheric surface, at the cost of performance. Default is 5.

Properties

.parameters: Object

An object with a property for each of the constructor parameters. Any modification after instantiation does not change the geometry.

Groups

The geometry supports three distinct groups to which different materials can be applied.

0: The side surface of the cone.
1: The bottom surface of the cone.
2: The top surface of the cone.

three-conic-polygon-geometry's People

Contributors

Stargazers

Watchers

Forkers

cptflammin neu-yuyang wwwk sermonis windynature limang4545 ptgreg zzikkzzakk w0lramd andycheung-hub amjedomar ksachikonye muhfiz

three-conic-polygon-geometry's Issues

Error when creating a Hexagon in React-three globe

I'm experiencing this bug a couple repos up from here, but I'm pretty sure its a bug since the other repos just call this one.

I'm getting this GEOJSON feature from uber's h3ToGeoJson function.
when I plug it into geojson.io it appears normally.
however when I put it on the globe it renders the polygon feature as everything except the hexagon.

{
    "type": "FeatureCollection",
    "features": [
        {
            "type": "Feature",
            "id": "8159bffffffffff",
            "properties": {},
            "geometry": {
                "type": "Polygon",
                "coordinates": [
                    [
                        [
                            -4.866872026589571,
                            15.219885219398503
                        ],
                        [
                            -4.01399844347046,
                            11.545295975414758
                        ],
                        [
                            -4.01399844347047,
                            11.545295975414751
                        ],
                        [
                            -0.3191827268566136,
                            9.731836670975918
                        ],
                        [
                            2.888107601500233,
                            11.881770859938978
                        ],
                        [
                            2.302842809205857,
                            16.098688642959498
                        ],
                        [
                            -1.711309903977913,
                            17.93540458181741
                        ],
                        [
                            -3.2925648296836454,
                            16.71898040589194
                        ],
                        [
                            -4.866872026589571,
                            15.219885219398503
                        ]
                    ]
                ]
            },
            "__id": "755664730"
        }
    ]
}

Let me know if there is a fix I can do to transform the hexagon, or a setting in the three conic polygon geometry to fix this

[Feature request] change of spheric resolution or bend polygon around sphere

The conic-polygon-geometry only uses border coords, it works fine for small regions. But for big regions, it makes large flat areas which will be blocked by the sphere surface:

with 0 altitude, only borders are visible for most regions

with 0.1 altitude, more visible regions, but still holes for big countries

The idea would be adding vertices in the middle of regions, especially for big regions, then bend around the globe, finally something like:

It will be very nice if the vertices/triangulated map can be done automatically!

Inaccurate Polygons

Hello there,

Many thanks for making this awesome package!

I have noticed that some country polygons from the Natural Earth data don't render correctly. This can be seen by removing the wireframe: true from this line in the Countries example and rotating/zooming to Iceland:

You can see that the triangles aren't correct. Now, I notice that raising the curvatureResolution parameter in the THREE.ConicPolygonGeometry constructor to 5 seems to fix that:

But this breaks other country polygons, such as the nearby Greenland.

Is it possible to configure the ConicPolygonGeometry to get the polygons perfect?

Cheers

Seb

vasturiano / three-conic-polygon-geometry Goto Github PK

three-conic-polygon-geometry's Introduction

ThreeJS Conic Polygon Geometry

Quick start

API reference

Constructor

Properties

Groups

three-conic-polygon-geometry's People

Contributors

Stargazers

Watchers

Forkers

three-conic-polygon-geometry's Issues

Error when creating a Hexagon in React-three globe

[Feature request] change of spheric resolution or bend polygon around sphere

Inaccurate Polygons

Recommend Projects

React

Vue.js

Typescript

TensorFlow

Django

Laravel

D3

Recommend Topics

javascript

web

server

Machine learning

Visualization

Game

Recommend Org

Facebook

Microsoft

Google

Alibaba

D3

Tencent