30:T1b25,// Based on https://codepen.io/rogie/pen/jAZmaj function transformSVGPath(pathStr) { var paths = []; 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; var enteredSub = false; var zSeen = false; activeCmd = pathStr[0]; while (idx <= len) { canRepeat = true; switch (activeCmd) { // moveto commands, become lineto's if repeated case "M": enteredSub = false; x = eatNum(); y = eatNum(); path.moveTo(x, y); activeCmd = "L"; break; case "m": x += eatNum(); y += eatNum(); path.moveTo(x, y); activeCmd = "l"; break; case "Z": case "z": // z is a special case. This ends a segment and starts // a new path. Since the three.js path is continuous // we should start a new path here. This also draws a // line from the current location to the start location. canRepeat = false; // if (x !== firstX || y !== firstY) path.lineTo(firstX, firstY); paths.push(path); // reset the elements firstX = null; firstY = null; // avoid x,y being set incorrectly enteredSub = true; // path = new THREE.Shape(); zSeen = true; 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; case " ": // if it's an empty space, just skip it, and see if we can find a real command break; default: throw new Error("weird path command: " + activeCmd); } if (firstX === null && !enteredSub) { firstX = x; firstY = y; } // just reissue the command if (canRepeat && nextIsNum()) continue; activeCmd = pathStr[idx++]; } if (zSeen) { return paths; } else { paths.push(path); return paths; } } 31:[] 2e:{"title":"Spinning Icon","cells":[{"id":0,"value":"md`# Spinning Icon`","pinned":false,"hidden":false,"mode":"ojs"},{"id":7,"value":"{\n const renderer = new THREE.WebGLRenderer({antialias: true});\n invalidation.then(() => renderer.dispose());\n renderer.setSize(width, height);\n renderer.setPixelRatio(devicePixelRatio);\n shape.rotation.x = -0.1;\n while (true) {\n shape.rotation.y += 0.02;\n cubeCamera.update(renderer, scene);\n renderer.render(scene, camera);\n yield renderer.domElement;\n }\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":10,"value":"scene = {\n const scene = new THREE.Scene();\n scene.background = new THREE.Color(0xffffff);\n scene.add(shape);\n scene.add( cubeCamera );\n scene.add( new THREE.AmbientLight( 0xb28bda ) );\n var pointLight1 = new THREE.PointLight( 0xffffff );\n\t\t\t\tpointLight1.position.set( -300, 150, -300 );\n\t\t\t\t// pointLight1.castShadow = true;\n\t\t\t\tscene.add( pointLight1 );\n // var pointLight2 = new THREE.PointLight( 0xffffff );\n // pointLight2.position.set( - 150, 0, 0 );\n // scene.add( pointLight2 );\n const hemiLight = new THREE.HemisphereLight( 0xffff00, 0xff00ff, 1 );\n\t\t\t\t// hemiLight.color.setHSL( .5, 1, 1 );\n\t\t\t\t// hemiLight.groundColor.setHSL( .2, 1, 1 );\n\t\t\t\themiLight.position.set( 0, 300, 100 );\n\t\t\t\tscene.add( hemiLight );\n return scene;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":173,"value":"shape = {\n const ringShape = transformSVGPath(ringPath);\n const lineShape = transformSVGPath(linePath);\n const dotShape = transformSVGPath(dotPath);\n const shapes = [...ringShape, ...lineShape, ...dotShape];\n\n const material = new THREE.MeshPhongMaterial({\n color: 0xee8c9d,\n metalness: 0.6,\n roughness: 0.5,\n reflectivity: 0.5,\n envMapIntensity: 5\n });\n\n material.envMap = cubeCamera.renderTarget.texture;\n\n const geometry = new THREE.ExtrudeGeometry(shapes, {\n amount: 2,\n steps: 2,\n bevelEnabled: true,\n bevelThickness: 0.3,\n bevelSize: 0.3,\n bevelSegments: 1,\n curveSegments: 50\n });\n\n const mesh = new THREE.Mesh(geometry, material);\n\n mesh.geometry.center();\n mesh.rotation.z = Math.PI;\n mesh.scale.set(8, 8, 8);\n\n return mesh;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":176,"value":"ringPath = 'M16,6.161 L16,11.84 C15.996977,12.9143669 15.4209771,13.9054983 14.489,14.44 L8.5,17.868 C8.19263839,18.04357 7.81536161,18.04357 7.508,17.868 L1.512,14.444 C0.578250157,13.9091922 0.00159286462,12.9160602 0,11.84 L0,6.161 C0.00343493995,5.08674476 0.579323814,4.09580427 1.511,3.561 L7.5,0.132 C7.80736161,-0.0435699724 8.18463839,-0.0435699724 8.492,0.132 L14.484,3.556 C15.4194487,4.09011619 15.9977363,5.08380954 16,6.161 Z M13.9999956,6.161 C14.001065,5.80267215 13.8103233,5.47116314 13.4999956,5.292 L7.99999556,2.151 L2.49999556,5.292 C2.18967669,5.47116314 1.99893503,5.80267215 1.99999556,6.161 L1.99999556,11.84 C1.99929355,12.1979708 2.18998715,12.5290149 2.49999556,12.708 L7.99999556,15.849 L13.4999956,12.708 C13.8100129,12.5290149 14.0007064,12.1979708 13.9999956,11.84 L13.9999956,6.161 Z'","pinned":false,"hidden":false,"mode":"ojs"},{"id":331,"value":"dotPath = \"M9,5 L9,9 C9,9.55228475 8.55228475,10 8,10 C7.44771525,10 7,9.55228475 7,9 L7,5 C7,4.44771525 7.44771525,4 8,4 C8.55228475,4 9,4.44771525 9,5 Z\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":329,"value":"linePath = \"M8,11 C7.44771525,11 7,11.4477153 7,12 C7,12.5522847 7.44771525,13 8,13 C8.55228475,13 9,12.5522847 9,12 C9,11.4477153 8.55228475,11 8,11 Z\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":148,"value":"DEGS_TO_RADS = Math.PI / 180","pinned":false,"hidden":false,"mode":"ojs"},{"id":151,"value":"UNIT_SIZE = 1","pinned":false,"hidden":false,"mode":"ojs"},{"id":156,"value":"DIGIT_0 = 48\n","pinned":false,"hidden":false,"mode":"ojs"},{"id":158,"value":"DIGIT_9 = 57","pinned":false,"hidden":false,"mode":"ojs"},{"id":160,"value":"COMMA = 44","pinned":false,"hidden":false,"mode":"ojs"},{"id":162,"value":"SPACE = 32","pinned":false,"hidden":false,"mode":"ojs"},{"id":155,"value":"PERIOD = 46","pinned":false,"hidden":false,"mode":"ojs"},{"id":165,"value":"MINUS = 45;","pinned":false,"hidden":false,"mode":"ojs"},{"id":146,"value":"$30","pinned":false,"hidden":false,"mode":"ojs"},{"id":376,"value":"cubeCamera = new THREE.CubeCamera( 1, 100000, 128 );","pinned":false,"hidden":false,"mode":"ojs"},{"id":18,"value":"camera = {\n const fov = 45;\n const aspect = width / height;\n const near = 1;\n const far = 1000;\n const camera = new THREE.PerspectiveCamera(fov, aspect, near, far);\n camera.position.z = 400;\n return camera;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":52,"value":"height = 600","pinned":false,"hidden":false,"mode":"ojs"},{"id":3,"value":"THREE = require(\"three@0.99.0/build/three.min.js\")","pinned":false,"hidden":false,"mode":"ojs"}],"files":"$W31","stdlib":"1","titling":"auto"}