poly-extrude 0.0.1 → 0.0.4

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (40) hide show
  1. package/dist/poly-extrude.js +97 -81
  2. package/dist/poly-extrude.js.map +1 -1
  3. package/dist/poly-extrude.min.js +2 -2
  4. package/dist/poly-extrude.mjs +97 -81
  5. package/package.json +7 -2
  6. package/src/polygon.js +12 -12
  7. package/src/polyline.js +21 -8
  8. package/src/util.js +27 -40
  9. package/.eslintignore +0 -12
  10. package/.eslintrc.js +0 -34
  11. package/.vscode/settings.json +0 -3
  12. package/babel.config.js +0 -12
  13. package/pnpm-lock.yaml +0 -3054
  14. package/rollup.config.js +0 -108
  15. package/test/buildings.html +0 -77
  16. package/test/data/a.png +0 -0
  17. package/test/data/building-texture-dark.jpg +0 -0
  18. package/test/data/building.geojson +0 -1118
  19. package/test/data/buildings-ny.geojson +0 -2845
  20. package/test/data/buildings.geojson +0 -1
  21. package/test/data/free-line.geojson +0 -1
  22. package/test/data/line.geojson +0 -1
  23. package/test/data/polygon.geojson +0 -1
  24. package/test/data/simple-hole.geojson +0 -1
  25. package/test/data/simple-line.geojson +0 -45
  26. package/test/data/simple.geojson +0 -1
  27. package/test/data/street.geojson +0 -1
  28. package/test/data//345/244/252/346/271/226.geojson +0 -8
  29. package/test/data//350/210/237/345/261/261/345/270/202.geojson +0 -1
  30. package/test/data//350/213/217/345/267/236.geojson +0 -1
  31. package/test/data//351/204/261/351/230/263/346/271/226.geojson +0 -1
  32. package/test/line-draw.html +0 -100
  33. package/test/line-uv.html +0 -69
  34. package/test/line.html +0 -56
  35. package/test/multi-polygon.html +0 -53
  36. package/test/ny-building.html +0 -67
  37. package/test/simple.html +0 -61
  38. package/test/street.html +0 -52
  39. package/test/util.js +0 -131
  40. package/test/uv.html +0 -77
package/test/line-draw.html DELETED
@@ -1,100 +0,0 @@
1
- <!DOCTYPE html>
2
- <html>
3
- <meta charset="UTF-8">
4
- <meta name="viewport" content="width=device-width, initial-scale=1">
5
- <meta name=renderer content=webkit>
6
- <script type="text/javascript" src="https://unpkg.com/@maptalks/geojson-bbox@1.0.4/dist/bbox.umd.js"></script>
7
- <script type="text/javascript" src="https://unpkg.com/three@0.138.0/build/three.min.js"></script>
8
- <script type="text/javascript" src="https://unpkg.com/three@0.142.0/examples/js/controls/OrbitControls.js"></script>
9
- <script type="text/javascript" src="./../dist/poly-extrude.js"></script>
10
- <script type="text/javascript" src="./util.js"></script>
11
- <!-- <script type="text/javascript" src="http://localhost/geometry-extrude/dist/geometry-extrude.js"></script> -->
12
-
13
- <style type="text/css">
14
- html,
15
- body {
16
- margin: 0px;
17
- height: 100%;
18
- width: 100%;
19
- }
20
-
21
- .container {
22
- width: 100%;
23
- height: 100%;
24
- }
25
- </style>
26
-
27
- <body>
28
- <canvas id="c" width="2000" height="1600" style="width:2000px;height:1600px;"></canvas>
29
- <script>
30
-
31
- function draw(coordinates, { offsetPoints: points }, scale) {
32
- const ctx = document.querySelector('#c').getContext('2d');
33
- const height = ctx.canvas.height;
34
- let minx = Infinity, miny = Infinity;
35
- coordinates.forEach(c => {
36
- const [x, y] = c;
37
- minx = Math.min(x, minx);
38
- miny = Math.min(y, miny);
39
- });
40
- function drawLine(coordinates, color = 'black') {
41
- coordinates.forEach((c, index) => {
42
- let [x, y] = c;
43
- x -= minx
44
- y -= miny;
45
- x *= scale;
46
- y *= scale;
47
- x += 50;
48
- y += 50;
49
- y = height - y;
50
- if (index === 0) {
51
- ctx.moveTo(x, y);
52
- } else {
53
- ctx.lineTo(x, y);
54
- }
55
- });
56
- ctx.stroke();
57
- }
58
-
59
- function drawPoints(coordinates) {
60
- const size = 2;
61
- coordinates.forEach(c => {
62
- let [x, y] = c;
63
- x -= minx
64
- y -= miny;
65
- x *= scale;
66
- y *= scale;
67
- x += 50;
68
- y += 50;
69
- ctx.fillStyle = 'red';
70
- ctx.fillRect(x - size / 2, height - y - size / 2, size, size);
71
- });
72
- }
73
- drawLine(coordinates);
74
- drawPoints(points, 'red');
75
- }
76
-
77
-
78
- function test() {
79
-
80
- getGeoJSON('./data/line.geojson').then(geojson => {
81
- flatCoordinates(geojson);
82
- geojson.features.forEach(feature => {
83
- const { type, coordinates } = feature.geometry;
84
- const time = 'time';
85
- console.time(time);
86
- const result = polyextrude.extrudePolylines(type === 'LineString' ? [coordinates] : coordinates, { depth: 4, lineWidth: 2 });
87
- console.timeEnd(time);
88
- console.log(result);
89
- draw(coordinates, result.results[0], 10);
90
- });
91
- })
92
- }
93
- test();
94
-
95
-
96
-
97
- </script>
98
- </body>
99
-
100
- </html>
package/test/line-uv.html DELETED
@@ -1,69 +0,0 @@
1
- <!DOCTYPE html>
2
- <html>
3
- <meta charset="UTF-8">
4
- <meta name="viewport" content="width=device-width, initial-scale=1">
5
- <meta name=renderer content=webkit>
6
- <script type="text/javascript" src="https://unpkg.com/@maptalks/geojson-bbox@1.0.4/dist/bbox.umd.js"></script>
7
- <script type="text/javascript" src="https://unpkg.com/three@0.138.0/build/three.min.js"></script>
8
- <script type="text/javascript" src="https://unpkg.com/three@0.142.0/examples/js/controls/OrbitControls.js"></script>
9
- <script type="text/javascript" src="./../dist/poly-extrude.js"></script>
10
- <script type="text/javascript" src="./util.js"></script>
11
- <!-- <script type="text/javascript" src="http://localhost/geometry-extrude/dist/geometry-extrude.js"></script> -->
12
-
13
- <style type="text/css">
14
- html,
15
- body {
16
- margin: 0px;
17
- height: 100%;
18
- width: 100%;
19
- }
20
-
21
- .container {
22
- width: 100%;
23
- height: 100%;
24
- }
25
- </style>
26
-
27
- <body>
28
- <script>
29
- const scene = createScene();
30
- function getTexture() {
31
- const texture = new THREE.TextureLoader().load('./data/a.png');
32
- texture.needsUpdate = true; //使用贴图时进行更新
33
- texture.wrapS = texture.wrapT = THREE.RepeatWrapping;
34
- // texture.repeat.set(0.002, 0.002);
35
- texture.repeat.set(1, 2);
36
- return texture;
37
- }
38
-
39
- const material = new THREE.MeshPhongMaterial({
40
- color: '#FFF',
41
- wireframe: false,
42
- vertexColors: false,
43
- map: getTexture()
44
- })
45
-
46
- function test() {
47
-
48
- getGeoJSON('./data/line.geojson').then(geojson => {
49
- flatCoordinates(geojson);
50
- geojson.features.forEach(feature => {
51
- const { type, coordinates } = feature.geometry;
52
- const time = 'time';
53
- console.time(time);
54
- const result = polyextrude.extrudePolylines(type === 'LineString' ? [coordinates] : coordinates, { depth: 10, lineWidth: 1 });
55
- console.timeEnd(time);
56
- console.log(result);
57
- const geometry = createBufferGeometry(result);
58
- const mesh = new THREE.Mesh(geometry, material);
59
- scene.add(mesh);
60
- });
61
- })
62
- }
63
- test();
64
-
65
-
66
- </script>
67
- </body>
68
-
69
- </html>
package/test/line.html DELETED
@@ -1,56 +0,0 @@
1
- <!DOCTYPE html>
2
- <html>
3
- <meta charset="UTF-8">
4
- <meta name="viewport" content="width=device-width, initial-scale=1">
5
- <meta name=renderer content=webkit>
6
- <script type="text/javascript" src="https://unpkg.com/@maptalks/geojson-bbox@1.0.4/dist/bbox.umd.js"></script>
7
- <script type="text/javascript" src="https://unpkg.com/three@0.138.0/build/three.min.js"></script>
8
- <script type="text/javascript" src="https://unpkg.com/three@0.142.0/examples/js/controls/OrbitControls.js"></script>
9
- <script type="text/javascript" src="./../dist/poly-extrude.js"></script>
10
- <script type="text/javascript" src="./util.js"></script>
11
- <!-- <script type="text/javascript" src="http://localhost/geometry-extrude/dist/geometry-extrude.js"></script> -->
12
-
13
- <style type="text/css">
14
- html,
15
- body {
16
- margin: 0px;
17
- height: 100%;
18
- width: 100%;
19
- }
20
-
21
- .container {
22
- width: 100%;
23
- height: 100%;
24
- }
25
- </style>
26
-
27
- <body>
28
- <script>
29
- const scene = createScene();
30
-
31
-
32
- function test() {
33
-
34
- getGeoJSON('./data/simple-line.geojson').then(geojson => {
35
- flatCoordinates(geojson);
36
- geojson.features.forEach(feature => {
37
- const { type, coordinates } = feature.geometry;
38
- const time = 'time';
39
- console.time(time);
40
- const result = polyextrude.extrudePolylines(type === 'LineString' ? [coordinates] : coordinates, { depth: 4, lineWidth: 1 });
41
- console.timeEnd(time);
42
- console.log(result);
43
- const geometry = createBufferGeometry(result);
44
- const mesh = new THREE.Mesh(geometry, new THREE.MeshLambertMaterial({ color: '#FFF', wireframe: false, vertexColors: false }));
45
- scene.add(mesh);
46
- });
47
- })
48
- }
49
- test();
50
-
51
-
52
-
53
- </script>
54
- </body>
55
-
56
- </html>
package/test/multi-polygon.html DELETED
@@ -1,53 +0,0 @@
1
- <!DOCTYPE html>
2
- <html>
3
- <meta charset="UTF-8">
4
- <meta name="viewport" content="width=device-width, initial-scale=1">
5
- <meta name=renderer content=webkit>
6
- <script type="text/javascript" src="https://unpkg.com/randomcolor@0.6.2/randomColor.js"></script>
7
- <script type="text/javascript" src="https://unpkg.com/@maptalks/geojson-bbox@1.0.4/dist/bbox.umd.js"></script>
8
- <script type="text/javascript" src="https://unpkg.com/three@0.138.0/build/three.min.js"></script>
9
- <script type="text/javascript" src="https://unpkg.com/three@0.142.0/examples/js/controls/OrbitControls.js"></script>
10
- <script type="text/javascript" src="./../dist/poly-extrude.js"></script>
11
- <script type="text/javascript" src="./util.js"></script>
12
- <!-- <script type="text/javascript" src="http://localhost/geometry-extrude/dist/geometry-extrude.js"></script> -->
13
-
14
- <style type="text/css">
15
- html,
16
- body {
17
- margin: 0px;
18
- height: 100%;
19
- width: 100%;
20
- }
21
-
22
- .container {
23
- width: 100%;
24
- height: 100%;
25
- }
26
- </style>
27
-
28
- <body>
29
- <script>
30
- const scene = createScene();
31
-
32
-
33
- function test() {
34
-
35
- getGeoJSON('./data/舟山市.geojson').then(geojson => {
36
- flatCoordinates(geojson);
37
- geojson.features.forEach(feature => {
38
- const { type, coordinates } = feature.geometry;
39
- const result = polyextrude.extrudePolygons(type === 'Polygon' ? [coordinates] : coordinates, { depth: 4 });
40
- const geometry = createBufferGeometry(result);
41
- const mesh = new THREE.Mesh(geometry, new THREE.MeshLambertMaterial({ color: randomColor(), wireframe: false, vertexColors: false }));
42
- scene.add(mesh);
43
- });
44
- })
45
- }
46
- test();
47
-
48
-
49
-
50
- </script>
51
- </body>
52
-
53
- </html>
package/test/ny-building.html DELETED
@@ -1,67 +0,0 @@
1
- <!DOCTYPE html>
2
- <html>
3
- <meta charset="UTF-8">
4
- <meta name="viewport" content="width=device-width, initial-scale=1">
5
- <meta name=renderer content=webkit>
6
- <script type="text/javascript" src="https://unpkg.com/@maptalks/geojson-bbox@1.0.4/dist/bbox.umd.js"></script>
7
- <script type="text/javascript" src="https://unpkg.com/three@0.138.0/build/three.min.js"></script>
8
- <script type="text/javascript" src="https://unpkg.com/three@0.142.0/examples/js/controls/OrbitControls.js"></script>
9
- <script type="text/javascript" src="./../dist/poly-extrude.js"></script>
10
- <script type="text/javascript" src="./util.js"></script>
11
- <!-- <script type="text/javascript" src="http://localhost/geometry-extrude/dist/geometry-extrude.js"></script> -->
12
-
13
- <style type="text/css">
14
- html,
15
- body {
16
- margin: 0px;
17
- height: 100%;
18
- width: 100%;
19
- }
20
-
21
- .container {
22
- width: 100%;
23
- height: 100%;
24
- }
25
- </style>
26
-
27
- <body>
28
- <script>
29
- const scene = createScene();
30
-
31
- function getTexture() {
32
- const texture = new THREE.TextureLoader().load('./data/building-texture-dark.jpg');
33
- texture.needsUpdate = true; //使用贴图时进行更新
34
- texture.wrapS = texture.wrapT = THREE.RepeatWrapping;
35
- // texture.repeat.set(0.002, 0.002);
36
- texture.repeat.set(0.1, 0.1);
37
- return texture;
38
- }
39
-
40
- const material = new THREE.MeshBasicMaterial({
41
- color: '#FFF',
42
- wireframe: false,
43
- vertexColors: false,
44
- map: getTexture()
45
- })
46
-
47
-
48
- function test() {
49
- getGeoJSON('./data/buildings-ny.geojson').then(geojson => {
50
- flatCoordinates(geojson);
51
- geojson.features.forEach(feature => {
52
- const { type, coordinates } = feature.geometry;
53
- const result = polyextrude.extrudePolygons(type === 'Polygon' ? [coordinates] : coordinates, { depth: feature.properties.height / 10 });
54
- const geometry = createBufferGeometry(result);
55
- const mesh = new THREE.Mesh(geometry, material);
56
- scene.add(mesh);
57
- });
58
- })
59
- }
60
- test();
61
-
62
-
63
-
64
- </script>
65
- </body>
66
-
67
- </html>
package/test/simple.html DELETED
@@ -1,61 +0,0 @@
1
- <!DOCTYPE html>
2
- <html>
3
- <meta charset="UTF-8">
4
- <meta name="viewport" content="width=device-width, initial-scale=1">
5
- <meta name=renderer content=webkit>
6
- <script type="text/javascript" src="https://unpkg.com/@maptalks/geojson-bbox@1.0.4/dist/bbox.umd.js"></script>
7
- <script type="text/javascript" src="https://unpkg.com/three@0.138.0/build/three.min.js"></script>
8
- <script type="text/javascript" src="https://unpkg.com/three@0.142.0/examples/js/controls/OrbitControls.js"></script>
9
- <script type="text/javascript" src="./../dist/poly-extrude.js"></script>
10
- <script type="text/javascript" src="./util.js"></script>
11
- <!-- <script type="text/javascript" src="http://localhost/geometry-extrude/dist/geometry-extrude.js"></script> -->
12
-
13
- <style type="text/css">
14
- html,
15
- body {
16
- margin: 0px;
17
- height: 100%;
18
- width: 100%;
19
- }
20
-
21
- .container {
22
- width: 100%;
23
- height: 100%;
24
- }
25
- </style>
26
-
27
- <body>
28
- <script>
29
- const scene = createScene();
30
-
31
-
32
- function test() {
33
-
34
- getGeoJSON('./data/苏州.geojson').then(geojson => {
35
- flatCoordinates(geojson);
36
- geojson.features.forEach(feature => {
37
- const { type, coordinates } = feature.geometry;
38
- // const time1 = 'time1';
39
- // console.time(time1);
40
- // const result1 = geometryExtrude.extrudePolygon(type === 'Polygon' ? [coordinates] : coordinates, { depth: 4 });
41
- // console.timeEnd(time1);
42
- const time = 'time';
43
- console.time(time);
44
- const result = polyextrude.extrudePolygons(type === 'Polygon' ? [coordinates] : coordinates, { depth: 4 });
45
-
46
- console.timeEnd(time);
47
- console.log(result);
48
- const geometry = createBufferGeometry(result);
49
- const mesh = new THREE.Mesh(geometry, new THREE.MeshLambertMaterial({ color: '#FFF', wireframe: false, vertexColors: false }));
50
- scene.add(mesh);
51
- });
52
- })
53
- }
54
- test();
55
-
56
-
57
-
58
- </script>
59
- </body>
60
-
61
- </html>
package/test/street.html DELETED
@@ -1,52 +0,0 @@
1
- <!DOCTYPE html>
2
- <html>
3
- <meta charset="UTF-8">
4
- <meta name="viewport" content="width=device-width, initial-scale=1">
5
- <meta name=renderer content=webkit>
6
- <script type="text/javascript" src="https://unpkg.com/@maptalks/geojson-bbox@1.0.4/dist/bbox.umd.js"></script>
7
- <script type="text/javascript" src="https://unpkg.com/three@0.138.0/build/three.min.js"></script>
8
- <script type="text/javascript" src="https://unpkg.com/three@0.142.0/examples/js/controls/OrbitControls.js"></script>
9
- <script type="text/javascript" src="./../dist/poly-extrude.js"></script>
10
- <script type="text/javascript" src="./util.js"></script>
11
- <!-- <script type="text/javascript" src="http://localhost/geometry-extrude/dist/geometry-extrude.js"></script> -->
12
-
13
- <style type="text/css">
14
- html,
15
- body {
16
- margin: 0px;
17
- height: 100%;
18
- width: 100%;
19
- }
20
-
21
- .container {
22
- width: 100%;
23
- height: 100%;
24
- }
25
- </style>
26
-
27
- <body>
28
- <script>
29
- const scene = createScene();
30
-
31
-
32
- function test() {
33
-
34
- getGeoJSON('./data/street.geojson').then(geojson => {
35
- flatCoordinates(geojson);
36
- geojson.features.forEach(feature => {
37
- const { type, coordinates } = feature.geometry;
38
- const result = polyextrude.extrudePolylines(type === 'LineString' ? [coordinates] : coordinates, { depth: 4, lineWidth: 1 });
39
- const geometry = createBufferGeometry(result);
40
- const mesh = new THREE.Mesh(geometry, new THREE.MeshLambertMaterial({ color: '#FFF', wireframe: false, vertexColors: false }));
41
- scene.add(mesh);
42
- });
43
- })
44
- }
45
- test();
46
-
47
-
48
-
49
- </script>
50
- </body>
51
-
52
- </html>
package/test/util.js DELETED
@@ -1,131 +0,0 @@
1
- // eslint-disable-next-line no-unused-vars
2
- function flatCoordinates(geojson, scale) {
3
- const [minx, miny, maxx, maxy] = window.bbox(geojson);
4
- const centerX = (minx + maxx) / 2, centerY = (miny + maxy) / 2;
5
- const dx = maxx - minx, dy = maxy - miny;
6
- const max = Math.max(dx, dy);
7
- geojson.features.forEach(feature => {
8
- const { coordinates, type } = feature.geometry;
9
- scale = scale || 160 / max;
10
- if (['MultiLineString', 'Polygon'].includes(type)) {
11
- coordinates.forEach(coord => {
12
- coord.forEach(c => {
13
- c[0] -= centerX;
14
- c[1] -= centerY;
15
- c[0] *= scale;
16
- c[1] *= scale;
17
- });
18
- });
19
-
20
- }
21
- if (type === 'MultiPolygon') {
22
- coordinates.forEach(coords => {
23
- coords.forEach(coord => {
24
- coord.forEach(c => {
25
- c[0] -= centerX;
26
- c[1] -= centerY;
27
- c[0] *= scale;
28
- c[1] *= scale;
29
- });
30
- });
31
- });
32
- }
33
- if (type === 'LineString') {
34
- coordinates.forEach(c => {
35
- c[0] -= centerX;
36
- c[1] -= centerY;
37
- c[0] *= scale;
38
- c[1] *= scale;
39
- });
40
- }
41
- });
42
-
43
- }
44
-
45
- // eslint-disable-next-line no-unused-vars
46
- function getGeoJSON(url) {
47
- return fetch(url).then(res => res.json());
48
- }
49
-
50
- // eslint-disable-next-line no-unused-vars
51
- function createBufferGeometry(result) {
52
- // eslint-disable-next-line no-unused-vars
53
- const { position, indices, normal, uv } = result;
54
- // eslint-disable-next-line no-undef
55
- const geometry = new THREE.BufferGeometry();
56
- // eslint-disable-next-line no-undef
57
- geometry.setAttribute('position', new THREE.BufferAttribute(position, 3));
58
- // eslint-disable-next-line no-undef
59
- geometry.setAttribute('normal', new THREE.BufferAttribute(normal, 3));
60
- // eslint-disable-next-line no-undef
61
- geometry.setAttribute('uv', new THREE.BufferAttribute(uv, 2));
62
- // eslint-disable-next-line no-undef
63
- geometry.setIndex(new THREE.BufferAttribute(indices, 1));
64
- // geometry.computeVertexNormals();
65
-
66
- // eslint-disable-next-line no-undef
67
- const topColor = new THREE.Color('#fff'), bottomColor = new THREE.Color('#2d2f61');
68
- const len = position.length;
69
- const colors = new Float32Array(len);
70
- for (let j = 0; j < len; j += 3) {
71
- const z = position[j + 2];
72
- if (z > 0) {
73
- colors[j] = topColor.r;
74
- colors[j + 1] = topColor.g;
75
- colors[j + 2] = topColor.b;
76
- } else {
77
- colors[j] = bottomColor.r;
78
- colors[j + 1] = bottomColor.g;
79
- colors[j + 2] = bottomColor.b;
80
- }
81
- }
82
- // eslint-disable-next-line no-undef
83
- geometry.setAttribute('color', new THREE.BufferAttribute(colors, 3));
84
-
85
- return geometry;
86
- }
87
-
88
- // eslint-disable-next-line no-unused-vars
89
- function createScene() {
90
- const THREE = window.THREE;
91
- const scene = new THREE.Scene();
92
- scene.background = new THREE.Color(0xb0b0b0);
93
- //
94
-
95
- const camera = new THREE.PerspectiveCamera(50, window.innerWidth / window.innerHeight, 1, 100000);
96
- camera.position.set(0, 0, 200);
97
-
98
- //
99
-
100
- const directionalLight = new THREE.DirectionalLight('#fff', 0.85);
101
- directionalLight.position.set(0.75, 0.75, 1.0).normalize();
102
- scene.add(directionalLight);
103
-
104
- // const ambientLight = new THREE.AmbientLight('#FFF', 0.5);
105
- // scene.add(ambientLight);
106
-
107
- //
108
-
109
- const helper = new THREE.GridHelper(200, 10);
110
- helper.rotation.x = Math.PI / 2;
111
- scene.add(helper);
112
-
113
- const renderer = new THREE.WebGLRenderer({ antialias: true });
114
- renderer.setPixelRatio(window.devicePixelRatio);
115
- renderer.setSize(window.innerWidth, window.innerHeight);
116
- document.body.appendChild(renderer.domElement);
117
-
118
- //
119
- const controls = new THREE.OrbitControls(camera, renderer.domElement);
120
- controls.minDistance = 10;
121
- controls.maxDistance = 1000;
122
-
123
- function animation() {
124
- requestAnimationFrame(animation);
125
-
126
- renderer.render(scene, camera);
127
- }
128
- animation();
129
- return scene;
130
-
131
- }
package/test/uv.html DELETED
@@ -1,77 +0,0 @@
1
- <!DOCTYPE html>
2
- <html>
3
- <meta charset="UTF-8">
4
- <meta name="viewport" content="width=device-width, initial-scale=1">
5
- <meta name=renderer content=webkit>
6
- <script type="text/javascript" src="https://unpkg.com/@maptalks/geojson-bbox@1.0.4/dist/bbox.umd.js"></script>
7
- <script type="text/javascript" src="https://unpkg.com/three@0.138.0/build/three.min.js"></script>
8
- <script type="text/javascript" src="https://unpkg.com/three@0.142.0/examples/js/controls/OrbitControls.js"></script>
9
- <script type="text/javascript" src="./../dist/poly-extrude.js"></script>
10
- <script type="text/javascript" src="./util.js"></script>
11
-
12
- <style type="text/css">
13
- html,
14
- body {
15
- margin: 0px;
16
- height: 100%;
17
- width: 100%;
18
- }
19
-
20
- .container {
21
- width: 100%;
22
- height: 100%;
23
- }
24
- </style>
25
-
26
- <body>
27
- <script>
28
-
29
-
30
- const scene = createScene();
31
-
32
- function getTexture() {
33
- const texture = new THREE.TextureLoader().load('./data/a.png');
34
- texture.needsUpdate = true; //使用贴图时进行更新
35
- texture.wrapS = texture.wrapT = THREE.RepeatWrapping;
36
- // texture.repeat.set(0.002, 0.002);
37
- texture.repeat.set(1, 2);
38
- return texture;
39
- }
40
-
41
- const material = new THREE.MeshBasicMaterial({
42
- color: '#FFF',
43
- wireframe: false,
44
- vertexColors: false,
45
- map: getTexture()
46
- })
47
-
48
-
49
- function test() {
50
- getGeoJSON('./data/simple.geojson').then(geojson => {
51
- flatCoordinates(geojson);
52
- geojson.features.forEach(feature => {
53
- const { type, coordinates } = feature.geometry;
54
- // const time1 = 'time1';
55
- // console.time(time1);
56
- // const result1 = geometryExtrude.extrudePolygon(type === 'Polygon' ? [coordinates] : coordinates, { depth: 4 });
57
- // console.timeEnd(time1);
58
- const time = 'time';
59
- console.time(time);
60
- const result = polyextrude.extrudePolygons(type === 'Polygon' ? [coordinates] : coordinates, { depth: 10 });
61
-
62
- console.timeEnd(time);
63
- console.log(result);
64
- const geometry = createBufferGeometry(result);
65
- const mesh = new THREE.Mesh(geometry, material);
66
- scene.add(mesh);
67
- });
68
- })
69
- }
70
- test();
71
-
72
-
73
-
74
- </script>
75
- </body>
76
-
77
- </html>