123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535 |
- <!DOCTYPE html>
- <html lang="en">
- <head>
- <title>three.js webgl - geometry - extrude shapes from geodata</title>
- <meta charset="utf-8">
- <meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
- <style>
- body {
- font-family: Monospace;
- background-color: #f0f0f0;
- margin: 0px;
- overflow: hidden;
- }
- </style>
- </head>
- <body>
- <canvas id="debug" style="position:absolute; left:100px"></canvas>
- <script>
- 'use strict';
- </script>
- <script type="text/javascript" src="../build/three.min.js"></script>
- <script src="js/libs/stats.min.js"></script>
- <script>
- // From d3-threeD.js
- /* This Source Code Form is subject to the terms of the Mozilla Public
- * License, v. 2.0. If a copy of the MPL was not distributed with this file,
- * You can obtain one at http://mozilla.org/MPL/2.0/. */
- function d3threeD(exports) {
- const DEGS_TO_RADS = Math.PI / 180, UNIT_SIZE = 100;
- const DIGIT_0 = 48, DIGIT_9 = 57, COMMA = 44, SPACE = 32, PERIOD = 46, MINUS = 45;
- exports.transformSVGPath =
- function transformSVGPath(pathStr) {
- var path = new THREE.Shape();
- var idx = 1, len = pathStr.length, activeCmd,
- x = 0, y = 0, nx = 0, ny = 0, firstX = null, firstY = null,
- x1 = 0, x2 = 0, y1 = 0, y2 = 0,
- rx = 0, ry = 0, xar = 0, laf = 0, sf = 0, cx, cy;
- function eatNum() {
- var sidx, c, isFloat = false, s;
- // eat delims
- while (idx < len) {
- c = pathStr.charCodeAt(idx);
- if (c !== COMMA && c !== SPACE)
- break;
- idx++;
- }
- if (c === MINUS)
- sidx = idx++;
- else
- sidx = idx;
- // eat number
- while (idx < len) {
- c = pathStr.charCodeAt(idx);
- if (DIGIT_0 <= c && c <= DIGIT_9) {
- idx++;
- continue;
- }
- else if (c === PERIOD) {
- idx++;
- isFloat = true;
- continue;
- }
- s = pathStr.substring(sidx, idx);
- return isFloat ? parseFloat(s) : parseInt(s);
- }
- s = pathStr.substring(sidx);
- return isFloat ? parseFloat(s) : parseInt(s);
- }
- function nextIsNum() {
- var c;
- // do permanently eat any delims...
- while (idx < len) {
- c = pathStr.charCodeAt(idx);
- if (c !== COMMA && c !== SPACE)
- break;
- idx++;
- }
- c = pathStr.charCodeAt(idx);
- return (c === MINUS || (DIGIT_0 <= c && c <= DIGIT_9));
- }
- var canRepeat;
- activeCmd = pathStr[0];
- while (idx <= len) {
- canRepeat = true;
- switch (activeCmd) {
- // moveto commands, become lineto's if repeated
- case 'M':
- x = eatNum();
- y = eatNum();
- path.moveTo(x, y);
- activeCmd = 'L';
- firstX = x;
- firstY = y;
- break;
- case 'm':
- x += eatNum();
- y += eatNum();
- path.moveTo(x, y);
- activeCmd = 'l';
- firstX = x;
- firstY = y;
- break;
- case 'Z':
- case 'z':
- canRepeat = false;
- if (x !== firstX || y !== firstY)
- path.lineTo(firstX, firstY);
- break;
- // - lines!
- case 'L':
- case 'H':
- case 'V':
- nx = (activeCmd === 'V') ? x : eatNum();
- ny = (activeCmd === 'H') ? y : eatNum();
- path.lineTo(nx, ny);
- x = nx;
- y = ny;
- break;
- case 'l':
- case 'h':
- case 'v':
- nx = (activeCmd === 'v') ? x : (x + eatNum());
- ny = (activeCmd === 'h') ? y : (y + eatNum());
- path.lineTo(nx, ny);
- x = nx;
- y = ny;
- break;
- // - cubic bezier
- case 'C':
- x1 = eatNum(); y1 = eatNum();
- case 'S':
- if (activeCmd === 'S') {
- x1 = 2 * x - x2; y1 = 2 * y - y2;
- }
- x2 = eatNum();
- y2 = eatNum();
- nx = eatNum();
- ny = eatNum();
- path.bezierCurveTo(x1, y1, x2, y2, nx, ny);
- x = nx; y = ny;
- break;
- case 'c':
- x1 = x + eatNum();
- y1 = y + eatNum();
- case 's':
- if (activeCmd === 's') {
- x1 = 2 * x - x2;
- y1 = 2 * y - y2;
- }
- x2 = x + eatNum();
- y2 = y + eatNum();
- nx = x + eatNum();
- ny = y + eatNum();
- path.bezierCurveTo(x1, y1, x2, y2, nx, ny);
- x = nx; y = ny;
- break;
- // - quadratic bezier
- case 'Q':
- x1 = eatNum(); y1 = eatNum();
- case 'T':
- if (activeCmd === 'T') {
- x1 = 2 * x - x1;
- y1 = 2 * y - y1;
- }
- nx = eatNum();
- ny = eatNum();
- path.quadraticCurveTo(x1, y1, nx, ny);
- x = nx;
- y = ny;
- break;
- case 'q':
- x1 = x + eatNum();
- y1 = y + eatNum();
- case 't':
- if (activeCmd === 't') {
- x1 = 2 * x - x1;
- y1 = 2 * y - y1;
- }
- nx = x + eatNum();
- ny = y + eatNum();
- path.quadraticCurveTo(x1, y1, nx, ny);
- x = nx; y = ny;
- break;
- // - elliptical arc
- case 'A':
- rx = eatNum();
- ry = eatNum();
- xar = eatNum() * DEGS_TO_RADS;
- laf = eatNum();
- sf = eatNum();
- nx = eatNum();
- ny = eatNum();
- if (rx !== ry) {
- console.warn("Forcing elliptical arc to be a circular one :(",
- rx, ry);
- }
- // SVG implementation notes does all the math for us! woo!
- // http://www.w3.org/TR/SVG/implnote.html#ArcImplementationNotes
- // step1, using x1 as x1'
- x1 = Math.cos(xar) * (x - nx) / 2 + Math.sin(xar) * (y - ny) / 2;
- y1 = -Math.sin(xar) * (x - nx) / 2 + Math.cos(xar) * (y - ny) / 2;
- // step 2, using x2 as cx'
- var norm = Math.sqrt(
- (rx*rx * ry*ry - rx*rx * y1*y1 - ry*ry * x1*x1) /
- (rx*rx * y1*y1 + ry*ry * x1*x1));
- if (laf === sf)
- norm = -norm;
- x2 = norm * rx * y1 / ry;
- y2 = norm * -ry * x1 / rx;
- // step 3
- cx = Math.cos(xar) * x2 - Math.sin(xar) * y2 + (x + nx) / 2;
- cy = Math.sin(xar) * x2 + Math.cos(xar) * y2 + (y + ny) / 2;
- var u = new THREE.Vector2(1, 0),
- v = new THREE.Vector2((x1 - x2) / rx,
- (y1 - y2) / ry);
- var startAng = Math.acos(u.dot(v) / u.length() / v.length());
- if (u.x * v.y - u.y * v.x < 0)
- startAng = -startAng;
- // we can reuse 'v' from start angle as our 'u' for delta angle
- u.x = (-x1 - x2) / rx;
- u.y = (-y1 - y2) / ry;
- var deltaAng = Math.acos(v.dot(u) / v.length() / u.length());
- // This normalization ends up making our curves fail to triangulate...
- if (v.x * u.y - v.y * u.x < 0)
- deltaAng = -deltaAng;
- if (!sf && deltaAng > 0)
- deltaAng -= Math.PI * 2;
- if (sf && deltaAng < 0)
- deltaAng += Math.PI * 2;
- path.absarc(cx, cy, rx, startAng, startAng + deltaAng, sf);
- x = nx;
- y = ny;
- break;
- default:
- throw new Error("weird path command: " + activeCmd);
- }
- // just reissue the command
- if (canRepeat && nextIsNum())
- continue;
- activeCmd = pathStr[idx++];
- }
- return path;
- }
- }
- var $d3g = {};
- d3threeD($d3g);
- </script>
- <script>
- /// Part from g0v/twgeojson
- /// Graphic Engine and Geo Data Init Functions
- var addGeoObject = function( group, svgObject ) {
- var i,j, len, len1;
- var path, mesh, color, material, amount, simpleShapes, simpleShape, shape3d, x, toAdd, results = [];
- var thePaths = svgObject.paths;
- var theAmounts = svgObject.amounts;
- var theColors = svgObject.colors;
- var theCenter = svgObject.center;
- len = thePaths.length;
- for (i = 0; i < len; ++i) {
- path = $d3g.transformSVGPath( thePaths[i] );
- color = new THREE.Color( theColors[i] );
- material = new THREE.MeshLambertMaterial({
- color: color,
- ambient: color,
- emissive: color,
- });
- amount = theAmounts[i];
- simpleShapes = path.toShapes(true);
- len1 = simpleShapes.length;
- for (j = 0; j < len1; ++j) {
- simpleShape = simpleShapes[j];
- shape3d = simpleShape.extrude({
- amount: amount,
- bevelEnabled: false
- });
- mesh = new THREE.Mesh(shape3d, material);
- mesh.rotation.x = Math.PI;
- mesh.translateZ( - amount - 1);
- mesh.translateX( - theCenter.x);
- mesh.translateY( - theCenter.y);
- group.add(mesh);
- }
- }
- };
- var init3d = function(){
- var near = 1.0;
- var far = 10000.0;
- /// Global : renderer
- renderer = new THREE.WebGLRenderer( { antialias: true } );
- renderer.setClearColor( 0xb0b0b0 );
- renderer.setSize( window.innerWidth, window.innerHeight );
- /// Global : scene
- scene = new THREE.Scene();
- /// Global : camera
- camera = new THREE.PerspectiveCamera( 50, window.innerWidth / window.innerHeight, near, far );
- camera.position.set( 0, 0, 200 );
- /// Global : group
- group = new THREE.Group();
- scene.add( group );
- /// direct light
- var light = new THREE.DirectionalLight( 0x404040 );
- light.position.set( 0.75, 0.75, 1.0 ).normalize();
- scene.add( light );
- /// ambient light
- var ambientLight = new THREE.AmbientLight(0x404040);
- scene.add( ambientLight );
- /// backgroup grids
- var plane = new THREE.Mesh(
- new THREE.PlaneGeometry(160, 160, 20, 20),
- new THREE.MeshBasicMaterial({ color: 0x7f7f7f, wireframe: true }));
- plane.rotation.x = Math.PI;
- group.add( plane );
- var obj = initSVGObject();
- addGeoObject( group, obj );
- };
- var initSVGObject = function() {
- var obj = {};
- /// The geo data from Taipei City, Keelung City, Taipei County in SVG form
- obj.paths = [
- /// Taipei City
- "M366.2182,108.9780 L368.0329,110.3682 L367.5922,112.4411 L369.9258,116.0311 L368.9827,117.3543 " +
- "L371.5686,119.8491 L370.5599,121.7206 L372.9314,124.8009 L368.8889,126.7603 L369.2695,130.7622 " +
- "L366.1499,130.3388 L363.4698,128.1161 L362.9256,125.6018 L360.8153,126.4025 L360.2968,124.3588 " +
- "L361.9519,121.1623 L360.4475,118.7162 L358.1163,117.8678 L358.7094,115.7577 L361.6243,112.4576 Z",
- /// Keelung City
- "M380.2689,113.3850 L383.5604,114.2370 L383.7404,114.2386 L385.4082,115.6247 L384.9725,117.4631 " +
- "L381.6681,117.9439 L383.0209,121.0914 L379.4649,122.7061 L373.4987,118.8487 L372.0980,114.7589 " +
- "L377.9716,112.0707 Z",
- /// Taipei County
- "M359.4486,155.6690 L357.0422,152.7420 L355.1688,148.0173 L357.1186,145.8045 L354.1323,141.2242 " +
- "L351.1807,141.6609 L348.9387,140.5372 L349.5415,137.8396 L347.5174,136.1694 L347.6299,129.2327 " +
- "L351.4192,128.8067 L354.2518,125.3113 L352.5805,121.8038 L349.3190,120.9429 L344.3277,116.7676 " +
- "L350.9772,115.1221 L354.5759,112.5371 L354.5667,110.6949 L357.4098,105.7489 L362.3963,101.8443 " +
- "L364.4415,101.0819 L364.5314,101.0828 L364.6209,101.1230 L364.7698,101.2029 L368.1221,101.5115 " +
- "L371.7216,104.1338 L372.2958,106.7261 L375.5949,109.6971 L377.0415,108.8875 L377.0737,108.6526 " +
- "L377.4037,108.6165 L376.8840,109.7091 L376.7323,109.9037 L377.9416,112.0705 L371.7970,114.8736 " +
- "L374.0935,119.4031 L380.7848,122.7963 L382.6529,121.9897 L381.5792,117.8256 L385.0339,117.3069 " +
- "L385.4082,115.6247 L388.7014,116.3969 L389.8697,116.6024 L390.0206,116.4860 L391.0396,116.6118 " +
- "L394.6665,116.9929 L394.4694,119.2255 L394.3172,119.4987 L395.3792,121.8977 L395.2728,124.0526 " +
- "L397.2123,125.6350 L401.1709,126.2516 L401.2612,126.2130 L401.4086,126.6060 L400.1992,127.7733 " +
- "L399.7769,128.0446 L399.6247,128.3179 L398.1779,129.0521 L394.2418,129.2969 L388.7324,130.9385 " +
- "L389.2782,134.0003 L383.7237,137.0111 L381.7445,139.9336 L379.7001,139.9546 L376.1539,143.0580 " +
- "L371.3022,144.1094 L368.6009,146.5914 L368.7361,151.1399 L363.6153,154.4980 " +
- /// Taipei County hole.
- "M363.4600,128.3904 L366.6300,130.3829 L369.3732,129.3913 L369.5603,125.6695 L374.3989,125.1677 " +
- "L370.8412,123.6440 L371.0684,118.8252 L369.0431,117.3157 L369.6882,115.7936 L367.8578,112.8749 " +
- "L368.1217,110.4867 L366.5152,109.2554 L361.9554,112.3435 L358.1163,117.8678 L361.7218,120.2192 " +
- "L360.7261,126.3232 L362.8064,125.5221 Z"];
- obj.amounts = [ 19, 20, 21 ];
- obj.colors = [ 0xC07000, 0xC08000, 0xC0A000 ];
- obj.center = { x:365, y:125 };
- return obj;
- };
- </script>
- <script>
- /// Events from extrude shapes example
- function onWindowResize() {
- windowHalfX = window.innerWidth / 2;
- windowHalfY = window.innerHeight / 2;
- camera.aspect = window.innerWidth / window.innerHeight;
- camera.updateProjectionMatrix();
- renderer.setSize( window.innerWidth, window.innerHeight );
- };
- function onDocumentMouseDown( event ) {
- event.preventDefault();
- document.addEventListener( 'mousemove', onDocumentMouseMove, false );
- document.addEventListener( 'mouseup', onDocumentMouseUp, false );
- document.addEventListener( 'mouseout', onDocumentMouseOut, false );
- mouseXOnMouseDown = event.clientX - windowHalfX;
- targetRotationOnMouseDown = targetRotation;
- };
- function onDocumentMouseMove( event ) {
- mouseX = event.clientX - windowHalfX;
- targetRotation = targetRotationOnMouseDown + ( mouseX - mouseXOnMouseDown ) * 0.02;
- };
- function onDocumentMouseUp( event ) {
- document.removeEventListener( 'mousemove', onDocumentMouseMove, false );
- document.removeEventListener( 'mouseup', onDocumentMouseUp, false );
- document.removeEventListener( 'mouseout', onDocumentMouseOut, false );
- };
- function onDocumentMouseOut( event ) {
- document.removeEventListener( 'mousemove', onDocumentMouseMove, false );
- document.removeEventListener( 'mouseup', onDocumentMouseUp, false );
- document.removeEventListener( 'mouseout', onDocumentMouseOut, false );
- };
- function onDocumentTouchStart( event ) {
- if ( event.touches.length == 1 ) {
- event.preventDefault();
- mouseXOnMouseDown = event.touches[ 0 ].pageX - windowHalfX;
- targetRotationOnMouseDown = targetRotation;
- }
- };
- function onDocumentTouchMove( event ) {
- if ( event.touches.length == 1 ) {
- event.preventDefault();
- mouseX = event.touches[ 0 ].pageX - windowHalfX;
- targetRotation = targetRotationOnMouseDown + ( mouseX - mouseXOnMouseDown ) * 0.05;
- }
- };
- function animate() {
- /// compatibility : http://caniuse.com/requestanimationframe
- requestAnimationFrame( animate );
- render();
- stats.update();
- };
- function render() {
- group.rotation.y += ( targetRotation - group.rotation.y ) * 0.05;
- renderer.render( scene, camera );
- };
- </script>
- <script>
- /// Main
- var renderer, stats;
- var scene, camera, group;
- var targetRotation = 0;
- var targetRotationOnMouseDown = 0;
- var mouseX = 0;
- var mouseXOnMouseDown = 0;
- var windowHalfX = window.innerWidth / 2;
- var windowHalfY = window.innerHeight / 2;
- var container = document.createElement( 'div' );
- document.body.appendChild( container );
- var info = document.createElement( 'div' );
- info.style.position = 'absolute';
- info.style.top = '10px';
- info.style.width = '100%';
- info.style.textAlign = 'center';
- info.innerHTML = 'Shapes Extrusion via Geo Data<br/>Drag to spin';
- container.appendChild( info );
- init3d();
- container.appendChild( renderer.domElement );
- stats = new Stats();
- stats.domElement.style.position = 'absolute';
- stats.domElement.style.top = '0px';
- container.appendChild( stats.domElement );
- document.addEventListener( 'mousedown', onDocumentMouseDown, false );
- document.addEventListener( 'touchstart', onDocumentTouchStart, false );
- document.addEventListener( 'touchmove', onDocumentTouchMove, false );
- window.addEventListener( 'resize', onWindowResize, false );
- animate();
- </script>
- </body>
- </html>
|