Library is empty. Select a block and tap “Add selected to Library”. Saved on this device.
'; } /* ---------- BUILD STATIC LISTS ---------- */ document.getElementById('blocklist').innerHTML = SHAPES.map(function(s){ return ''; }).join(''); document.getElementById('brushlist').innerHTML = BRUSHES.map(function(b, i){ return ''; }).join(''); document.getElementById('lwpresets').innerHTML = LW.map(function(p, i){ var bg = '#' + new THREE.Color(p[1]).getHexString(), ln = '#' + new THREE.Color(p[2]).getHexString(); return ''; }).join(''); var SW = ['#D4A017','#FFD700','#F5F5F5','#1A1A1A','#00CCFF','#FF4444','#7A2E3A','#8B5A2B','#2F6F58','#0B2A5A','#C0C4CC','#C9A54F']; document.getElementById('swatches').innerHTML = SW.map(function(c){ return ''; }).join(''); /* ---------- LAYOUT: phone vs studio ---------- */ var layout = null, sheetKey = null, tabKey = 'build'; var SHEETS = { primitives: ['Mesh Primitives', ['sec-blocks','sec-modes']], brushes: ['Surface Brushes', ['sec-brushes','sec-mat']], clay: ['Digital Clay', ['sec-clay']], tools: ['Creator Tools (13)', ['sec-tools']], color: ['Color', ['sec-color']], precision: ['Precision Align · Properties', ['sec-props']], linework: ['Linework Chooser', ['sec-linework']], lightfx: ['Lighting & FX', ['sec-light','sec-fx','sec-anim']], library: ['Assets Library', ['sec-library']], layers: ['Manage Layers', ['sec-layers']], export: ['Render & Export', ['sec-export']] }; var TABS = {build:['sec-blocks','sec-modes','sec-tools'], sculpt:['sec-clay'], materials:['sec-mat'], lighting:['sec-linework'], animation:['sec-anim'], fx:['sec-fx'], export:['sec-export']}; var store = document.getElementById('store'); function put(ids, into){ ids.forEach(function(id){ into.appendChild(document.getElementById(id)); }); } function stowAll(){ Array.prototype.slice.call(document.querySelectorAll('.sec')).forEach(function(s){ store.appendChild(s); }); } function openSheet(k){ if(layout !== 'phone'){ return; } var sh = document.getElementById('sheet'), body = document.getElementById('sheet-body'); stowAll(); sheetKey = k; document.querySelectorAll('[data-act="sheet"]').forEach(function(b){ b.classList.toggle('on', b.getAttribute('data-arg') === k && b.id !== 'card'); }); if(!k){ sh.classList.remove('open'); return; } document.getElementById('sheet-title').textContent = SHEETS[k][0].toUpperCase(); put(SHEETS[k][1], body); body.scrollTop = 0; sh.classList.add('open'); } function setTab(t){ if(layout !== 'studio') { if(t === 'export') openSheet('export'); return; } tabKey = t; var left = document.getElementById('s-left'); TABS[tabKey] && Object.keys(TABS).forEach(function(k){ if(k !== t) TABS[k].forEach(function(id){ var el = document.getElementById(id); if(el.parentNode === left) store.appendChild(el); }); }); put(TABS[t], left); left.scrollTop = 0; document.querySelectorAll('[data-act="tab"]').forEach(function(b){ b.classList.toggle('on', b.getAttribute('data-arg') === t); }); } function applyLayout(){ var coarse = window.matchMedia && window.matchMedia('(pointer: coarse)').matches; var want = (window.innerWidth < 820 || coarse) ? 'phone' : 'studio'; if(want !== layout){ layout = want; document.body.classList.toggle('phone', want === 'phone'); document.body.classList.toggle('studio', want === 'studio'); stowAll(); if(want === 'studio'){ put(['sec-props','sec-layers'], document.getElementById('s-right')); put(['sec-library'], document.getElementById('sb-1')); put(['sec-brushes'], document.getElementById('sb-2')); put(['sec-color'], document.getElementById('sb-3')); put(['sec-light'], document.getElementById('sb-4')); document.getElementById('sheet').classList.remove('open'); setTab(tabKey); } else { openSheet(sheetKey); } } if(want === 'phone') document.documentElement.style.setProperty('--shelfH', document.getElementById('shelf').offsetHeight + 'px'); resize(); } function resize(){ var w = Math.max(1, vp.clientWidth), h = Math.max(1, vp.clientHeight); renderer.setSize(w, h, false); camera.aspect = w / h; camera.updateProjectionMatrix(); } window.addEventListener('resize', applyLayout); window.addEventListener('orientationchange', applyLayout); if(window.ResizeObserver) new ResizeO