30:Taad,{ const renderer = new Renderer(invalidation, options); // Remove invalid values. const axes = options.axes.replace(/[^XYZxyz]/g, '').split(''); // Allow a single numerical value. const counterAngles = Array.isArray(options.counterAngle) ? options.counterAngle.slice() : [options.counterAngle]; if(createGIF) return compile(); return preview(); // Continuous render. May drop frames to keep in sync. async function *preview() { const {pause, duration} = options; while(true) { const loopStart = performance.now() + pause; const loopEnd = loopStart + duration; while(performance.now() <= loopStart) { renderer.updateMesh(axes[0], counterAngles[0], 0); yield renderer.render(); } let now; while((now = performance.now()) <= loopEnd) { const t = (now - loopStart) / (loopEnd - loopStart); renderer.updateMesh(axes[0], counterAngles[0], t); yield renderer.render(); } axes.push(axes.shift()); counterAngles.push(counterAngles.shift()); } } // Renders to gif, returns the compiled gif image. async function *compile() { const {pause, duration, frameRate, workers} = options; const gif = new GifCompiler({workers}); invalidation.then(() => gif.terminate()); const progress = (status, progress) => html`${status}: ${(progress * 100).toFixed()}%`; const rotations = leastCommonMultiple(axes.length, counterAngles.length); // Supposedly the lowest widely supported delay is 20ms. const delay = Math.max(20, Math.floor(1000 / frameRate)); const delta = delay / duration; for(let r = 0; r < rotations; r++) { // Render the pause first because some image hosting sites drop the last frame delay. if(pause) { renderer.updateMesh(axes[0], counterAngles[0], 0); gif.addFrame(renderer.render(), pause); yield progress('Rendering', r / rotations); } for(let t = 0; t <= 1; t += delta) { renderer.updateMesh(axes[0], counterAngles[0], t); gif.addFrame(renderer.render(), delay); yield progress('Rendering', (r + t) / rotations); } axes.push(axes.shift()); counterAngles.push(counterAngles.shift()); } /* // Example usage with Promise instead of progress: const blob = await gif.render(); yield html``; */ const render = gif.renderProgress(); let data; while((data = render.next()) && !data.done) yield progress('Compiling', data.value); yield html``; } }31:Tcda,class Renderer { constructor(invalidation, options) { this.options = options; this.scene = new THREE.Scene(); this.camera = this._initCamera(); this.renderer = this._initRenderer(invalidation, options); this.box = this._initBox(options); this.scene.add(...this._initLighting(), this.box); invalidation.then(() => this.renderer.dispose()); } _initCamera() { const camera = new THREE.OrthographicCamera(-1, 1, 1, -1, -100, 100); camera.position.set(10, 10, 10); camera.lookAt(0, 0, 0); return camera; } _initLighting() { const lightDir = new THREE.DirectionalLight('#fff', .8); lightDir.position.set(70, 250, 130); lightDir.lookAt(0,0,0); lightDir.castShadow = true; lightDir.shadow.mapSize.width = 2**12; lightDir.shadow.mapSize.height = 2**12; lightDir.shadow.camera.near = 1; lightDir.shadow.camera.far = 1000; const lightHem = new THREE.HemisphereLight('#a8b', '#fff', .3); return [lightDir, lightHem]; } _initBox(options) { const box = new THREE.Mesh(new THREE.Geometry(), new THREE.MeshStandardMaterial({ color: '#d97', metalness: 0, roughness: 1, dithering: true, })); box.castShadow = true; box.receiveShadow = true; return box; } _initRenderer(invalidation, options) { const {size, pixelRatio} = options; const renderer = new THREE.WebGLRenderer({antialias: true}); invalidation.then(() => renderer.dispose()); renderer.setSize(size, size); renderer.setPixelRatio(pixelRatio); renderer.setClearColor('#eff'); renderer.shadowMap.enabled = true; renderer.shadowMap.type = THREE.PCFSoftShadowMap; return renderer; } _createMesh(thickness, rotateAxis, angle, counterAngle, counterDirection) { const s = 1 - thickness; const outer = boxMesh(1, 1, 1); const inner = boxMesh(s, s, s); const cutoutMeshes = 'XYZxyz'.split('').map(c => { const axis = c.toLowerCase(); const dir = c.match(/[xyz]/) ? -1 : 1; const m = boxMesh(s, s, s); m.position[axis] = thickness * .5 * dir; if(axis === rotateAxis && (!counterDirection || dir === counterDirection)) { m.rotation[axis] = counterAngle; } return m; }); let shape = new ThreeBSP(outer).subtract(new ThreeBSP(inner)); shape = cutoutMeshes.reduce((shape, cutout) => shape.subtract(new ThreeBSP(cutout)), shape); const mesh = shape.toMesh(); mesh.rotation[rotateAxis] = angle; return mesh; function boxMesh(x, y, z) { return new THREE.Mesh(new THREE.BoxGeometry(x, y, z)); } } updateMesh(side, counterAngle, t) { const {easing, snap, thickness, counterDirection} = this.options; let axis = 'x', a = 0; if(side) { axis = side.toLowerCase(); const dir = side.match(/[xyz]/) ? -1 : 1; a = d3[easing](t ** snap) * Math.PI * .5 * dir; } this.box.geometry.dispose(); const mesh = this._createMesh(thickness, axis, a, a * counterAngle, counterDirection); this.box.geometry = mesh.geometry; this.box.rotation.copy(mesh.rotation); } render() { this.renderer.render(this.scene, this.camera); return this.renderer.domElement; } }32:[] 2e:{"title":"Orientation","cells":[{"id":0,"value":"md`\n# Orientation\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":703,"value":"options = ({\n size: 600,\n pixelRatio: 1,\n // Ratio of bar size to box size: .3 <= n < 1\n thickness: .4,\n // Power of t.\n snap: .8,\n // d3 easing function.\n easing: 'easeCubicInOut',\n // Length of a single rotation (ms).\n duration: 600,\n // Additional delay between rotations (ms).\n pause: 200,\n // Rotation steps (arbitrary number): Upercase = positive, lowercase = negative.\n axes: 'zyx',\n // Cutout angle factors (arbitrary number, does not need to match axes).\n counterAngle: [1, -2, -1],\n // Which side to apply the counter angle to. -1 = back, 1 = front, 0 = both.\n counterDirection: 1,\n // Gif frame rate, does not apply to preview. Max value is 50.\n frameRate: 30,\n // Number of web workers created by GIF.js.\n workers: 4\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":723,"value":"viewof createGIF = html``","pinned":false,"hidden":false,"mode":"ojs"},{"id":19,"value":"$30","pinned":false,"hidden":false,"mode":"ojs"},{"id":1196,"value":"$31","pinned":false,"hidden":false,"mode":"ojs"},{"id":1261,"value":"class GifCompiler {\n constructor(options = {}) {\n this.gif = new GIF(Object.assign({\n workers: 2,\n workerScript: gifWorkerScript,\n quality: 10,\n debug: false\n }, options));\n }\n \n addFrame(canvas, delay) {\n this.gif.addFrame(canvas, {copy: true, delay});\n }\n \n render() {\n return new Promise((resolve, reject) => {\n this.gif.on('finished', blob => {\n resolve(blob);\n this.terminate();\n });\n this.gif.render();\n });\n }\n \n *renderProgress() {\n let progress = 0, blob;\n this.gif.on('progress', v => progress = v);\n this.render().then(b => blob = b);\n while(blob === undefined) yield progress;\n return blob;\n }\n \n terminate() {\n this.gif.abort();\n // Clean up after GIF.js.\n this.gif.freeWorkers.forEach(w => w.terminate());\n }\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":1012,"value":"md`\n---\n## Implementation Notes\n- The box geometry is created through boolean operations with eight cube meshes: outer frame, inner space, one cutout per cube face.\n- \\`ThreeBSP\\` creates a new mesh from each boolean operation. To keep the code simple the geometry is disposed and recreated on every frame.\n- To avoid overly verbose coordinate definitions and code the cutouts are represented as \"XYZxyz\", where uppercase letters represent a positive translation on that axis and lowercase letters a negative.\n- Two different render functions, \\`preview()\\` and \\`compile()\\`, are used. The former is optimized to show the actual animation speed and may drop frames to keep the animation in sync.\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":971,"value":"md`\n---\n## Dependencies\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1164,"value":"md`\n**Essential:** ThreeJS for the heavy lifting, ThreeCSG to perform boolean mesh operations.\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":6,"value":"THREE = require('three@0.95.0/build/three.js')","pinned":false,"hidden":false,"mode":"ojs"},{"id":9,"value":"ThreeBSP = (await require('https://bundle.run/three-js-csg@72.0.0'))(THREE)","pinned":false,"hidden":false,"mode":"ojs"},{"id":1168,"value":"md`\n**Optional:** d3-ease for animation easing, leastCommonMutiple to find the shortest combined loop for the number of rotations and counter angles.\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":456,"value":"d3 = require('d3-ease@1.0.3/build/d3-ease.js')","pinned":false,"hidden":false,"mode":"ojs"},{"id":727,"value":"leastCommonMultiple = (await import('https://unpkg.com/javascript-algorithms-and-data-structures@0.0.4/src/algorithms/math/least-common-multiple/leastCommonMultiple.js?module')).default\n","pinned":false,"hidden":false,"mode":"ojs"},{"id":1174,"value":"md`\n**Optional:** GIF.js (and its worker script) to compile a GIF.\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":714,"value":"GIF = require('gif.js@0.2.0/dist/gif.js')","pinned":false,"hidden":false,"mode":"ojs"},{"id":716,"value":"gifWorkerScript = {\n const script = await (await fetch('https://unpkg.com/gif.js@0.2.0/dist/gif.worker.js')).text();\n const blob = new Blob([script], {type: 'application/javascript'});\n return URL.createObjectURL(blob);\n}","pinned":false,"hidden":false,"mode":"ojs"}],"files":"$W32","stdlib":"1","titling":"auto"}