scene = { const { dimensionVectors, edgeColors, rectWidth, rectHeight, pleatOffset, thicknessHypercube, nodeRotationX, nodeRotationY, bgColor, sceneHeight, autoRotate, rotateSpeed, animDurationCube, tiltConeAngle, centeringMaxOffset, centeringPeakElevation, negativeLineColor, reverseCircleColor, isoclineCircleColor, hoverOutlineColor, nodeDimOpacity, edgeBaseOpacity, edgeBrightOpacity, edgeDimMultiplier, outlineThickness, edgeTubeRadius, negLineRadius, circleSegments, circleTubeRadius } = config; const tiltConeRad = (tiltConeAngle * Math.PI) / 180; // ---- Renderer ---- const renderer = new THREE.WebGLRenderer({ antialias: true }); renderer.setPixelRatio(Math.min(devicePixelRatio, 2)); renderer.domElement.style.touchAction = "none"; // ---- Container with buttons ---- const container = document.createElement("div"); container.style.position = "relative"; container.style.width = "100%"; container.style.height = sceneHeight + "px"; const btnBar = document.createElement("div"); btnBar.style.cssText = ` position:absolute; top:12px; left:50%; transform:translateX(-50%); display:flex; gap:10px; z-index:10; `; function makeBtn(label) { const b = document.createElement("button"); b.textContent = label; b.style.cssText = ` padding:8px 20px; font:600 13px/1 monospace; letter-spacing:0.04em; border:1px solid rgba(255,255,255,0.35); border-radius:4px; background:rgba(0,0,0,0.3); color:#e0e0e0; cursor:pointer; backdrop-filter:blur(6px); `; b.onmouseenter = () => { b.style.background = "rgba(0,0,0,0.5)"; }; b.onmouseleave = () => { b.style.background = "rgba(0,0,0,0.3)"; }; return b; } const btnInvert = makeBtn("Negative"); const btnReverse = makeBtn("Reverse"); const btnIsocline = makeBtn("Isocline"); btnBar.append(btnInvert, btnReverse, btnIsocline); container.appendChild(btnBar); container.appendChild(renderer.domElement); // ---- Scene & camera ---- const scene = new THREE.Scene(); { const bgGeo = new THREE.SphereGeometry(90, 32, 32); const bgMat = new THREE.ShaderMaterial({ side: THREE.BackSide, depthWrite: false, uniforms: { uTop: { value: new THREE.Color(bgColor) }, uBottom: { value: new THREE.Color(bgColor).multiplyScalar(0.93) }, }, vertexShader: ` varying vec3 vWorldPos; void main() { vWorldPos = (modelMatrix * vec4(position, 1.0)).xyz; gl_Position = projectionMatrix * viewMatrix * vec4(vWorldPos, 1.0); } `, fragmentShader: ` uniform vec3 uTop; uniform vec3 uBottom; varying vec3 vWorldPos; void main() { float t = smoothstep(-0.01, 0.01, normalize(vWorldPos).y); gl_FragColor = vec4(mix(uBottom, uTop, t), 1.0); } `, }); scene.add(new THREE.Mesh(bgGeo, bgMat)); } const camera = new THREE.PerspectiveCamera(50, 16 / 9, 0.1, 200); camera.position.set(1, 4, 7); // ---- Lights ---- const hemiLight = new THREE.HemisphereLight(0xffffff, 0x080818, 0.8); scene.add(hemiLight); const dirLight = new THREE.DirectionalLight(0xffffff, 0.5); dirLight.position.set(0, 50, 0); scene.add(dirLight); // ---- Compute node positions ---- const dimVecs = dimensionVectors.map(v => new THREE.Vector3(v[0], v[1], v[2])); const sumAll = new THREE.Vector3(); dimVecs.forEach(v => sumAll.add(v)); const centerOffset = sumAll.clone().multiplyScalar(0.5); const nodePositions = []; for (let n = 0; n < 64; n++) { const pos = new THREE.Vector3(0, 0, 0); for (let b = 0; b < 6; b++) { if ((n >> b) & 1) pos.add(dimVecs[b]); } pos.sub(centerOffset); nodePositions.push(pos); } // ---- Axis constants ---- const axisY = new THREE.Vector3(0, 1, 0); const axisX = new THREE.Vector3(1, 0, 0); const axisZ = new THREE.Vector3(0, 0, 1); // ---- Transform helpers for highlight groups ---- function reverseBits6(n) { let r = 0; for (let b = 0; b < 6; b++) r |= ((n >> b) & 1) << (5 - b); return r; } function negativeNode(n) { return n ^ 63; } function reverseNode(n) { return reverseBits6(n); } function isoclineNode(n) { return reverseBits6(n) ^ 63; } function getHighlightSet(n) { const s = new Set(); s.add(n); s.add(negativeNode(n)); s.add(reverseNode(n)); s.add(isoclineNode(n)); for (let dim = 0; dim < 6; dim++) s.add(n ^ (1 << dim)); return s; } // ---- Build hypercube group ---- const hypercubeGroup = new THREE.Group(); const nodeMeshes = []; const hitSpheres = []; for (let n = 0; n < 64; n++) { const pleated = buildNode(n, thicknessHypercube); pleated.position.copy(nodePositions[n]); hypercubeGroup.add(pleated); nodeMeshes[n] = pleated; const hitGeo = new THREE.SphereGeometry(0.18, 8, 8); const hitMat = new THREE.MeshBasicMaterial({ visible: false }); const hitMesh = new THREE.Mesh(hitGeo, hitMat); hitMesh.position.copy(nodePositions[n]); hitMesh.userData.nodeIndex = n; hypercubeGroup.add(hitMesh); hitSpheres.push(hitMesh); } for (let n = 0; n < 64; n++) { nodeMeshes[n].traverse(child => { if (child.isMesh && child.material) { child.material.polygonOffset = true; child.material.polygonOffsetFactor = -1; child.material.polygonOffsetUnits = -1; } }); } // ---- Hover outline meshes (inverted hull silhouette) ---- const outlineMat = new THREE.MeshBasicMaterial({ color: hoverOutlineColor, side: THREE.BackSide, transparent: true, opacity: 1.0, depthWrite: false, depthTest: true, }); const outlineMeshes = []; for (let n = 0; n < 64; n++) { const bits = []; for (let b = 0; b < 6; b++) bits.push((n >> b) & 1); const halfW = rectWidth / 2; const segH = rectHeight; const profile = []; let cy = 0, cz = 0; profile.push({ y: cy, z: cz }); for (let i = 0; i < 6; i++) { const dz = bits[i] === 1 ? pleatOffset : -pleatOffset; cy += segH; cz += dz; profile.push({ y: cy, z: cz }); } let centerZ = 0; for (let i = 0; i < 3; i++) { centerZ += (bits[i] === 1 ? pleatOffset : -pleatOffset); } const centerY = 3 * segH; const halfT = thicknessHypercube > 1 ? (thicknessHypercube * 0.01) / 2 : 0; const outlineInner = new THREE.Group(); const expand = outlineThickness; if (halfT < 0.0001) { const segDirs = []; const segNrms = []; for (let i = 0; i < 6; i++) { const dy = profile[i + 1].y - profile[i].y; const dz = profile[i + 1].z - profile[i].z; const len = Math.sqrt(dy * dy + dz * dz); segDirs.push({ y: dy / len, z: dz / len }); segNrms.push({ y: -dz / len, z: dy / len }); } const vertices = []; const indices = []; for (let i = 0; i < 6; i++) { const y0 = profile[i].y - centerY; const y1 = profile[i + 1].y - centerY; const z0 = profile[i].z - centerZ; const z1 = profile[i + 1].z - centerZ; const nrmY = segNrms[i].y; const nrmZ = segNrms[i].z; const capBottomY = i === 0 ? -segDirs[i].y * expand : 0; const capBottomZ = i === 0 ? -segDirs[i].z * expand : 0; const capTopY = i === 5 ? segDirs[i].y * expand : 0; const capTopZ = i === 5 ? segDirs[i].z * expand : 0; const vi = vertices.length / 3; vertices.push(-halfW - expand, y0 + nrmY * expand + capBottomY, z0 + nrmZ * expand + capBottomZ); vertices.push( halfW + expand, y0 + nrmY * expand + capBottomY, z0 + nrmZ * expand + capBottomZ); vertices.push( halfW + expand, y1 + nrmY * expand + capTopY, z1 + nrmZ * expand + capTopZ); vertices.push(-halfW - expand, y1 + nrmY * expand + capTopY, z1 + nrmZ * expand + capTopZ); indices.push(vi, vi + 1, vi + 2, vi, vi + 2, vi + 3); } for (let i = 0; i < 6; i++) { const y0 = profile[i].y - centerY; const y1 = profile[i + 1].y - centerY; const z0 = profile[i].z - centerZ; const z1 = profile[i + 1].z - centerZ; const nrmY = -segNrms[i].y; const nrmZ = -segNrms[i].z; const capBottomY = i === 0 ? -segDirs[i].y * expand : 0; const capBottomZ = i === 0 ? -segDirs[i].z * expand : 0; const capTopY = i === 5 ? segDirs[i].y * expand : 0; const capTopZ = i === 5 ? segDirs[i].z * expand : 0; const vi = vertices.length / 3; vertices.push(-halfW - expand, y0 + nrmY * expand + capBottomY, z0 + nrmZ * expand + capBottomZ); vertices.push( halfW + expand, y0 + nrmY * expand + capBottomY, z0 + nrmZ * expand + capBottomZ); vertices.push( halfW + expand, y1 + nrmY * expand + capTopY, z1 + nrmZ * expand + capTopZ); vertices.push(-halfW - expand, y1 + nrmY * expand + capTopY, z1 + nrmZ * expand + capTopZ); indices.push(vi, vi + 2, vi + 1, vi, vi + 3, vi + 2); } for (let i = 0; i < 6; i++) { const y0 = profile[i].y - centerY; const y1 = profile[i + 1].y - centerY; const z0 = profile[i].z - centerZ; const z1 = profile[i + 1].z - centerZ; const nrmYF = segNrms[i].y, nrmZF = segNrms[i].z; const nrmYB = -segNrms[i].y, nrmZB = -segNrms[i].z; const capBottomY = i === 0 ? -segDirs[i].y * expand : 0; const capBottomZ = i === 0 ? -segDirs[i].z * expand : 0; const capTopY = i === 5 ? segDirs[i].y * expand : 0; const capTopZ = i === 5 ? segDirs[i].z * expand : 0; const x = -halfW - expand; const vi = vertices.length / 3; vertices.push(x, y0 + nrmYF * expand + capBottomY, z0 + nrmZF * expand + capBottomZ); vertices.push(x, y0 + nrmYB * expand + capBottomY, z0 + nrmZB * expand + capBottomZ); vertices.push(x, y1 + nrmYB * expand + capTopY, z1 + nrmZB * expand + capTopZ); vertices.push(x, y1 + nrmYF * expand + capTopY, z1 + nrmZF * expand + capTopZ); indices.push(vi, vi + 2, vi + 1, vi, vi + 3, vi + 2); } for (let i = 0; i < 6; i++) { const y0 = profile[i].y - centerY; const y1 = profile[i + 1].y - centerY; const z0 = profile[i].z - centerZ; const z1 = profile[i + 1].z - centerZ; const nrmYF = segNrms[i].y, nrmZF = segNrms[i].z; const nrmYB = -segNrms[i].y, nrmZB = -segNrms[i].z; const capBottomY = i === 0 ? -segDirs[i].y * expand : 0; const capBottomZ = i === 0 ? -segDirs[i].z * expand : 0; const capTopY = i === 5 ? segDirs[i].y * expand : 0; const capTopZ = i === 5 ? segDirs[i].z * expand : 0; const x = halfW + expand; const vi = vertices.length / 3; vertices.push(x, y0 + nrmYF * expand + capBottomY, z0 + nrmZF * expand + capBottomZ); vertices.push(x, y0 + nrmYB * expand + capBottomY, z0 + nrmZB * expand + capBottomZ); vertices.push(x, y1 + nrmYB * expand + capTopY, z1 + nrmZB * expand + capTopZ); vertices.push(x, y1 + nrmYF * expand + capTopY, z1 + nrmZF * expand + capTopZ); indices.push(vi, vi + 1, vi + 2, vi, vi + 2, vi + 3); } const geom = new THREE.BufferGeometry(); geom.addAttribute('position', new THREE.BufferAttribute(new Float32Array(vertices), 3)); geom.setIndex(indices); geom.computeVertexNormals(); outlineInner.add(new THREE.Mesh(geom, outlineMat)); } else { const segDirs = []; for (let i = 0; i < 6; i++) { const dy = profile[i + 1].y - profile[i].y; const dz = profile[i + 1].z - profile[i].z; const len = Math.sqrt(dy * dy + dz * dz); segDirs.push({ y: dy / len, z: dz / len }); } const vertices = []; const indices = []; for (let i = 0; i < 6; i++) { const capBottomY = i === 0 ? -segDirs[i].y * expand : 0; const capBottomZ = i === 0 ? -segDirs[i].z * expand : 0; const capTopY = i === 5 ? segDirs[i].y * expand : 0; const capTopZ = i === 5 ? segDirs[i].z * expand : 0; const y0 = profile[i].y - centerY + capBottomY; const y1 = profile[i + 1].y - centerY + capTopY; const z0 = profile[i].z - centerZ + capBottomZ; const z1 = profile[i + 1].z - centerZ + capTopZ; const vi = vertices.length / 3; vertices.push(-halfW - expand, y0, z0 + halfT + expand); vertices.push( halfW + expand, y0, z0 + halfT + expand); vertices.push( halfW + expand, y1, z1 + halfT + expand); vertices.push(-halfW - expand, y1, z1 + halfT + expand); vertices.push(-halfW - expand, y0, z0 - halfT - expand); vertices.push( halfW + expand, y0, z0 - halfT - expand); vertices.push( halfW + expand, y1, z1 - halfT - expand); vertices.push(-halfW - expand, y1, z1 - halfT - expand); indices.push(vi+0, vi+1, vi+2, vi+0, vi+2, vi+3); indices.push(vi+4, vi+6, vi+5, vi+4, vi+7, vi+6); indices.push(vi+0, vi+3, vi+7, vi+0, vi+7, vi+4); indices.push(vi+1, vi+6, vi+2, vi+1, vi+5, vi+6); if (i === 5) indices.push(vi+3, vi+2, vi+6, vi+3, vi+6, vi+7); if (i === 0) indices.push(vi+0, vi+5, vi+1, vi+0, vi+4, vi+5); } const geom = new THREE.BufferGeometry(); geom.addAttribute('position', new THREE.BufferAttribute(new Float32Array(vertices), 3)); geom.setIndex(indices); geom.computeVertexNormals(); outlineInner.add(new THREE.Mesh(geom, outlineMat)); } const outlineWrapper = new THREE.Group(); outlineWrapper.add(outlineInner); outlineWrapper.rotation.y = nodeRotationY; outlineWrapper.rotation.x = nodeRotationX; outlineWrapper.position.copy(nodePositions[n]); outlineWrapper.visible = false; hypercubeGroup.add(outlineWrapper); outlineMeshes.push(outlineWrapper); } // ---- Edges ---- function buildEdgeTube(pA, pB, radius, color) { const dir = new THREE.Vector3().subVectors(pB, pA); const len = dir.length(); const geom = new THREE.CylinderGeometry(radius, radius, len, 6, 1, true); const mat = new THREE.MeshBasicMaterial({ color, transparent: true, opacity: edgeBrightOpacity, blending: THREE.AdditiveBlending, depthWrite: false, }); const mesh = new THREE.Mesh(geom, mat); mesh.position.copy(pA).add(pB).multiplyScalar(0.5); mesh.quaternion.setFromUnitVectors(new THREE.Vector3(0, 1, 0), dir.clone().normalize()); mesh.visible = false; return mesh; } const edgeLines = []; const edgeTubes = []; for (let dim = 0; dim < 6; dim++) { const mat = new THREE.LineBasicMaterial({ color: edgeColors[dim], linewidth: 1, transparent: true, opacity: edgeBaseOpacity, blending: THREE.AdditiveBlending, depthWrite: false, }); for (let n = 0; n < 64; n++) { const neighbor = n ^ (1 << dim); if (neighbor > n) { const pA = nodePositions[n].clone(); const pB = nodePositions[neighbor].clone(); const geom = new THREE.BufferGeometry().setFromPoints([pA, pB]); const line = new THREE.Line(geom, mat.clone()); line.userData.nodeA = n; line.userData.nodeB = neighbor; line.userData.dim = dim; hypercubeGroup.add(line); edgeLines.push(line); const tube = buildEdgeTube(pA, pB, edgeTubeRadius, edgeColors[dim]); tube.userData.nodeA = n; tube.userData.nodeB = neighbor; tube.userData.dim = dim; hypercubeGroup.add(tube); edgeTubes.push(tube); } } } scene.add(hypercubeGroup); // ---- Hover overlays: negative line + rotation circles ---- const overlayGroup = new THREE.Group(); overlayGroup.renderOrder = 999; hypercubeGroup.add(overlayGroup); const overlayRenderOrder = 999; const negativeLineGeo = new THREE.BufferGeometry(); negativeLineGeo.addAttribute('position', new THREE.BufferAttribute(new Float32Array(6), 3)); const negativeLine = new THREE.Line(negativeLineGeo, new THREE.LineBasicMaterial({ color: negativeLineColor, transparent: true, opacity: 0.8, depthWrite: false, depthTest: false, })); negativeLine.renderOrder = overlayRenderOrder; negativeLine.visible = false; overlayGroup.add(negativeLine); const negTubeGeo = new THREE.CylinderGeometry(negLineRadius, negLineRadius, 1, 6, 1, false); const negTubeMesh = new THREE.Mesh(negTubeGeo, new THREE.MeshBasicMaterial({ color: negativeLineColor, transparent: true, opacity: 0.6, depthWrite: false, depthTest: false, })); negTubeMesh.renderOrder = overlayRenderOrder; negTubeMesh.visible = false; overlayGroup.add(negTubeMesh); function updateNegativeLine(posA, posB) { const arr = negativeLineGeo.attributes.position.array; arr[0] = posA.x; arr[1] = posA.y; arr[2] = posA.z; arr[3] = posB.x; arr[4] = posB.y; arr[5] = posB.z; negativeLineGeo.attributes.position.needsUpdate = true; const dir = new THREE.Vector3().subVectors(posB, posA); const len = dir.length(); negTubeMesh.scale.set(1, len, 1); negTubeMesh.position.copy(posA).add(posB).multiplyScalar(0.5); negTubeMesh.quaternion.setFromUnitVectors(new THREE.Vector3(0, 1, 0), dir.normalize()); } // ---- Rotation orbit circles ---- function makeOrbitCircle(color) { const geom = new THREE.BufferGeometry(); geom.addAttribute('position', new THREE.BufferAttribute(new Float32Array((circleSegments + 1) * 3), 3)); const line = new THREE.LineLoop(geom, new THREE.LineBasicMaterial({ color, transparent: true, opacity: 0.7, depthWrite: false, depthTest: false, })); line.renderOrder = overlayRenderOrder; line.visible = false; overlayGroup.add(line); const tubeMat = new THREE.MeshBasicMaterial({ color, transparent: true, opacity: 0.45, depthWrite: false, depthTest: false, }); return { line, tubeMesh: null, tubeMat }; } function setOrbitCircle(circleObj, point, axis) { const center = axis.clone().multiplyScalar(point.dot(axis)); const radiusVec = new THREE.Vector3().subVectors(point, center); if (radiusVec.length() < 1e-5) { circleObj.line.visible = false; if (circleObj.tubeMesh) circleObj.tubeMesh.visible = false; return; } const posArr = circleObj.line.geometry.attributes.position.array; const curvePoints = []; for (let i = 0; i <= circleSegments; i++) { const angle = (i / circleSegments) * Math.PI * 2; const p = radiusVec.clone().applyQuaternion(new THREE.Quaternion().setFromAxisAngle(axis, angle)).add(center); posArr[i * 3] = p.x; posArr[i * 3 + 1] = p.y; posArr[i * 3 + 2] = p.z; curvePoints.push(p.clone()); } circleObj.line.geometry.attributes.position.needsUpdate = true; circleObj.line.visible = true; if (circleObj.tubeMesh) { overlayGroup.remove(circleObj.tubeMesh); circleObj.tubeMesh.geometry.dispose(); } const tubeGeo = new THREE.TubeGeometry(new THREE.CatmullRomCurve3(curvePoints, true), circleSegments, circleTubeRadius, 4, true); const tubeMesh = new THREE.Mesh(tubeGeo, circleObj.tubeMat); tubeMesh.renderOrder = overlayRenderOrder; tubeMesh.visible = true; overlayGroup.add(tubeMesh); circleObj.tubeMesh = tubeMesh; } function hideOrbitCircle(circleObj) { circleObj.line.visible = false; if (circleObj.tubeMesh) circleObj.tubeMesh.visible = false; } const reverseCircle = makeOrbitCircle(reverseCircleColor); const isoclineCircle = makeOrbitCircle(isoclineCircleColor); // ---- Unified overlay update ---- let currentOutlineIdx = -1; function updateOverlays(hoveredIdx) { if (currentOutlineIdx >= 0) outlineMeshes[currentOutlineIdx].visible = false; if (hoveredIdx >= 0) outlineMeshes[hoveredIdx].visible = true; currentOutlineIdx = hoveredIdx; if (hoveredIdx < 0) { negativeLine.visible = false; negTubeMesh.visible = false; hideOrbitCircle(reverseCircle); hideOrbitCircle(isoclineCircle); return; } const posH = nodePositions[hoveredIdx]; const negIdx = negativeNode(hoveredIdx); if (negIdx !== hoveredIdx) { updateNegativeLine(posH, nodePositions[negIdx]); negativeLine.visible = true; negTubeMesh.visible = true; } else { negativeLine.visible = false; negTubeMesh.visible = false; } const revIdx = reverseNode(hoveredIdx); if (revIdx !== hoveredIdx) setOrbitCircle(reverseCircle, posH, axisX); else hideOrbitCircle(reverseCircle); const isoIdx = isoclineNode(hoveredIdx); if (isoIdx !== hoveredIdx) setOrbitCircle(isoclineCircle, posH, axisZ); else hideOrbitCircle(isoclineCircle); } // ---- Highlight state ---- let highlightedSet = null; let hoveredNodeIndex = -1; let lockedHighlight = null; const nodeMaterialsCache = []; for (let n = 0; n < 64; n++) { const mats = []; nodeMeshes[n].traverse(child => { if (child.isMesh && child.material && child.material.visible !== false) mats.push(child.material); }); nodeMaterialsCache[n] = mats; } for (let n = 0; n < 64; n++) { for (const mat of nodeMaterialsCache[n]) { mat.transparent = true; mat.opacity = 1.0; mat.depthWrite = true; } } // ---- Opacity animation state ---- let unselectedOpacity = 1.0; let lastActiveSet = null; function applyHighlight(activeSet) { if (activeSet === null) { for (const tube of edgeTubes) tube.visible = false; } else { for (const tube of edgeTubes) tube.visible = activeSet.has(tube.userData.nodeA) && activeSet.has(tube.userData.nodeB); } } // ---- Raycaster ---- const raycaster = new THREE.Raycaster(); const mouse = new THREE.Vector2(); function updateMouseFromEvent(e) { const rect = renderer.domElement.getBoundingClientRect(); mouse.x = ((e.clientX - rect.left) / rect.width) * 2 - 1; mouse.y = -((e.clientY - rect.top) / rect.height) * 2 + 1; } function raycastNode() { raycaster.setFromCamera(mouse, camera); const hits = raycaster.intersectObjects(hitSpheres); return hits.length > 0 ? hits[0].object.userData.nodeIndex : -1; } // ---- Orbit controls ---- let isDragging = false; let prevMouse = { x: 0, y: 0 }; let spherical = { theta: Math.atan2(camera.position.x, camera.position.z), phi: Math.acos(camera.position.y / camera.position.length()), r: camera.position.length() }; function computeCenteringOffset(phi) { const elevation = (Math.PI / 2) - phi; const remapped = Math.max(-Math.PI / 2, Math.min(Math.PI / 2, elevation * (Math.PI / 2) / centeringPeakElevation)); return -Math.sin(remapped) * centeringMaxOffset; } const lookAtTarget = new THREE.Vector3(0, 0, 0); function updateCamera() { camera.position.x = spherical.r * Math.sin(spherical.phi) * Math.sin(spherical.theta); camera.position.y = spherical.r * Math.cos(spherical.phi); camera.position.z = spherical.r * Math.sin(spherical.phi) * Math.cos(spherical.theta); lookAtTarget.set(0, computeCenteringOffset(spherical.phi), 0); camera.lookAt(lookAtTarget); } updateCamera(); // ---- Button bar hover suppression ---- let mouseOverButtons = false; btnBar.addEventListener("pointerenter", () => { mouseOverButtons = true; clearHighlight(true); }); btnBar.addEventListener("pointerleave", () => { mouseOverButtons = false; }); function clearHighlight(instant) { hoveredNodeIndex = -1; highlightedSet = null; applyHighlight(null); updateOverlays(-1); if (instant) { lastActiveSet = null; for (let n = 0; n < 64; n++) for (const mat of nodeMaterialsCache[n]) { mat.opacity = 1.0; mat.depthWrite = true; } for (let i = 0; i < edgeLines.length; i++) edgeLines[i].material.opacity = edgeBaseOpacity; } } function highlightSuppressed() { return mouseOverButtons || activeAnimations.length > 0; } // ---- Pointer events ---- renderer.domElement.addEventListener("pointerdown", e => { e.preventDefault(); renderer.domElement.setPointerCapture(e.pointerId); isDragging = true; prevMouse = { x: e.clientX, y: e.clientY }; lockedHighlight = highlightedSet ? new Set(highlightedSet) : new Set(); }); renderer.domElement.addEventListener("pointerup", e => { renderer.domElement.releasePointerCapture(e.pointerId); isDragging = false; lockedHighlight = null; if (highlightSuppressed()) { clearHighlight(true); return; } const idx = raycastNode(); hoveredNodeIndex = idx; highlightedSet = idx >= 0 ? getHighlightSet(idx) : null; applyHighlight(highlightedSet); updateOverlays(hoveredNodeIndex); }); renderer.domElement.addEventListener("pointercancel", e => { renderer.domElement.releasePointerCapture(e.pointerId); isDragging = false; lockedHighlight = null; }); renderer.domElement.addEventListener("pointermove", e => { updateMouseFromEvent(e); if (isDragging) { spherical.theta -= (e.clientX - prevMouse.x) * 0.005; spherical.phi = Math.max(0.1, Math.min(Math.PI - 0.1, spherical.phi - (e.clientY - prevMouse.y) * 0.005)); prevMouse = { x: e.clientX, y: e.clientY }; updateCamera(); if (lockedHighlight !== null) applyHighlight(lockedHighlight.size > 0 ? lockedHighlight : null); } else if (highlightSuppressed()) { if (hoveredNodeIndex >= 0) clearHighlight(true); } else { const idx = raycastNode(); if (idx !== hoveredNodeIndex) { hoveredNodeIndex = idx; highlightedSet = idx >= 0 ? getHighlightSet(idx) : null; applyHighlight(highlightedSet); updateOverlays(hoveredNodeIndex); } } }); renderer.domElement.addEventListener("wheel", e => { e.preventDefault(); spherical.r = Math.max(3, Math.min(40, spherical.r + e.deltaY * 0.01)); updateCamera(); }, { passive: false }); // ---- Pinch-to-zoom ---- let pinchStartDist = 0, pinchStartR = 0, isPinching = false; renderer.domElement.addEventListener("touchstart", e => { if (e.touches.length === 2) { e.preventDefault(); isPinching = true; isDragging = false; const dx = e.touches[0].clientX - e.touches[1].clientX; const dy = e.touches[0].clientY - e.touches[1].clientY; pinchStartDist = Math.sqrt(dx * dx + dy * dy); pinchStartR = spherical.r; } }, { passive: false }); renderer.domElement.addEventListener("touchmove", e => { if (e.touches.length === 2 && isPinching) { e.preventDefault(); const dx = e.touches[0].clientX - e.touches[1].clientX; const dy = e.touches[0].clientY - e.touches[1].clientY; const dist = Math.sqrt(dx * dx + dy * dy); if (pinchStartDist > 0) { spherical.r = Math.max(3, Math.min(40, pinchStartR * (pinchStartDist / dist))); updateCamera(); } } }, { passive: false }); renderer.domElement.addEventListener("touchend", e => { if (e.touches.length < 2) isPinching = false; }, { passive: true }); // ---- Rotation animations ---- function easeInOutCubic(t) { return t < 0.5 ? 4 * t * t * t : 1 - Math.pow(-2 * t + 2, 3) / 2; } const activeAnimations = []; const baseQuaternion = new THREE.Quaternion(); function startRotation(axis) { activeAnimations.push({ axis: axis.clone(), elapsed: 0, duration: animDurationCube }); clearHighlight(true); } btnInvert.addEventListener("click", () => startRotation(axisY)); btnReverse.addEventListener("click", () => startRotation(axisX)); btnIsocline.addEventListener("click", () => startRotation(axisZ)); // ---- Central tilt helpers ---- const invGroupMat = new THREE.Matrix4(); const camLocal = new THREE.Vector3(); const origin = new THREE.Vector3(0, 0, 0); const toCamera = new THREE.Vector3(); function computeTiltX(nodePos) { toCamera.copy(camLocal).sub(nodePos); const len = toCamera.length(); if (len < 1e-6) return 0; toCamera.divideScalar(len); const dotY = toCamera.y; const angleFromNormal3D = Math.acos(Math.min(1, Math.abs(dotY))); const envelope = angleFromNormal3D <= tiltConeRad ? smoothstep(0, tiltConeRad, angleFromNormal3D) : smoothstep(Math.PI / 2, tiltConeRad, angleFromNormal3D); const yz = Math.sqrt(toCamera.y * toCamera.y + toCamera.z * toCamera.z); if (yz < 1e-6) return 0; const tiltMagnitude = Math.atan2(Math.abs(toCamera.z), Math.abs(toCamera.y)) * envelope; return (toCamera.z >= 0 ? -1 : 1) * (dotY >= 0 ? 1 : -1) * tiltMagnitude; } function smoothstep(edge0, edge1, x) { const t = Math.max(0, Math.min(1, (x - edge0) / (edge1 - edge0))); return t * t * (3 - 2 * t); } // ---- Animation loop ---- let lastTime = performance.now(); let disposed = false; function animate(now) { if (disposed) return; requestAnimationFrame(animate); const dt = (now - lastTime) / 1000; lastTime = now; if (autoRotate) { spherical.theta += rotateSpeed * dt; updateCamera(); } if (activeAnimations.length > 0) { for (let i = activeAnimations.length - 1; i >= 0; i--) { const anim = activeAnimations[i]; anim.elapsed += dt; if (anim.elapsed >= anim.duration) { baseQuaternion.premultiply(new THREE.Quaternion().setFromAxisAngle(anim.axis, Math.PI)); activeAnimations.splice(i, 1); } } const result = baseQuaternion.clone(); for (const anim of activeAnimations) { result.premultiply(new THREE.Quaternion().setFromAxisAngle(anim.axis, Math.PI * easeInOutCubic(Math.min(anim.elapsed / anim.duration, 1)))); } hypercubeGroup.quaternion.copy(result); } hypercubeGroup.updateMatrixWorld(); invGroupMat.getInverse(hypercubeGroup.matrixWorld); camLocal.copy(camera.position).applyMatrix4(invGroupMat); const centralTiltX = computeTiltX(origin); for (let n = 0; n < 64; n++) { nodeMeshes[n].rotation.set(centralTiltX, 0, 0); outlineMeshes[n].rotation.set(centralTiltX, 0, 0); } { const groupXAxis = new THREE.Vector3(1, 0, 0).applyQuaternion(hypercubeGroup.quaternion).normalize(); const lightQuat = new THREE.Quaternion().setFromAxisAngle(groupXAxis, centralTiltX); dirLight.position.copy(new THREE.Vector3(0, 50, 0).applyQuaternion(lightQuat)); hemiLight.position.copy(new THREE.Vector3(0, 1, 0).applyQuaternion(lightQuat)); } { const activeSet = lockedHighlight !== null ? (lockedHighlight.size > 0 ? lockedHighlight : null) : highlightedSet; if (activeSet !== null) lastActiveSet = activeSet; else if (unselectedOpacity >= 1) lastActiveSet = null; if (activeSet !== null) unselectedOpacity = Math.max(0, unselectedOpacity - 0.01); else unselectedOpacity = Math.min(1, unselectedOpacity + 0.01); const easedDim = easeInOutCubic(unselectedOpacity); const dimOpacity = nodeDimOpacity + easedDim * (1.0 - nodeDimOpacity); const dimEdge = edgeBaseOpacity * edgeDimMultiplier + easedDim * edgeBaseOpacity * (1.0 - edgeDimMultiplier); for (let n = 0; n < 64; n++) { const op = (lastActiveSet !== null && lastActiveSet.has(n)) ? 1.0 : dimOpacity; for (const mat of nodeMaterialsCache[n]) mat.opacity = op; } for (let i = 0; i < edgeLines.length; i++) { const line = edgeLines[i]; edgeLines[i].material.opacity = (lastActiveSet !== null && lastActiveSet.has(line.userData.nodeA) && lastActiveSet.has(line.userData.nodeB)) ? edgeBaseOpacity : dimEdge; } } renderer.render(scene, camera); } animate(performance.now()); // ---- Responsive resize ---- const ro = new ResizeObserver(entries => { const w = entries[0].contentRect.width; if (w > 0) { renderer.setSize(w, sceneHeight); camera.aspect = w / sceneHeight; camera.updateProjectionMatrix(); } }); ro.observe(container); invalidation.then(() => { disposed = true; ro.disconnect(); renderer.dispose(); }); return container; }