25:["$","title",null,{"children":"3D Data Boxes | Lucas Tostes | Observable"}] 4b:T7c7,function dataGroup(x, y, z, data) { const g = new THREE.Group(); // Base geometry const geometry = new THREE.BoxGeometry(3.5, 5, 2); // Opacity face fill const faceMaterial = new THREE.MeshBasicMaterial({ color: 0x000000, transparent: true, opacity: boxOpacity }); const cube = new THREE.Mesh(geometry, faceMaterial); // Light wireframe const edges = new THREE.EdgesGeometry(geometry); const edgeMaterial = new THREE.LineBasicMaterial({ color: 0xffffff, linewidth: 2 }); const wireframe = new THREE.LineSegments(edges, edgeMaterial); // Starry vertexes const vertexes = getVertexes(geometry) .map((coords) => { const { length, width } = cylinderParams; const material = new THREE.MeshBasicMaterial({ color: 0xffffff }); const cilGeometry = new THREE.CylinderGeometry(width, width, length); // Y const y_cylinder = new THREE.Mesh(cilGeometry, material); y_cylinder.position.set(...coords); // X const x_cylinder = new THREE.Mesh(cilGeometry, material); x_cylinder.position.set(...coords); x_cylinder.rotateX(Math.PI / 2); // X const z_cylinder = new THREE.Mesh(cilGeometry, material); z_cylinder.position.set(...coords); z_cylinder.rotateZ(Math.PI / 2); return [x_cylinder, y_cylinder, z_cylinder]; }) .flat(); // return vertexes; const { infinite_length, infinite_color } = infiniteLineParams; const edgeLines = createEdgeExtensions(geometry, infinite_length); // Text const tags = getTags(data); const loader = new THREE.FontLoader(); loader.load( "https://cdn.jsdelivr.net/npm/three@0.132.2/examples/fonts/helvetiker_regular.typeface.json", (font) => { addText(font, g, tags); } ); g.add(cube); g.add(wireframe); g.add(edgeLines); g.add(...vertexes); const url = getImageURL(data); addImage2(g, url); // addImageTransitioning(g, url); g.position.set(x, y, z); return g; }4c:T444,function addText(font, g, tags) { const textGeometry = new THREE.TextGeometry(tags.join(`\n`), { font: font, size: 0.2, height: 0.03, curveSegments: 12 }); const textMaterial = new THREE.MeshBasicMaterial({ color: 0xffffff }); // const textMaterial = new THREE.MeshNormalMaterial({ color: 0xff0000 }); // Positioning textGeometry.center(); // Compute the bounding box of the text textGeometry.computeBoundingBox(); // Get the bounding box dimensions const boundingBox = textGeometry.boundingBox; const textWidth = boundingBox.max.x - boundingBox.min.x; // Width of the text // const boxHelper = new THREE.Box3Helper(boundingBox, 0xffff00); // Yellow wireframe for debugging // g.add(boxHelper); // Shift the text to align left at (0, 0, 0) textGeometry.translate(textWidth / 2, 0, 0); // Shift to the start of the box textGeometry.translate(-1.4, 0, 0); // Shift text down textGeometry.translate(0, -1.5, 0); const textMesh = new THREE.Mesh(textGeometry, textMaterial); // textMesh.position.set(0, -1.5, 0); g.add(textMesh); }4d:Ta56,function addImage2(g, urls) { const textureLoader = new THREE.TextureLoader(); // Define the shader uniforms and shaders const grayscaleShader = { uniforms: { tDiffuse: { value: null }, aspectRatio: { value: 1.0 } // Initialize aspectRatio }, vertexShader: ` varying vec2 vUv; void main() { vUv = uv; gl_Position = projectionMatrix * modelViewMatrix * vec4(position, 1.0); } `, fragmentShader: ` uniform sampler2D tDiffuse; uniform float aspectRatio; varying vec2 vUv; void main() { vec2 uv = vUv; vec2 adjustedUV; if (aspectRatio > 1.0) { // Landscape (width > height) float vMin = 0.5 - 0.5 / aspectRatio; adjustedUV.x = uv.x; adjustedUV.y = (uv.y - vMin) * aspectRatio; } else { // Portrait (height >= width) float uMin = 0.5 - 0.5 * aspectRatio; adjustedUV.x = (uv.x - uMin) / aspectRatio; adjustedUV.y = uv.y; } // Check if adjusted UVs are outside the texture's [0,1] range if (adjustedUV.x < 0.0 || adjustedUV.x > 1.0 || adjustedUV.y < 0.0 || adjustedUV.y > 1.0) { gl_FragColor = vec4(0.0, 0.0, 0.0, 0.0); return; } // Sample the texture vec4 color = texture2D(tDiffuse, adjustedUV); // Convert to grayscale float grayscale = dot(color.rgb, vec3(0.299, 0.587, 0.114)); gl_FragColor = vec4(vec3(grayscale), 1.0); } ` }; const firstImageURL = urls[0]; // Load the texture and update aspectRatio once loaded const texture = textureLoader.load(firstImageURL, function (tex) { const image = tex.image; const aspectRatio = image.width / image.height; grayscaleShader.uniforms.aspectRatio.value = aspectRatio; grayscaleShader.uniforms.tDiffuse.value = tex; }); // Set the texture to the shader's uniform // grayscaleShader.uniforms.tDiffuse.value = texture; // Create the shader material with transparency enabled const shaderMaterial = new THREE.ShaderMaterial({ uniforms: grayscaleShader.uniforms, vertexShader: grayscaleShader.vertexShader, fragmentShader: grayscaleShader.fragmentShader // transparent: true // Enable transparency for alpha channel }); // Create plane geometry and mesh const planeGeometry = new THREE.PlaneGeometry(3, 3); const planeMesh = new THREE.Mesh(planeGeometry, shaderMaterial); planeMesh.position.set(0, 0.8, 0); g.add(planeMesh); const nextAnimationFrame = () => { // Animation code here }; return nextAnimationFrame; }4e:T11d3,function addImageTransitioning( g, urls, animationDuration = 2000, transitionStartDelay = Math.random() * 2000 + 1000 ) { const textureLoader = new THREE.TextureLoader(); let textures = []; let aspectRatios = []; let currentIndex = 0; let nextIndex = 1; let isAnimating = false; let startTime = null; let animationFrameId = null; // Load all textures upfront Promise.all( urls.map( (url) => new Promise((resolve, reject) => { textureLoader.load( url, (texture) => { const aspect = texture.image.width / texture.image.height; aspectRatios.push(aspect); resolve(texture); }, undefined, reject ); }) ) ).then((loadedTextures) => { textures = loadedTextures; if (textures.length > 0) { startAnimationLoop(); } }); // Updated shader material with transition support const shaderMaterial = new THREE.ShaderMaterial({ uniforms: { tDiffuse: { value: null }, tNext: { value: null }, progress: { value: 0 }, aspectRatioCurrent: { value: 1 }, aspectRatioNext: { value: 1 } }, vertexShader: ` varying vec2 vUv; void main() { vUv = uv; gl_Position = projectionMatrix * modelViewMatrix * vec4(position, 1.0); } `, fragmentShader: ` uniform sampler2D tDiffuse; uniform sampler2D tNext; uniform float progress; uniform float aspectRatioCurrent; uniform float aspectRatioNext; varying vec2 vUv; vec2 adjustUV(vec2 uv, float aspectRatio) { if (aspectRatio > 1.0) { float vMin = 0.5 - 0.5 / aspectRatio; return vec2(uv.x, (uv.y - vMin) * aspectRatio); } else { float uMin = 0.5 - 0.5 * aspectRatio; return vec2((uv.x - uMin) / aspectRatio, uv.y); } } void main() { // Current image vec2 uvCurrent = adjustUV(vUv, aspectRatioCurrent); vec4 colorCurrent = texture2D(tDiffuse, uvCurrent); if (uvCurrent.x < 0.0 || uvCurrent.x > 1.0 || uvCurrent.y < 0.0 || uvCurrent.y > 1.0) { colorCurrent = vec4(0.0); } // Next image vec2 uvNext = adjustUV(vUv, aspectRatioNext); vec4 colorNext = texture2D(tNext, uvNext); if (uvNext.x < 0.0 || uvNext.x > 1.0 || uvNext.y < 0.0 || uvNext.y > 1.0) { colorNext = vec4(0.0); } // Grayscale conversion and mix float grayCurrent = dot(colorCurrent.rgb, vec3(0.299, 0.587, 0.114)); float grayNext = dot(colorNext.rgb, vec3(0.299, 0.587, 0.114)); float gray = mix(grayCurrent, grayNext, progress); gl_FragColor = vec4(vec3(gray), 1.0); } ` }); // Create mesh const plane = new THREE.Mesh(new THREE.PlaneGeometry(3, 3), shaderMaterial); plane.position.set(0, 0.8, 0); g.add(plane); const animate = (timestamp) => { if (!startTime) startTime = timestamp; const elapsed = timestamp - startTime; const progress = Math.min(elapsed / animationDuration, 1); shaderMaterial.uniforms.progress.value = progress; if (progress < 1) { animationFrameId = requestAnimationFrame(animate); } else { // Update indices for next transition currentIndex = nextIndex; nextIndex = (currentIndex + 1) % urls.length; // Schedule next transition after delay setTimeout(() => { shaderMaterial.uniforms.tDiffuse.value = textures[currentIndex]; shaderMaterial.uniforms.tNext.value = textures[nextIndex]; shaderMaterial.uniforms.aspectRatioCurrent.value = aspectRatios[currentIndex]; shaderMaterial.uniforms.aspectRatioNext.value = aspectRatios[nextIndex]; startTime = null; animationFrameId = requestAnimationFrame(animate); }, transitionStartDelay); } }; function startAnimationLoop() { if (urls.length < 2) return; // Need at least 2 images for transition // Initialize first textures shaderMaterial.uniforms.tDiffuse.value = textures[0]; shaderMaterial.uniforms.tNext.value = textures[1]; shaderMaterial.uniforms.aspectRatioCurrent.value = aspectRatios[0]; shaderMaterial.uniforms.aspectRatioNext.value = aspectRatios[1]; // Start animation loop animationFrameId = requestAnimationFrame(animate); } // Cleanup function return () => { if (animationFrameId) { cancelAnimationFrame(animationFrameId); } }; }4f:T585,function addImage(g, url) { // Load the image as a texture const textureLoader = new THREE.TextureLoader(); const texture = textureLoader.load(url); // Replace with your image path // Define a custom shader for grayscale conversion const grayscaleShader = { uniforms: { tDiffuse: { value: texture } // Texture uniform }, vertexShader: ` varying vec2 vUv; void main() { vUv = uv; gl_Position = projectionMatrix * modelViewMatrix * vec4(position, 1.0); } `, fragmentShader: ` uniform sampler2D tDiffuse; varying vec2 vUv; void main() { vec4 color = texture2D(tDiffuse, vUv); float grayscale = dot(color.rgb, vec3(0.299, 0.587, 0.114)); // Grayscale formula gl_FragColor = vec4(vec3(grayscale), color.a); } ` }; // Create a shader material const shaderMaterial = new THREE.ShaderMaterial({ uniforms: grayscaleShader.uniforms, vertexShader: grayscaleShader.vertexShader, fragmentShader: grayscaleShader.fragmentShader }); // Create a plane geometry const planeGeometry = new THREE.PlaneGeometry(3, 3); // Width and height of the plane // const planeMaterial = new THREE.MeshBasicMaterial({ map: texture }); const planeMesh = new THREE.Mesh(planeGeometry, shaderMaterial); planeMesh.position.set(0, 0.8, 0); // Add the plane to the scene g.add(planeMesh); }50:T53a,function captureHighResImage(renderer, scene, camera, width, height) { // Store original settings const originalSize = { width: renderer.domElement.width, height: renderer.domElement.height }; const originalPixelRatio = renderer.getPixelRatio(); const originalAspect = camera.aspect; // Set new renderer size and pixel ratio renderer.setSize(width, height); renderer.setPixelRatio(1); // Ensures exact buffer size // Update camera aspect ratio if PerspectiveCamera if (camera instanceof THREE.PerspectiveCamera) { camera.aspect = width / height; camera.updateProjectionMatrix(); } // Render the scene renderer.render(scene, camera); // Capture the image const canvas = renderer.domElement; canvas.toBlob((blob) => { // Create download link const link = document.createElement("a"); link.download = "high-res-render.png"; link.href = URL.createObjectURL(blob); link.click(); URL.revokeObjectURL(link.href); }, "image/png"); // Restore original settings renderer.setSize(originalSize.width, originalSize.height); renderer.setPixelRatio(originalPixelRatio); if (camera instanceof THREE.PerspectiveCamera) { camera.aspect = originalAspect; camera.updateProjectionMatrix(); } } // Usage: captureHighResImage(renderer, scene, camera, 3840, 2160);51:[{"id":"a3af3cf0fc9724445be7bf4c07dbfca9f732a9b4a644ed376c9bc22a9a1003861e9c308faba0848976fa1b9b4c0805926c805955be95d4eb849926030a03fad0","href":"https://static.observableusercontent.com/files/a3af3cf0fc9724445be7bf4c07dbfca9f732a9b4a644ed376c9bc22a9a1003861e9c308faba0848976fa1b9b4c0805926c805955be95d4eb849926030a03fad0","name":"comunas_photos_labeled.json","type":"application/json","lastModified":1742322809536.919,"size":3426329},{"id":"5ca3256f69d59ba89c3369b7369cdae5180d4a580a494595a1cbfc71e69966376974d487df04221ba39c324c3065006f000a9474259d06a997e4fd60d1903420","href":"https://static.observableusercontent.com/files/5ca3256f69d59ba89c3369b7369cdae5180d4a580a494595a1cbfc71e69966376974d487df04221ba39c324c3065006f000a9474259d06a997e4fd60d1903420","name":"comunas_photos_labeled@1.json","type":"application/json","lastModified":1742323101649.567,"size":5237882},{"id":"5898466de7cdc287a29086db98083e30b3f620502afe577d02270ca5eeedc5fcc5288ba5285a67f40bed4a174d4e2ef12c62aacc09e83cad583eecf0c796d107","href":"https://static.observableusercontent.com/files/5898466de7cdc287a29086db98083e30b3f620502afe577d02270ca5eeedc5fcc5288ba5285a67f40bed4a174d4e2ef12c62aacc09e83cad583eecf0c796d107","name":"comunas_photos_sample.json","type":"application/json","lastModified":1742393859937,"size":20325232}] 47:{"id":"8100cda37741cee5","slug":"3d-data-boxes","title":"3D Data Boxes","thumbnail":"90616889b3f497ddd80ca6342258a4a7330097c5cdb0860d82ae575a681bb3da","access_level":"public","create_time":"$D2025-03-17T17:23:40.557Z","update_time":"$D2026-09-09T10:14:47.428Z","view_time":null,"first_public_time":"$D2026-05-16T22:33:16.161Z","has_unpublished_edits":null,"fork":{"id":"4d9b7665f00a916c","slug":"three-js","title":"Three.js","owner":{"id":"f35c755083683fe5","login":"observablehq","name":"Observable"}},"stars":0,"starred":false,"owner":{"type":"team","id":"38ebb3822b8f9dbc","login":"ltostes","name":"Lucas Tostes","avatar_url":"https://avatars-next.observableusercontent.com/92c420e46700aada20009e3e35b3e3f0a37cede401b581cea97187885c8f3022","tier":"starter_2024","bio":"Visualization Design researcher @ PPGD / UFRJ","followed_by_you":false,"follows_you":false},"version":1190,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"c62f659f7cb37ce9","login":"ltostes","name":"Lucas Tostes","avatar_url":"https://avatars-next.observableusercontent.com/92c420e46700aada20009e3e35b3e3f0a37cede401b581cea97187885c8f3022","tier":null,"bio":"Visualization Design researcher @ PPGD / UFRJ","followed_by_you":false,"follows_you":false}],"members":[{"type":"team","id":"38ebb3822b8f9dbc","login":"ltostes","name":"Lucas Tostes","avatar_url":"https://avatars-next.observableusercontent.com/92c420e46700aada20009e3e35b3e3f0a37cede401b581cea97187885c8f3022","tier":"starter_2024","role":"editor"},{"type":"individual","id":"c62f659f7cb37ce9","login":"ltostes","name":"Lucas Tostes","avatar_url":"https://avatars-next.observableusercontent.com/92c420e46700aada20009e3e35b3e3f0a37cede401b581cea97187885c8f3022","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":1,"collection":null,"type":"notebook","body":{"titling":"auto","title":"3D Data Boxes","cells":[{"id":242,"value":"# 3D Data Boxes\n

[Three.js Docs](https://threejs.org/docs/) | [Examples](https://threejs.org/examples/)

","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":266,"value":"renderer.domElement","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":544,"value":"Inputs.button(\"Replay\", {\n value: null,\n reduce: () => {\n mutable currentFrame = 1;\n camera.position.set(0, 0, cameraStartPos)\n }\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":548,"value":"viewof run = Inputs.toggle({ label: \"Run?\", value: true })","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":644,"value":"viewof cameraStartPos = Inputs.range([250, 1], {\n label: \"Camera Starting Distance\",\n step: 1,\n value: 125\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":642,"value":"### Parameters","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":772,"value":"#### _video_","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":669,"value":"viewof cameraSpeed = Inputs.range([1, 10], {\n label: \"Camera Speed\",\n step: 1,\n value: 4\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":52,"value":"height = 500","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":875,"value":"viewof numFrames = Inputs.range([0, 2000], {\n label: \"Num of frames\",\n step: 1,\n value: 1200\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":879,"value":"mutable currentFrame = 1","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":906,"value":"capturer = new ccapture({\n format: \"webm\",\n framerate: 30\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":777,"value":"#### _box_","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":784,"value":"viewof boxOpacity = Inputs.range([0, 1], {\n label: \"Opacity\",\n step: 0.05,\n value: 0.5\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":452,"value":"cylinderParams = ({\n length: 0.5,\n width: 0.02\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":479,"value":"infiniteLineParams = ({\n infinite_length: 1000,\n infinite_color: 0xffffff\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":681,"value":"### Scene Setup","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":304,"value":"// Continuously updates\n{\n while (true) {\n if (run && currentFrame < numFrames) {\n if (record && currentFrame == 1) {\n console.log('Start recording...');\n // await capturer.start();\n }\n mutable currentFrame += 1;\n camera.translateZ(-0.02 * cameraSpeed);\n }\n await renderer.render(scene, camera);\n\n if (run && record && currentFrame < numFrames) {\n // await capturer.capture(renderer.domElement);\n }\n\n if (run && record && currentFrame == numFrames - 1) {\n console.log('Stopped recording.');\n // await capturer.stop();\n console.log('Saving...');\n // await capturer.save();\n console.log('Saved.');\n }\n yield null;\n }\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":18,"value":"camera = {\n // const { cameraStartPos } = cameraParams;\n\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.set(0, 0, cameraStartPos);\n camera.lookAt(new THREE.Vector3(0, 0, 0));\n return camera;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":249,"value":"scene = {\n const scene = new THREE.Scene();\n scene.background = new THREE.Color(0x000000);\n scene.add(...boxes);\n return scene;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":7,"value":"renderer = {\n const renderer = new THREE.WebGLRenderer({ antialias: true });\n if (record) {\n renderer.setSize(1920, 1080);\n } else {\n renderer.setSize(width, height);\n }\n renderer.setPixelRatio(devicePixelRatio);\n // const controls = new THREE.OrbitControls(camera, renderer.domElement);\n // controls.addEventListener(\"change\", () => renderer.render(scene, camera));\n // invalidation.then(() => (controls.dispose(), renderer.dispose()));\n return renderer;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1145,"value":"boxes_pos = {\n const depth = 6;\n const spacing = 10;\n\n const grid = _.range(depth)\n .map((x_i) =>\n _.range(depth).map((y_i) => [\n x_i * spacing - (depth / 2) * spacing + spacing / 2,\n y_i * spacing - (depth / 2) * spacing + spacing / 2,\n Math.random() * 100 + 5 //\n // (y_i + x_i * depth) * spacing\n // 20\n ])\n )\n .flat();\n\n return grid;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":568,"value":"boxes = {\n const depth = 10;\n const spacing = 6;\n\n const grid = _.range(depth)\n .map((x_i) =>\n _.range(depth).map((y_i) => [\n x_i * spacing - (depth / 2) * spacing + spacing / 2,\n y_i * spacing - (depth / 2) * spacing + spacing / 2,\n Math.random() * 100 + 5 //\n // (y_i + x_i * depth) * spacing\n // 20\n ])\n )\n .flat();\n\n // const coords = [\n // [5, 5, 0],\n // [2, 3, 4],\n // [-1, -2, -3]\n // ];\n const coords = grid;\n\n // return grid;\n\n return coords.map((c, i) => dataGroup(...c, gdata[i]));\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":691,"value":"## Box Functions","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":277,"value":"$4b","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":487,"value":"function createEdgeExtensions(geometry, length) {\n const edges = new THREE.EdgesGeometry(geometry);\n const posAttr = edges.attributes.position;\n const group = new THREE.Group();\n\n const lineMaterial = new THREE.LineBasicMaterial({\n color: infiniteLineParams.infinite_color,\n transparent: true,\n opacity: 0.1\n });\n\n // Process each edge (two vertices at a time)\n for (let i = 0; i < posAttr.count; i += 2) {\n const v1 = new THREE.Vector3(\n posAttr.getX(i),\n posAttr.getY(i),\n posAttr.getZ(i)\n );\n\n const v2 = new THREE.Vector3(\n posAttr.getX(i + 1),\n posAttr.getY(i + 1),\n posAttr.getZ(i + 1)\n );\n\n // Create two infinite lines per edge\n createInfiniteLine(v1, v2, length, lineMaterial, group);\n createInfiniteLine(v2, v1, length, lineMaterial, group);\n }\n\n return group;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":466,"value":"function createInfiniteLine(\n startVertex,\n directionVertex,\n length,\n material,\n parent\n) {\n const direction = new THREE.Vector3()\n .subVectors(directionVertex, startVertex)\n .normalize()\n .multiplyScalar(length);\n\n const sVertex = directionVertex;\n\n const endPoint = new THREE.Vector3().addVectors(sVertex, direction);\n\n const geometry = new THREE.BufferGeometry().setFromPoints([\n sVertex,\n endPoint\n ]);\n\n const line = new THREE.Line(geometry, material);\n parent.add(line);\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":373,"value":"function getVertexes(boxGeom) {\n const positions = boxGeom.attributes.position;\n\n const vertexes = _.range(positions.count).map((i) => [\n positions.getX(i),\n positions.getY(i),\n positions.getZ(i)\n ]);\n\n const unique_vertexes = vertexes.reduce(\n (acc, v, i, ar) =>\n acc.some((acc_v) =>\n acc_v.every((acc_v_v, acc_v_i) => v[acc_v_i] == acc_v_v)\n )\n ? acc\n : [...acc, v],\n []\n );\n\n return unique_vertexes; //.map((v) => new THREE.Vector3(...v));\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":723,"value":"$4c","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1085,"value":"$4d","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1126,"value":"$4e","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":763,"value":"$4f","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":600,"value":"## Single box\nWith draggable orbit camera","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":621,"value":"single_renderer.domElement","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":845,"value":"viewof testData = Inputs.range([0, gdata.length - 1], {\n label: \"Example Data\",\n step: 1,\n value: 0\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":619,"value":"// Continuously updates\n{\n while (true) {\n // cube.rotation.z += 0.01;\n single_renderer.render(single_scene, single_camera);\n yield null;\n }\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":604,"value":"single_renderer = {\n const srenderer = new THREE.WebGLRenderer({ antialias: true });\n srenderer.setSize(width, height);\n srenderer.setPixelRatio(devicePixelRatio);\n const controls = new THREE.OrbitControls(single_camera, srenderer.domElement);\n controls.addEventListener(\"change\", () =>\n srenderer.render(single_scene, single_camera)\n );\n invalidation.then(() => (controls.dispose(), srenderer.dispose()));\n return srenderer;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":607,"value":"single_scene = {\n const sscene = new THREE.Scene();\n sscene.background = new THREE.Color(0x000000);\n const singlebox = dataGroup(0, 0, 0, gdata[testData]);\n sscene.add(singlebox);\n return sscene;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":611,"value":"single_camera = {\n const fov = 45;\n const aspect = width / height;\n const near = 1;\n const far = 1000;\n const scamera = new THREE.PerspectiveCamera(fov, aspect, near, far);\n scamera.position.set(5, 5, -10);\n scamera.lookAt(new THREE.Vector3(0, 0, 0));\n return scamera;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":892,"value":"# Recording\nSteps to record:\n1. Untoggle Run\n2. Press replay to set back to frame 1\n3. Toggle record on _(this will also change the resolution settings of the render cell)_\n4. Press Run\n5. When animation stops and all frames have passed, press the Finalize recording button. A file will be downloaded.\n6. Rename the file downloaded to a nem of your choice (keep the .webm extension)\n7. Open terminal, navigate to the Download folder and run the following command:\n - ``ffmpeg -i {filename}.webm -vsync vfr {filename}.mp4``\n8. Voila! The file will be ready in .mp4 extension\n ","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":894,"value":"viewof record = Inputs.toggle({ label: \"Record?\", value: false })","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":916,"value":"Inputs.button(\"Finalize recording.\", {\n value: null,\n reduce: async () => {\n await capturer.stop();\n await capturer.save();\n }\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1164,"value":"### Highres picture","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":1172,"value":"Inputs.button(\"Capture Highres.\", {\n value: null,\n reduce: async () => {\n captureHighResImage(...highres_settings);\n }\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1166,"value":"$50","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1169,"value":"highres_settings = [\n renderer, // Renderer\n scene, // Scene\n camera, // Camera\n 3840, // Width\n 2160 // Heigh\n]","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":807,"value":"## Data","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":1078,"value":"gdata = gsheets_data","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":818,"value":"function getImageURL({\n photo1_url,\n photo2_url,\n photo3_url,\n photo4_url,\n photo5_url\n}) {\n return [photo1_url, photo2_url, photo3_url, photo4_url, photo5_url];\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":816,"value":"function getTags(data) {\n const { label1, label2, label3 } = data;\n return [label1, label2, label3].map(\n (label) => label && `#${label.split(\", \")[0]}`\n );\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1063,"value":"gsheets_data = d3.csv(\n getCsvFromGSheetsUrl(\n \"https://docs.google.com/spreadsheets/d/1ajCnrNK1rrgknDV4NjzuiOuX0fYa40cBJcaAhH5ffSQ/edit#gid=1026315595\"\n ),\n d3.autoType\n)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":615,"value":"## Imports","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":3,"value":"THREE = {\n const THREE = window.THREE = await require(\"three@0.130.0/build/three.min.js\");\n await require(\"three@0.130.0/examples/js/controls/OrbitControls.js\").catch(() => {});\n return THREE;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":900,"value":"ccapture = {\n const c = await require(\"ccapture.js\")\n return c\n}\n// ccapture = await npm(\"ccapture.js\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1174,"value":"import { npm } from \"@pkg/npm\"","pinned":true,"hidden":false,"mode":"ts","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1061,"value":"getCsvFromGSheetsUrl = (url) => {\n url = new URL(url);\n const id = url.pathname.split(\"/\")[3];\n const gid = new URLSearchParams(url.hash.slice(1)).get(\"gid\") || 0;\n return `https://docs.google.com/spreadsheets/d/${id}/export?format=csv&gid=${gid}`;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W51","stdlib":"1"}} 24:null