scene = { // ---------------- Container with external slider above canvas ---------------- const n=5 const container = html`

Iterations ${n}

`; const iterSlider = container.querySelector('#iter'); const iterValue = container.querySelector('#iterValue'); // Canvas host -- ResizeObserver watches this for width changes. We intentionally // do NOT reference Observable's `width` (doing so would re-run the cell on resize, // tearing down the WebGL context). Instead we observe our own container. // We make it `position: relative` so we can place sentinel elements inside it // for IntersectionObserver to track top / middle / bottom visibility. // In portrait the canvas is constrained so it's never taller than 1 wide : 2 high. // On a phone (very narrow) this lands exactly at 1:2 (height = 2 * width); on wider // viewports the height tops out at BASE_HEIGHT and the canvas reads as landscape. const BASE_HEIGHT = 850; const PORTRAIT_MAX_TALLNESS = 2; // cap on height / width const computeHeight = (w) => Math.min(BASE_HEIGHT, PORTRAIT_MAX_TALLNESS * w); const canvasHost = html`

`; container.appendChild(canvasHost); // ---------------- Visibility sentinels ---------------- // Three zero-size, non-interactive markers at the top, middle, and bottom of the // canvas host. An IntersectionObserver tracks which (if any) are in the viewport. // The render loop only draws when at least one sentinel is visible -- this avoids // burning GPU cycles when the user has scrolled the scene off-screen. const sentinelStyle = ` position: absolute; left: 0; width: 1px; height: 1px; pointer-events: none; visibility: hidden; `; const sentinelTop = html`

`; const sentinelMid = html`

`; const sentinelBot = html`

`; canvasHost.appendChild(sentinelTop); canvasHost.appendChild(sentinelMid); canvasHost.appendChild(sentinelBot); const visibleSentinels = new Set(); const intersectionObserver = new IntersectionObserver((entries) => { for (const entry of entries) { if (entry.isIntersecting) visibleSentinels.add(entry.target); else visibleSentinels.delete(entry.target); } }); intersectionObserver.observe(sentinelTop); intersectionObserver.observe(sentinelMid); intersectionObserver.observe(sentinelBot); // Initial size from the container's actual rendered width. const initialRect = canvasHost.getBoundingClientRect(); let curW = Math.max(1, Math.floor(initialRect.width)) || 960; let curH = computeHeight(curW); canvasHost.style.height = curH + 'px'; // ---------------- Scene setup ---------------- const scene = new THREE.Scene(); const camera = new THREE.PerspectiveCamera(45, curW / curH, 0.1, 2000000); camera.position.set(0, 3*.8, -7*.8); const renderer = new THREE.WebGLRenderer({ antialias: true, powerPreference: 'high-performance', }); renderer.setPixelRatio(Math.min(window.devicePixelRatio, 2)); renderer.setSize(curW, curH); renderer.outputColorSpace = THREE.SRGBColorSpace; renderer.toneMapping = THREE.ACESFilmicToneMapping; renderer.toneMappingExposure = 0.9; renderer.domElement.style.display = 'block'; canvasHost.appendChild(renderer.domElement); const controls = new THREE.OrbitControls(camera, renderer.domElement); controls.enableDamping = true; controls.dampingFactor = 0.04; // lower = smoother, longer glide (default 0.05) controls.zoomSpeed = 1; // larger zoom step per wheel tick (default 1.0) controls.rotateSpeed = 1; // gentler rotate -> smoother feel when paired with low damping controls.enablePan = false; // panning disabled entirely (no right-drag, no two-finger pan) controls.target.set(0, 0, 0); // ---------------- Zoom-to-fit (handles portrait aspect ratios) ---------------- // The default camera position frames the (roughly spherical) scene so it fits // top-to-bottom -- i.e. against the vertical FOV. In portrait (aspect < 1) the // *horizontal* FOV is narrower than the vertical one, so the sphere overflows // left/right. For a perspective camera the on-screen width fraction of an object // of radius R at distance d is R / (d * aspect * tan(vFOV/2)) , so to hold that // fraction constant below square we pull the camera back by exactly 1/aspect. // At/above square the factor is 1 (no change) -> the crossover is a square viewport. const BASE_VIEW_DIST = camera.position.distanceTo(controls.target); function fitDistanceForAspect(aspect) { const factor = aspect < 1 ? 1 / aspect : 1; return BASE_VIEW_DIST * factor; } // Smooth zoom state: each wheel tick adjusts `zoomTargetDist` (the distance // from controls.target we're easing toward), and the render loop interpolates // the camera's actual distance toward it each frame. This gives wheel zoom // its own inertia, independent of OrbitControls' rotate damping. let zoomTargetDist = BASE_VIEW_DIST; const ZOOM_SMOOTH = 0.18; // per-frame easing factor toward target (higher = snappier) // `userZooming` is true only while WE are driving the zoom (wheel / middle-drag). // When it's false the render loop leaves the distance to OrbitControls (e.g. a // touch pinch) and just keeps `zoomTargetDist` synced to the actual distance -- // so the smooth-ease never yanks the camera back after a pinch ends. let userZooming = false; // True once the user rotates / zooms / pinches. After that we stop auto-fitting // on resize so a device rotation never overrides the view they chose. let userHasInteracted = false; controls.addEventListener('start', () => { userHasInteracted = true; }); function clampZoomTarget() { zoomTargetDist = Math.max(controls.minDistance, Math.min(controls.maxDistance, zoomTargetDist)); } // Re-frame the scene for the current aspect ratio, preserving the camera's // current view direction. Called once on init and again on resize until the // user interacts (covers portrait<->landscape device rotation). function applyFitToView() { const aspect = curW / curH; const targetDist = fitDistanceForAspect(aspect); const dir = camera.position.clone().sub(controls.target); const len = dir.length() || 1; dir.multiplyScalar(targetDist / len); camera.position.copy(controls.target).add(dir); zoomTargetDist = targetDist; clampZoomTarget(); } applyFitToView(); // Stop the page from scrolling when the user wheels over the canvas, and // drive the zoom ourselves. We can't rely on OrbitControls' built-in wheel // handler here: it has a known quirk where it bails out if `state !== NONE // && state !== ROTATE`, and the state machine can get stuck (e.g. when a // drag is released off-canvas, see three.js #24566). Driving the dolly // directly sidesteps the state check entirely. // // `stopImmediatePropagation` + capture-phase registration ensures our // listener runs first and OrbitControls' listener never sees the event -- // otherwise both would fire and zoom would be doubled. // `passive: false` is required for preventDefault to take effect on wheel. // // Mouse wheel vs trackpad: browsers fire `wheel` for both, and there's no // clean API to tell them apart. The reliable heuristic is the delta // magnitude: real mouse wheels fire discrete events with large jumps // (typically |deltaY| >= 100 in pixel mode, or notch-y multiples of ~120), // while trackpads fire many small fractional deltas as the user scrolls. // We also treat pinch-zoom (ctrlKey set synthetically by the browser) as // trackpad. Trackpad/pinch get 1x; mouse wheel gets 3x. const WHEEL_PIXEL_THRESHOLD = 50; const onCanvasWheel = (e) => { e.preventDefault(); e.stopImmediatePropagation(); const isTrackpad = e.ctrlKey || (e.deltaMode === 0 && Math.abs(e.deltaY) < WHEEL_PIXEL_THRESHOLD); const strength = isTrackpad ? 1 : 3; const zoomScale = Math.pow(0.95, controls.zoomSpeed * strength); if (e.deltaY < 0) { zoomTargetDist *= zoomScale; // wheel up -> zoom in } else if (e.deltaY > 0) { zoomTargetDist *= 1 / zoomScale; // wheel down -> zoom out } userZooming = true; userHasInteracted = true; clampZoomTarget(); }; renderer.domElement.addEventListener('wheel', onCanvasWheel, { passive: false, capture: true }); // Middle mouse: swallow OrbitControls' own handling (which would otherwise // latch its state machine into DOLLY and break subsequent wheel events), and // implement middle-drag-to-zoom ourselves. Vertical drag distance is mapped // to a multiplicative zoom factor and pushed into `zoomTargetDist`, so it // composes with the same smoothing as the wheel. Tuned so a drag spanning // the full canvas height roughly doubles or halves the distance. let middleDragLastY = null; const MIDDLE_DRAG_PIXELS_PER_DOUBLING = 200; const onCanvasMouseDown = (e) => { if (e.button === 1) { e.preventDefault(); e.stopPropagation(); middleDragLastY = e.clientY; } }; renderer.domElement.addEventListener('mousedown', onCanvasMouseDown, true); // mousemove + mouseup are on `window` so we keep tracking even if the // cursor leaves the canvas mid-drag. const onWindowMouseMove = (e) => { if (middleDragLastY === null) return; const dy = e.clientY - middleDragLastY; middleDragLastY = e.clientY; // Drag down -> zoom out (distance grows). Sign matches typical 3D apps. const factor = Math.pow(2, dy / MIDDLE_DRAG_PIXELS_PER_DOUBLING); zoomTargetDist *= factor; userZooming = true; userHasInteracted = true; clampZoomTarget(); }; const onWindowMouseUp = (e) => { if (e.button === 1) middleDragLastY = null; }; window.addEventListener('mousemove', onWindowMouseMove); window.addEventListener('mouseup', onWindowMouseUp); // ---------------- Sky + environment ---------------- const sky = new THREE.Sky(); sky.scale.setScalar(450000); const skyU = sky.material.uniforms; skyU.turbidity.value = 10; skyU.rayleigh.value = 3; skyU.mieCoefficient.value = 0; skyU.mieDirectionalG.value = 0; const sunElevation = 3; const sunAzimuth = 180; const phi = THREE.MathUtils.degToRad(90 - sunElevation); const theta = THREE.MathUtils.degToRad(sunAzimuth); const sun = new THREE.Vector3().setFromSphericalCoords(1, phi, theta); skyU.sunPosition.value.copy(sun); scene.add(sky); // Bake sky into a PMREM (one-time) const pmrem = new THREE.PMREMGenerator(renderer); const skyScene = new THREE.Scene(); skyScene.add(sky.clone()); const envRT = pmrem.fromScene(skyScene); pmrem.dispose(); scene.environment = envRT.texture; // ---------------- Lights ---------------- const hemiLight = new THREE.HemisphereLight(0xffffff, 0xffffff, 2); hemiLight.color.setHSL(0.6, 1, 0.6); hemiLight.groundColor.setHSL(0.095, 1, 0.75); hemiLight.position.set(0, 50, 0); scene.add(hemiLight); const rectLight = new THREE.RectAreaLight(0xfff0d0, 18, 18, 8); rectLight.position.copy(sun).multiplyScalar(20); // closer than the old dirLight; intensity falls off with distance rectLight.lookAt(0, 0, 0); scene.add(rectLight); // ---------------- Materials ---------------- const upMaterial = new THREE.MeshStandardMaterial({ color: 0xffe988, metalness: 1.0, roughness: 0.1, envMapIntensity: 3, emissive: 0xffaa33, emissiveIntensity: 0, }); const downMaterial = new THREE.MeshStandardMaterial({ color: 0xffffff, metalness: 1.0, roughness: 0.75, envMapIntensity: 1.3, }); downMaterial.onBeforeCompile = (shader) => { shader.vertexShader = shader.vertexShader .replace( '#include ', `#include attribute vec3 aBranchColor; varying vec3 vBranchColor;` ) .replace( '#include ', `#include vBranchColor = aBranchColor;` ); shader.fragmentShader = shader.fragmentShader .replace( '#include ', `#include varying vec3 vBranchColor;` ) .replace( '#include ', `#include diffuseColor.rgb *= vBranchColor;` ); }; const apexCapMaterial = new THREE.MeshStandardMaterial({ color: 0xd09870, metalness: 1.0, roughness: 0.75, envMapIntensity: 1.3, }); const TETRA_SIZE = constants.TETRA_SIZE; const BEVEL_FRAC = constants.BEVEL_FRAC; const merkaba = new THREE.Group(); scene.add(merkaba); const upGroup = new THREE.Group(); const downGroup = new THREE.Group(); merkaba.add(upGroup); merkaba.add(downGroup); // Reusable temp objects const _m = new THREE.Matrix4(); const _q = new THREE.Quaternion(); const _s = new THREE.Vector3(); const _p = new THREE.Vector3(); const _UP = new THREE.Vector3(0, 1, 0); function clearGroup(g) { while (g.children.length) { const c = g.children.pop(); if (c.geometry) c.geometry.dispose(); } } // ---------------- Build geometry (called on slider change) ---------------- function rebuild(iterations) { clearGroup(upGroup); clearGroup(downGroup); // -------- Upward Sierpinski -------- const sierpInstances = []; collectSierpinski(upwardTetraVertices(TETRA_SIZE), iterations, sierpInstances); const { geometry: unitTetraGeom, sizeBoost: tetraSizeBoost } = makeUnitTetraGeometry(BEVEL_FRAC); const tetraInst = new THREE.InstancedMesh(unitTetraGeom, upMaterial, sierpInstances.length); for (let i = 0; i < sierpInstances.length; i++) { const { center, size } = sierpInstances[i]; const s = size * tetraSizeBoost; _s.set(s, s, s); _q.identity(); _m.compose(center, _q, _s); tetraInst.setMatrixAt(i, _m); } tetraInst.instanceMatrix.needsUpdate = true; upGroup.add(tetraInst); // -------- Downward fractal tree -------- const N = iterations; const apex = new THREE.Vector3(0, -TETRA_SIZE, 0); const topR = TETRA_SIZE * Math.sqrt(8 / 9); const H_total = TETRA_SIZE + TETRA_SIZE / 3; const r1 = topR / (2 * (1 - Math.pow(0.5, N))); const r_levels = Array.from({ length: N }, (_, i) => r1 * Math.pow(0.5, i)); const H1 = H_total / (2 * (1 - Math.pow(0.5, N))); const H_levels = Array.from({ length: N }, (_, i) => H1 * Math.pow(0.5, i)); const branchLen1 = Math.sqrt(r_levels[0] * r_levels[0] + H_levels[0] * H_levels[0]); // Thickness baselines are tuned for N=8. Lower N -> thicker, higher N -> finer. // Trunk uses a gentler 1.5^(8-N) curve so sparse trees don't look like sausages; // tips use a stronger 2.0^(8-N) curve so coarse branches still read as branches. const trunkScale = Math.pow(1.25, 8 - N); const tipScale = Math.pow(2.0, 8 - N); const TRUNK_RATIO = 0.0366; const trunkR = TRUNK_RATIO * branchLen1 * trunkScale; const topR_tube = 0.0025 * tipScale; const ringRadii = Array.from({ length: N + 1 }, (_, i) => trunkR * Math.pow(topR_tube / trunkR, i / N) ); const perLevelInstances = Array.from({ length: N }, () => []); collectTree(apex, 1, N, r_levels, H_levels, perLevelInstances, new THREE.Color(0xd09870)); for (let k = 0; k < N; k++) { const instArr = perLevelInstances[k]; if (instArr.length === 0) continue; const rBottom = ringRadii[k]; const rTop = ringRadii[k + 1]; const geom = makeBranchGeometry(r_levels[k], H_levels[k], rBottom, rTop, k === N - 1); const mesh = new THREE.InstancedMesh(geom, downMaterial, instArr.length); const colorArr = new Float32Array(instArr.length * 3); for (let i = 0; i < instArr.length; i++) { const { from, theta, tint } = instArr[i]; _q.setFromAxisAngle(_UP, -theta); _p.copy(from); _s.set(1, 1, 1); _m.compose(_p, _q, _s); mesh.setMatrixAt(i, _m); colorArr[i * 3 + 0] = tint.r; colorArr[i * 3 + 1] = tint.g; colorArr[i * 3 + 2] = tint.b; } geom.setAttribute('aBranchColor', new THREE.InstancedBufferAttribute(colorArr, 3)); mesh.instanceMatrix.needsUpdate = true; downGroup.add(mesh); } // Bottom cap const apexCapRadius = ringRadii[0]; const apexCapGeom = new THREE.SphereGeometry( apexCapRadius, 64, 32, 0, Math.PI * 2, Math.PI / 2, Math.PI / 2 ); const apexCap = new THREE.Mesh(apexCapGeom, apexCapMaterial); apexCap.position.copy(apex); downGroup.add(apexCap); } // Wire up the slider -- rebuild geometry only, NOT the renderer. iterSlider.addEventListener('input', () => { const n = parseInt(iterSlider.value, 10); iterValue.textContent = n; rebuild(n); }); // Initial build rebuild(parseInt(iterSlider.value, 10)); // ---------------- Keyboard rotation ---------------- const pressedKeys = new Set(); const ROTATE_SPEED = 1.2; let lastFrameTime = performance.now(); function keyToDir(key) { if (key === 'ArrowLeft' || key === 'a' || key === 'A') return -1; if (key === 'ArrowRight' || key === 'd' || key === 'D') return +1; return 0; } const onKeyDown = (e) => { if (keyToDir(e.key) !== 0) { pressedKeys.add(e.key); e.preventDefault(); } }; const onKeyUp = (e) => { pressedKeys.delete(e.key); }; const onBlur = () => pressedKeys.clear(); window.addEventListener('keydown', onKeyDown); window.addEventListener('keyup', onKeyUp); window.addEventListener('blur', onBlur); // ---------------- Resize handling ---------------- // Observe the canvas host's width and update renderer/camera in place. // No `width` reference -> no cell re-run on viewport changes. const resizeObserver = new ResizeObserver((entries) => { for (const entry of entries) { const newW = Math.max(1, Math.floor(entry.contentRect.width)); if (newW === curW) continue; curW = newW; curH = computeHeight(curW); // keep portrait no taller than 1:2 canvasHost.style.height = curH + 'px'; renderer.setSize(curW, curH); camera.aspect = curW / curH; camera.updateProjectionMatrix(); // Re-frame for the new aspect (e.g. phone rotated) -- but only until the // user has taken control of the view, so we never override their zoom. if (!userHasInteracted) applyFitToView(); } }); resizeObserver.observe(canvasHost); // ---------------- Render loop ---------------- // We always pump `requestAnimationFrame` so the loop can resume the moment a // sentinel scrolls back into view, but we skip the actual three.js render // (and the `controls.update()` that drives damping) when nothing is visible. // `lastFrameTime` is reset whenever we wake back up so the next `dt` doesn't // include the time spent off-screen. let stopped = false; let wasVisible = true; function animate(now) { if (stopped) return; const isVisible = visibleSentinels.size > 0; if (!isVisible) { wasVisible = false; requestAnimationFrame(animate); return; } if (!wasVisible) { // Just became visible again -- reset the clock so dt doesn't spike. lastFrameTime = now; wasVisible = true; } const dt = Math.min((now - lastFrameTime) / 1000, 0.1); lastFrameTime = now; let dir = 0; for (const k of pressedKeys) dir += keyToDir(k); if (dir !== 0) { const angle = dir * ROTATE_SPEED * dt; const offset = camera.position.clone().sub(controls.target); offset.applyAxisAngle(_UP, angle); camera.position.copy(controls.target).add(offset); camera.lookAt(controls.target); } // Smooth zoom. Two regimes: // * userZooming -> WE are driving (wheel / middle-drag): ease the camera's // current distance toward `zoomTargetDist`. Using `1 - exp(-k*dt)` makes // the easing rate frame-rate-independent (at 60fps with k=12 this is // ~18% per frame, matching ZOOM_SMOOTH). When we reach the target we hand // control back by clearing the flag. // * otherwise -> OrbitControls is driving the distance (most importantly a // touch PINCH, plus its dolly damping). We don't touch the camera; we just // keep `zoomTargetDist` synced to the actual distance so the ease never // springs the camera back to a stale target after the pinch ends. const offsetVec = camera.position.clone().sub(controls.target); const curDist = offsetVec.length(); if (userZooming) { if (curDist > 1e-6 && Math.abs(curDist - zoomTargetDist) > 1e-5) { const k = -Math.log(1 - ZOOM_SMOOTH) * 60; // converts per-frame@60fps to per-second const alpha = 1 - Math.exp(-k * dt); const newDist = curDist + (zoomTargetDist - curDist) * alpha; offsetVec.multiplyScalar(newDist / curDist); camera.position.copy(controls.target).add(offsetVec); } else { userZooming = false; // reached target -- let OrbitControls own the distance again } } else if (curDist > 1e-6) { zoomTargetDist = curDist; } controls.update(); renderer.render(scene, camera); requestAnimationFrame(animate); } requestAnimationFrame(animate); // ---------------- Cleanup on cell invalidation ---------------- invalidation.then(() => { stopped = true; resizeObserver.disconnect(); intersectionObserver.disconnect(); window.removeEventListener('keydown', onKeyDown); window.removeEventListener('keyup', onKeyUp); window.removeEventListener('blur', onBlur); renderer.domElement.removeEventListener('wheel', onCanvasWheel, { capture: true }); renderer.domElement.removeEventListener('mousedown', onCanvasMouseDown, true); window.removeEventListener('mousemove', onWindowMouseMove); window.removeEventListener('mouseup', onWindowMouseUp); controls.dispose(); renderer.dispose(); envRT.dispose(); }); return container; }