31:T1992,{ // 1. DEPENDENCIES & CONFIGURATION // All dependencies and settings are loaded inside this single block const THREE = await import("https://cdn.skypack.dev/three@0.132.2"); const {OrbitControls} = await import("https://cdn.skypack.dev/three@0.132.2/examples/jsm/controls/OrbitControls.js"); const config = { width: 960, height: 700, capitalScaleMap: { "Seed": 0.08, "Growth": 0.14, "State": 0.22, "N/A": 0.04 }, identityColors: { "Charter City": "#1f77b4", "DAO": "#ff7f0e", "Diaspora": "#d62728", "For-Profit Corp": "#2ca02c", "Media Outlet": "#9467bd", "Movement": "#8c564b", "Non-Profit Foundation": "#e377c2", "Protocol": "#f7b6d2", "SEZ": "#8c564b", "Think Tank": "#c7c7c7", "Venture Fund": "#17becf" }, backgroundColor: "#F5F5F5", gridColor: "#cccccc" }; // 2. SCENE SETUP const scene = new THREE.Scene(); scene.background = new THREE.Color(config.backgroundColor); const camera = new THREE.PerspectiveCamera(60, config.width / config.height, 0.1, 1000); camera.position.set(2, 2, 4.5); const renderer = new THREE.WebGLRenderer({antialias: true}); renderer.setSize(config.width, config.height); renderer.setPixelRatio(window.devicePixelRatio); // 3. LIGHTING AND HELPERS scene.add(new THREE.AmbientLight(0xffffff, 0.8)); const dirLight = new THREE.DirectionalLight(0xffffff, 1.0); dirLight.position.set(5, 10, 7.5); scene.add(dirLight); const gridHelper = new THREE.GridHelper(5, 10, config.gridColor, config.gridColor); scene.add(gridHelper); // 4. CREATE 3D OBJECTS const sphereGroup = new THREE.Group(); scene.add(sphereGroup); atlasData.forEach(d => { const geometry = new THREE.SphereGeometry(config.capitalScaleMap[d.layer2_profile.scale.capital] || 0.08, 32, 32); const material = new THREE.MeshStandardMaterial({ color: new THREE.Color(config.identityColors[d.layer2_profile.identity.primary] || "#01ffbf"), metalness: 0.3, roughness: 0.6 }); const sphere = new THREE.Mesh(geometry, material); sphere.position.set( d.layer1_coordinates.genesis_locus_score * 2.5, d.layer1_coordinates.sovereignty_level * 0.4 + 0.1, d.layer1_coordinates.modus_operandi_score * 2.5 ); sphere.userData = d; sphereGroup.add(sphere); }); // 5. SETUP HTML CONTAINER AND UI const container = document.createElement("div"); container.style.position = 'relative'; container.appendChild(renderer.domElement); const uiContainer = document.createElement("div"); // ... (весь код для uiContainer, легенды, осей и вотермарки) uiContainer.style.position = "absolute"; uiContainer.style.top = "0"; uiContainer.style.left = "0"; uiContainer.style.width = "100%"; uiContainer.style.height = "100%"; uiContainer.style.pointerEvents = "none"; container.appendChild(uiContainer); let legendHTML = `

`; for (const [key, value] of Object.entries(config.identityColors)) { legendHTML += `

${key}

`; } legendHTML += `

`; uiContainer.innerHTML = legendHTML; const createLabel = (text, styles) => { const label = document.createElement("div"); label.textContent = text; Object.assign(label.style, { position: 'absolute', color: '#555', fontFamily: 'sans-serif', fontSize: '12px', ...styles }); uiContainer.appendChild(label); }; createLabel("← Emergent", { bottom: "10px", left: "20px" }); createLabel("Architected →", { bottom: "10px", right: "20px" }); createLabel("← Protocol", { top: "50%", left: "0px", transform: "translateY(-50%) rotate(-90deg)" }); createLabel("Narrative →", { bottom: "50%", left: "0px", transform: "translateY(50%) rotate(-90deg)" }); createLabel("↑ Sovereignty", { top: "10px", right: "10px" }); const watermark = document.createElement("img"); watermark.src = "https://pbs.twimg.com/profile_images/1929488407941541888/Fh8Sh3Kw_400x400.jpg"; Object.assign(watermark.style, { position: 'absolute', bottom: '20px', right: '20px', width: '60px', height: '60px', opacity: '0.7', borderRadius: '50%' }); uiContainer.appendChild(watermark); // 6. SETUP INTERACTIVITY const controls = new OrbitControls(camera, renderer.domElement); controls.enableDamping = true; controls.target.set(0, 0.5, 0); const raycaster = new THREE.Raycaster(); const mouse = new THREE.Vector2(); const tooltip = document.createElement('div'); Object.assign(tooltip.style, { position: 'absolute', display: 'none', padding: '8px', background: 'rgba(0,0,0,0.8)', color: 'white', borderRadius: '4px', pointerEvents: 'none', fontFamily: 'sans-serif', fontSize: '12px' }); container.appendChild(tooltip); function onMouseMove(event) { const rect = renderer.domElement.getBoundingClientRect(); mouse.x = ((event.clientX - rect.left) / config.width) * 2 - 1; mouse.y = -((event.clientY - rect.top) / config.height) * 2 + 1; } renderer.domElement.addEventListener('mousemove', onMouseMove); // 7. ANIMATION LOOP renderer.setAnimationLoop(() => { controls.update(); raycaster.setFromCamera(mouse, camera); const intersects = raycaster.intersectObjects(sphereGroup.children); if (intersects.length > 0) { const d = intersects[0].object.userData; const sovMap = ["0: Virtual", "1: Para-Sovereign", "2: Legal Wrapper", "3: Territorial Enclave", "4: Sovereign Ambition"]; tooltip.style.display = 'block'; tooltip.innerHTML = `${d.entity_name}
Identity: ${d.layer2_profile.identity.primary}
Sovereignty: ${sovMap[d.layer1_coordinates.sovereignty_level]}`; tooltip.style.left = `${(mouse.x * 0.5 + 0.5) * config.width + 15}px`; tooltip.style.top = `${(-mouse.y * 0.5 + 0.5) * config.height + 15}px`; } else { tooltip.style.display = 'none'; } renderer.render(scene, camera); }); // 8. CLEANUP invalidation.then(() => { renderer.setAnimationLoop(null); renderer.domElement.removeEventListener('mousemove', onMouseMove); renderer.dispose(); }); // 9. RETURN THE FINAL ELEMENT TO DISPLAY return container; }32:[] 2f:{"title":"Three.js","cells":[{"id":242,"value":"# Three.js\n

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

","pinned":false,"hidden":false,"mode":"md"},{"id":321,"value":"// Cell 1: Data Loading\natlasData = {\n const url = \"https://raw.githubusercontent.com/raysvitla/404-embassy-atlas/refs/heads/main/epnc_atlas_v1.0_final.json\";\n const response = await fetch(url);\n if (!response.ok) throw new Error(`HTTP error! status: ${response.status}`);\n return response.json();\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":400,"value":"$31","pinned":true,"hidden":false,"mode":"ojs"}],"files":"$W32","stdlib":"1","titling":"auto"}