31:T45c,addGeoObject = ( group, svgObject ) => { const paths = svgObject.paths; const depths = svgObject.depths; const colors = svgObject.colors; const strokes = svgObject.strokes; const center = svgObject.center; for ( var i = 0; i < paths.length; i ++ ) { const path = transformSVGPath( paths[ i ] ); const color = new THREE.Color( colors[ i ] ); const stroke = new THREE.Color( strokes[ i ] ); const material = new THREE.MeshLambertMaterial( { color: color, emissive: stroke } ); const depth = depths[ i ]; const simpleShapes = path.toShapes( true ); for ( var j = 0; j < simpleShapes.length; j ++ ) { const simpleShape = simpleShapes[ j ]; const shape3d = new THREE.ExtrudeGeometry( simpleShape, { depth: depth, bevelEnabled: false } ); const mesh = new THREE.Mesh( shape3d, material ); mesh.rotation.x = Math.PI; mesh.translateZ( - depth - 1 ); mesh.translateX( - center.x ); mesh.translateY( - center.y ); group.add( mesh ); } } }32:T1adc,transformSVGPath = ( pathStr ) => { const path = new THREE.ShapePath(); 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 ); var 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( 'Wrong path command: ' + activeCmd ); } // just reissue the command if ( canRepeat && nextIsNum() ) continue; activeCmd = pathStr[ idx ++ ]; } return path; }33:[] 2f:{"title":"Hello Three.js Contour Map","cells":[{"id":0,"value":"md`# Hello Three.js Contour Map`","pinned":false,"hidden":false,"mode":"ojs"},{"id":388,"value":"md`This notebook tries to combine work from [here](https://github.com/mrdoob/three.js/blob/master/examples/webgl_geometry_extrude_shapes2.html) on converting SVG paths to Three.js objects, and [this notebook](https://beta.observablehq.com/@mbostock/hello-three-js-orbit-controls) on how to use Three.js in ObservableHQ. I am loading in some work I did in making [contour maps with D3](https://beta.observablehq.com/@pstuffa/making-maps-with-nyc-open-data).`","pinned":false,"hidden":false,"mode":"ojs"},{"id":614,"value":"md`For the density contour SVG paths, I can load the pieces for that from the other Observable Notebok, using the Observable import functionality.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":8,"value":"import { contoursData, path } from \"@pstuffa/making-maps-with-nyc-open-data\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":638,"value":"md`We then recreate the density contours here, so we can control the width and height without having to jump back and fourth between notebooks.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":618,"value":"densityContours = d3.contourDensity()\n .x(d => path.centroid(d.neighborHoodD)[0])\n .y(d => path.centroid(d.neighborHoodD)[1])\n .size([width, height])\n .cellSize(5)\n .bandwidth(5)\n (contoursData)","pinned":false,"hidden":false,"mode":"ojs"},{"id":640,"value":"md`The Three.js transformSVGPath function wants an array of SVG path attribute \"d\" mini-language.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":624,"value":"densityContourPaths = {\n \n let paths = [];\n \n densityContours.forEach((d) => {\n paths.push(d3.geoPath()(d));\n });\n \n return paths;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":75,"value":"ThreeJSDensityContourMap = {\n const renderer = new THREE.WebGLRenderer({antialias: true});\n renderer.setSize(width, height);\n renderer.setPixelRatio(devicePixelRatio);\n const controls = new THREE.OrbitControls( camera, renderer.domElement );\n try {\n while (true) {\n // group.rotation.x += 0.01;\n // group.rotation.y += 0.01;\n renderer.render(scene, camera);\n yield renderer.domElement;\n }\n } finally {\n renderer.dispose();\n }\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":694,"value":"initSVGObject()","pinned":false,"hidden":false,"mode":"ojs"},{"id":32,"value":"initSVGObject = () => {\n \n const obj = {};\n \n obj.paths = densityContourPaths;\n obj.depths = densityContourPaths.map((d,i) => i * 2)\n obj.colors = densityContourPaths.map((d,i) => colorScale(i))\n obj.strokes = densityContourPaths.map((d,i) => colorScale(i))\n obj.center = { x: 150, y: 100 };\n \n return obj;\n \n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":100,"value":"scene = {\n const scene = new THREE.Scene();\n scene.background = new THREE.Color(0xffffff);\n scene.add(group);\n return scene;\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":105,"value":"group = {\n \n const group = new THREE.Group();\n const obj = initSVGObject();\n addGeoObject( group, obj );\n\n return group;\n}\n","pinned":true,"hidden":false,"mode":"ojs"},{"id":90,"value":"camera = {\n const fov = 50;\n const aspect = width / height;\n const near = 1;\n const far = 100000;\n const camera = new THREE.PerspectiveCamera(fov, aspect, near, far);\n camera.position.set( 0, 0, 400);\n\n return camera;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":20,"value":"$31","pinned":false,"hidden":false,"mode":"ojs"},{"id":124,"value":"$32","pinned":false,"hidden":false,"mode":"ojs"},{"id":42,"value":"colorScale = d3.scaleSequential(d3.interpolateViridis)\n .domain([0, densityContourPaths.length])","pinned":false,"hidden":false,"mode":"ojs"},{"id":86,"value":"height = 800","pinned":false,"hidden":false,"mode":"ojs"},{"id":261,"value":"width = 800","pinned":false,"hidden":false,"mode":"ojs"},{"id":393,"value":"exportToObj = {\n \n const exporter = new OBJExporter();\n const result = exporter.parse(scene);\n \n return result;\n \n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":36,"value":"d3 = require(\"d3@5\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":6,"value":"THREE = {\n const THREE = await require(\"three@0.82.1/build/three.min.js\");\n if (!THREE.OrbitControls) { // If not previously loaded.\n const module = window.module = {exports: undefined};\n THREE.OrbitControls = await require(\"three-orbit-controls@82.1.0/index.js\").catch(() => module.exports(THREE));\n }\n return THREE;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":414,"value":"OBJExporter = require('https://bundle.run/three-obj-exporter@0.0.1')","pinned":false,"hidden":false,"mode":"ojs"},{"id":128,"value":"DEGS_TO_RADS = Math.PI / 180","pinned":false,"hidden":false,"mode":"ojs"},{"id":147,"value":"UNIT_SIZE = 100","pinned":false,"hidden":false,"mode":"ojs"},{"id":130,"value":"DIGIT_0 = 48","pinned":false,"hidden":false,"mode":"ojs"},{"id":134,"value":"DIGIT_9 = 57","pinned":false,"hidden":false,"mode":"ojs"},{"id":137,"value":"COMMA = 44","pinned":false,"hidden":false,"mode":"ojs"},{"id":138,"value":"SPACE = 32","pinned":false,"hidden":false,"mode":"ojs"},{"id":140,"value":"PERIOD = 46","pinned":false,"hidden":false,"mode":"ojs"},{"id":142,"value":"MINUS = 45","pinned":false,"hidden":false,"mode":"ojs"}],"files":"$W33","stdlib":"1","titling":"auto"}