poly-extrude 0.0.1 → 0.0.2

Sign up to get free protection for your applications and to get access to all the features.
Files changed (38) hide show
  1. package/dist/poly-extrude.js +5 -5
  2. package/dist/poly-extrude.js.map +1 -1
  3. package/dist/poly-extrude.min.js +2 -2
  4. package/dist/poly-extrude.mjs +5 -5
  5. package/package.json +7 -2
  6. package/src/util.js +3 -3
  7. package/.eslintignore +0 -12
  8. package/.eslintrc.js +0 -34
  9. package/.vscode/settings.json +0 -3
  10. package/babel.config.js +0 -12
  11. package/pnpm-lock.yaml +0 -3054
  12. package/rollup.config.js +0 -108
  13. package/test/buildings.html +0 -77
  14. package/test/data/a.png +0 -0
  15. package/test/data/building-texture-dark.jpg +0 -0
  16. package/test/data/building.geojson +0 -1118
  17. package/test/data/buildings-ny.geojson +0 -2845
  18. package/test/data/buildings.geojson +0 -1
  19. package/test/data/free-line.geojson +0 -1
  20. package/test/data/line.geojson +0 -1
  21. package/test/data/polygon.geojson +0 -1
  22. package/test/data/simple-hole.geojson +0 -1
  23. package/test/data/simple-line.geojson +0 -45
  24. package/test/data/simple.geojson +0 -1
  25. package/test/data/street.geojson +0 -1
  26. package/test/data//345/244/252/346/271/226.geojson +0 -8
  27. package/test/data//350/210/237/345/261/261/345/270/202.geojson +0 -1
  28. package/test/data//350/213/217/345/267/236.geojson +0 -1
  29. package/test/data//351/204/261/351/230/263/346/271/226.geojson +0 -1
  30. package/test/line-draw.html +0 -100
  31. package/test/line-uv.html +0 -69
  32. package/test/line.html +0 -56
  33. package/test/multi-polygon.html +0 -53
  34. package/test/ny-building.html +0 -67
  35. package/test/simple.html +0 -61
  36. package/test/street.html +0 -52
  37. package/test/util.js +0 -131
  38. 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>