chart = { fonts; // Text rendering offset for perfect centering const textOffsetY = 3; const maxWidth = 800; let width = Math.min(window.innerWidth, maxWidth); // Crop ratio: how much of the top to cut off (0.15 = remove top 15% of the full view) const topCrop = 0.10; let fullHeight = width; // the virtual full render height (square) let height = Math.round(fullHeight * (1 - topCrop)); // the visible canvas height const container = DOM.element('div'); container.style.width = width + 'px'; container.style.height = height + 'px'; // Scene setup const scene = new THREE.Scene(); scene.background = new THREE.Color(0xffffff); // Fog near/far will be updated dynamically relative to camera distance const cubeHalfDiag = Math.sqrt(3) * 18; // half-diagonal of the 36x36x36 codon cube const fogPadding = 15; // extra padding beyond the cube edges scene.fog = new THREE.Fog(0xffffff, 50, 175); const camera = new THREE.PerspectiveCamera(45, width / fullHeight, 1, 1000); camera.setViewOffset(width, fullHeight, 0, Math.round(fullHeight * topCrop), width, height); camera.position.set(30, 40, 85); camera.lookAt(0, 0, 0); const renderer = new THREE.WebGLRenderer({ antialias: true }); renderer.setPixelRatio(window.devicePixelRatio); renderer.setSize(width, height); container.appendChild(renderer.domElement); const controls = new THREE.OrbitControls(camera, renderer.domElement); controls.enableZoom = true; controls.enablePan = false; controls.enableRotate = true; controls.enableDamping = true; controls.dampingFactor = 0.2; controls.rotateSpeed = 0.15; controls.zoomSpeed = 2; controls.minDistance = 40; controls.maxDistance = 150; controls.autoRotate = true; controls.autoRotateSpeed = .05; // Resize handling function handleResize(newWidth) { newWidth = Math.min(newWidth, maxWidth); if (newWidth !== width) { width = newWidth; fullHeight = width; height = Math.round(fullHeight * (1 - topCrop)); container.style.width = width + 'px'; container.style.height = height + 'px'; renderer.setSize(width, height); camera.aspect = width / fullHeight; camera.setViewOffset(width, fullHeight, 0, Math.round(fullHeight * topCrop), width, height); camera.updateProjectionMatrix(); } } const resizeObserver = new ResizeObserver(() => { const newWidth = container.parentElement ? container.parentElement.clientWidth : window.innerWidth; handleResize(newWidth); }); resizeObserver.observe(container); // Also listen for window resize as a fallback const onWindowResize = () => { const newWidth = container.parentElement ? container.parentElement.clientWidth : window.innerWidth; handleResize(newWidth); }; window.addEventListener('resize', onWindowResize); // Clean up on invalidation (Observable pattern) invalidation.then(() => { resizeObserver.disconnect(); window.removeEventListener('resize', onWindowResize); renderer.dispose(); }); // Differentiate trackpad from mouse wheel and adjust zoom let lastWheelTime = 0; renderer.domElement.addEventListener('wheel', (event) => { const now = Date.now(); const timeDelta = now - lastWheelTime; lastWheelTime = now; // Trackpad events typically have smaller deltaY and come in rapid succession // Mouse wheel events have larger deltaY and more time between events const isTrackpad = Math.abs(event.deltaY) < 50 && timeDelta < 50; if (isTrackpad) { controls.zoomSpeed = 1; // Half the zoom speed for trackpad } else { controls.zoomSpeed = 2; // Full zoom speed for mouse wheel } }, { passive: false }); // Lighting const ambientLight = new THREE.AmbientLight(0xffffff, 0.8); scene.add(ambientLight); const directionalLight = new THREE.DirectionalLight(0xffffff, 0.6); directionalLight.position.set(10, 10, 10); scene.add(directionalLight); const directionalLight2 = new THREE.DirectionalLight(0xffffff, 0.4); directionalLight2.position.set(-10, -10, -10); scene.add(directionalLight2); // Helper functions for textures function createCodonTexture(codon, color, highlightMask = [false, false, false]) { const canvas = document.createElement('canvas'); const boxSize = 70; canvas.width = boxSize * 3; canvas.height = boxSize; const ctx = canvas.getContext('2d'); const allHighlighted = highlightMask[0] && highlightMask[1] && highlightMask[2]; if (allHighlighted) { ctx.fillStyle = '#000000'; } else { ctx.fillStyle = `#${color.toString(16).padStart(6, '0')}`; } ctx.fillRect(0, 0, canvas.width, canvas.height); ctx.font = '600 52px "Atkinson Hyperlegible Mono", sans-serif'; ctx.textAlign = 'center'; ctx.textBaseline = 'middle'; const letterSpacing = boxSize; const startX = boxSize / 2; for (let i = 0; i < 3; i++) { if (highlightMask[i] && !allHighlighted) { ctx.fillStyle = '#000000'; ctx.fillRect(i * boxSize, 0, boxSize, boxSize); } ctx.strokeStyle = '#ffffff'; ctx.lineWidth = 2; ctx.strokeText(codon[i], startX + i * letterSpacing, canvas.height / 2 + textOffsetY); ctx.fillStyle = '#ffffff'; ctx.fillText(codon[i], startX + i * letterSpacing, canvas.height / 2 + textOffsetY); } return new THREE.CanvasTexture(canvas); } function createLabelTexture(text, color) { const canvas = document.createElement('canvas'); canvas.width = 420; canvas.height = 140; const ctx = canvas.getContext('2d'); ctx.fillStyle = '#ffffff'; ctx.fillRect(0, 0, canvas.width, canvas.height); ctx.fillStyle = `#${color.toString(16).padStart(6, '0')}`; ctx.font = '800 52px "Atkinson Hyperlegible Mono", sans-serif'; ctx.textAlign = 'center'; ctx.textBaseline = 'middle'; ctx.fillText(text, canvas.width / 2, canvas.height / 2 + textOffsetY); return new THREE.CanvasTexture(canvas); } function createAxisLabelTexture(text, highlighted = false) { const canvas = document.createElement('canvas'); const boxSize = 70; canvas.width = boxSize * 3; canvas.height = boxSize; const ctx = canvas.getContext('2d'); if (highlighted) { ctx.fillStyle = '#000000'; ctx.fillRect(0, 0, canvas.width, canvas.height); } if (highlighted) { ctx.fillStyle = '#ffffff'; } else { ctx.fillStyle = '#000000'; } ctx.font = '600 52px "Atkinson Hyperlegible Mono", sans-serif'; ctx.textAlign = 'center'; ctx.textBaseline = 'middle'; ctx.fillText(text, canvas.width / 2, canvas.height / 2 + textOffsetY); return new THREE.CanvasTexture(canvas); } // Texture cache const textureCache = new Map(); function getCachedTexture(codon, color, highlightMask) { const key = `${codon}-${highlightMask.join('')}`; if (!textureCache.has(key)) { textureCache.set(key, createCodonTexture(codon, color, highlightMask)); } return textureCache.get(key); } // Create codon data const codonData = []; const codonMeshes = []; const axisLabelMeshes = []; for (let i = 0; i < 4; i++) { for (let j = 0; j < 4; j++) { for (let k = 0; k < 4; k++) { const codon = config.bases[i] + config.bases[j] + config.bases[k]; const info = config.geneticCode[codon]; const position = new THREE.Vector3( (i - 1.5) * config.spacing, (j - 1.5) * config.spacing, (k - 1.5) * config.spacing ); const texture = createCodonTexture(codon, info.color); const material = new THREE.MeshBasicMaterial({ map: texture, side: THREE.DoubleSide, transparent: true }); const geometry = new THREE.PlaneGeometry(config.plateWidth, config.plateHeight); const mesh = new THREE.Mesh(geometry, material); mesh.position.copy(position); const data = { codon: codon, position: position, baseIndices: [i, j, k], color: info.color, aa: info.aa, mesh: mesh, originalTexture: texture }; codonData.push(data); codonMeshes.push(mesh); scene.add(mesh); } } } const transparentMeshes = []; const aaConnections = {}; const aaLines = []; // Track all connection lines with their amino acid // Create connections between codons of same amino acid for (let i = 0; i < codonData.length; i++) { for (let j = i + 1; j < codonData.length; j++) { const d1 = codonData[i]; const d2 = codonData[j]; if (d1.aa === d2.aa) { const diff = [ Math.abs(d1.baseIndices[0] - d2.baseIndices[0]), Math.abs(d1.baseIndices[1] - d2.baseIndices[1]), Math.abs(d1.baseIndices[2] - d2.baseIndices[2]) ]; const diffSum = diff[0] + diff[1] + diff[2]; if (diffSum === 1) { const points = [d1.position, d2.position]; const geometry = new THREE.BufferGeometry().setFromPoints(points); const lineMaterial = new THREE.LineBasicMaterial({ color: d1.color, linewidth: 1 }); const line = new THREE.Line(geometry, lineMaterial); line.userData.aminoAcid = d1.aa; // Store amino acid reference scene.add(line); aaLines.push(line); if (!aaConnections[d1.aa]) { aaConnections[d1.aa] = []; } aaConnections[d1.aa].push({ start: d1.position, end: d2.position }); } } } } // Marching cubes function function vertexInterp(isolevel, p1, p2, valp1, valp2) { if (Math.abs(isolevel - valp1) < 0.00001) return p1.clone(); if (Math.abs(isolevel - valp2) < 0.00001) return p2.clone(); if (Math.abs(valp1 - valp2) < 0.00001) return p1.clone(); const mu = (isolevel - valp1) / (valp2 - valp1); return new THREE.Vector3( p1.x + mu * (p2.x - p1.x), p1.y + mu * (p2.y - p1.y), p1.z + mu * (p2.z - p1.z) ); } function marchingCubes(codonPositions, color, connections, gridSize = 1.0, threshold = 2.8) { const bounds = { min: new THREE.Vector3(Infinity, Infinity, Infinity), max: new THREE.Vector3(-Infinity, -Infinity, -Infinity) }; codonPositions.forEach(pos => { bounds.min.x = Math.min(bounds.min.x, pos.x); bounds.min.y = Math.min(bounds.min.y, pos.y); bounds.min.z = Math.min(bounds.min.z, pos.z); bounds.max.x = Math.max(bounds.max.x, pos.x); bounds.max.y = Math.max(bounds.max.y, pos.y); bounds.max.z = Math.max(bounds.max.z, pos.z); }); const expansion = 8; bounds.min.subScalar(expansion); bounds.max.addScalar(expansion); function distanceToLineSegment(point, start, end) { const line = new THREE.Vector3().subVectors(end, start); const len = line.length(); if (len === 0) return point.distanceTo(start); const t = Math.max(0, Math.min(1, new THREE.Vector3().subVectors(point, start).dot(line) / (len * len) )); const projection = new THREE.Vector3().copy(start).add( line.multiplyScalar(t) ); return point.distanceTo(projection); } const vertices = []; const faces = []; for (let x = bounds.min.x; x < bounds.max.x; x += gridSize) { for (let y = bounds.min.y; y < bounds.max.y; y += gridSize) { for (let z = bounds.min.z; z < bounds.max.z; z += gridSize) { const cubeCorners = [ new THREE.Vector3(x, y, z), new THREE.Vector3(x + gridSize, y, z), new THREE.Vector3(x + gridSize, y, z + gridSize), new THREE.Vector3(x, y, z + gridSize), new THREE.Vector3(x, y + gridSize, z), new THREE.Vector3(x + gridSize, y + gridSize, z), new THREE.Vector3(x + gridSize, y + gridSize, z + gridSize), new THREE.Vector3(x, y + gridSize, z + gridSize) ]; const values = cubeCorners.map(corner => { let minDist = Infinity; codonPositions.forEach(pos => { const dist = corner.distanceTo(pos); minDist = Math.min(minDist, dist); }); connections.forEach(conn => { const dist = distanceToLineSegment(corner, conn.start, conn.end); minDist = Math.min(minDist, dist); }); return minDist; }); let cubeIndex = 0; for (let i = 0; i < 8; i++) { if (values[i] < threshold) cubeIndex |= (1 << i); } if (marchingCubesData.edgeTable[cubeIndex] === 0) continue; const vertList = []; if (marchingCubesData.edgeTable[cubeIndex] & 1) vertList[0] = vertexInterp(threshold, cubeCorners[0], cubeCorners[1], values[0], values[1]); if (marchingCubesData.edgeTable[cubeIndex] & 2) vertList[1] = vertexInterp(threshold, cubeCorners[1], cubeCorners[2], values[1], values[2]); if (marchingCubesData.edgeTable[cubeIndex] & 4) vertList[2] = vertexInterp(threshold, cubeCorners[2], cubeCorners[3], values[2], values[3]); if (marchingCubesData.edgeTable[cubeIndex] & 8) vertList[3] = vertexInterp(threshold, cubeCorners[3], cubeCorners[0], values[3], values[0]); if (marchingCubesData.edgeTable[cubeIndex] & 16) vertList[4] = vertexInterp(threshold, cubeCorners[4], cubeCorners[5], values[4], values[5]); if (marchingCubesData.edgeTable[cubeIndex] & 32) vertList[5] = vertexInterp(threshold, cubeCorners[5], cubeCorners[6], values[5], values[6]); if (marchingCubesData.edgeTable[cubeIndex] & 64) vertList[6] = vertexInterp(threshold, cubeCorners[6], cubeCorners[7], values[6], values[7]); if (marchingCubesData.edgeTable[cubeIndex] & 128) vertList[7] = vertexInterp(threshold, cubeCorners[7], cubeCorners[4], values[7], values[4]); if (marchingCubesData.edgeTable[cubeIndex] & 256) vertList[8] = vertexInterp(threshold, cubeCorners[0], cubeCorners[4], values[0], values[4]); if (marchingCubesData.edgeTable[cubeIndex] & 512) vertList[9] = vertexInterp(threshold, cubeCorners[1], cubeCorners[5], values[1], values[5]); if (marchingCubesData.edgeTable[cubeIndex] & 1024) vertList[10] = vertexInterp(threshold, cubeCorners[2], cubeCorners[6], values[2], values[6]); if (marchingCubesData.edgeTable[cubeIndex] & 2048) vertList[11] = vertexInterp(threshold, cubeCorners[3], cubeCorners[7], values[3], values[7]); for (let i = 0; marchingCubesData.triTable[cubeIndex][i] !== undefined; i += 3) { const baseIndex = vertices.length / 3; vertices.push( vertList[marchingCubesData.triTable[cubeIndex][i]].x, vertList[marchingCubesData.triTable[cubeIndex][i]].y, vertList[marchingCubesData.triTable[cubeIndex][i]].z, vertList[marchingCubesData.triTable[cubeIndex][i + 1]].x, vertList[marchingCubesData.triTable[cubeIndex][i + 1]].y, vertList[marchingCubesData.triTable[cubeIndex][i + 1]].z, vertList[marchingCubesData.triTable[cubeIndex][i + 2]].x, vertList[marchingCubesData.triTable[cubeIndex][i + 2]].y, vertList[marchingCubesData.triTable[cubeIndex][i + 2]].z ); faces.push(baseIndex, baseIndex + 1, baseIndex + 2); } } } } if (vertices.length === 0) return null; const geometry = new THREE.BufferGeometry(); geometry.addAttribute('position', new THREE.BufferAttribute(new Float32Array(vertices), 3)); geometry.setIndex(faces); geometry.computeVertexNormals(); const material = new THREE.MeshPhongMaterial({ color: color, transparent: true, opacity: 0.08, side: THREE.DoubleSide, depthWrite: false, shininess: 30 }); return new THREE.Mesh(geometry, material); } // Create amino acid shells const aminoAcids = {}; codonData.forEach(d => { if (!aminoAcids[d.aa]) { aminoAcids[d.aa] = { positions: [], color: d.color }; } aminoAcids[d.aa].positions.push(d.position); }); Object.keys(aminoAcids).forEach(aa => { const data = aminoAcids[aa]; const connections = aaConnections[aa] || []; const mesh = marchingCubes(data.positions, data.color, connections); if (mesh) { mesh.userData.aminoAcid = aa; // Store amino acid reference transparentMeshes.push(mesh); scene.add(mesh); } }); // Create amino acid labels const labelMeshes = []; Object.keys(aminoAcids).forEach(aa => { const data = aminoAcids[aa]; const avgPos = new THREE.Vector3(); data.positions.forEach(p => avgPos.add(p)); avgPos.divideScalar(data.positions.length); avgPos.y += config.plateHeight + config.labelHeight / 2; const texture = createLabelTexture(config.aaFullNames[aa] || aa, data.color); const material = new THREE.MeshBasicMaterial({ map: texture, side: THREE.DoubleSide, transparent: true, blending: THREE.MultiplyBlending, depthWrite: false }); const geometry = new THREE.PlaneGeometry(8.4, config.labelHeight); const mesh = new THREE.Mesh(geometry, material); mesh.position.copy(avgPos); mesh.userData.aminoAcid = aa; // Store amino acid reference labelMeshes.push(mesh); scene.add(mesh); }); // Create axis groups const xAxisGroups = []; const yAxisGroups = []; const zAxisGroups = []; const xAxisEdges = [ { y: -18, z: -18, id: 0 }, { y: -18, z: 18, id: 1 }, { y: 18, z: -18, id: 2 }, { y: 18, z: 18, id: 3 } ]; const yAxisEdges = [ { x: -18, z: -18, id: 0 }, { x: -18, z: 18, id: 1 }, { x: 18, z: -18, id: 2 }, { x: 18, z: 18, id: 3 } ]; const zAxisEdges = [ { x: -18, y: -18, id: 0 }, { x: -18, y: 18, id: 1 }, { x: 18, y: -18, id: 2 }, { x: 18, y: 18, id: 3 } ]; // Create X axis groups xAxisEdges.forEach(edge => { const group = new THREE.Group(); group.userData.edgeId = edge.id; group.userData.opacity = 0; const offsetY = edge.y < 0 ? -3 : 3; const offsetZ = edge.z < 0 ? -3 : 3; const lineY = edge.y + offsetY; const lineZ = edge.z + offsetZ; const xAxisGeometry = new THREE.BufferGeometry().setFromPoints([ new THREE.Vector3(-18, lineY, lineZ), new THREE.Vector3(18, lineY, lineZ) ]); const xAxisLine = new THREE.Line(xAxisGeometry, new THREE.LineBasicMaterial({ color: config.axisLineColor, transparent: true, opacity: 0 })); group.add(xAxisLine); const labelOffsetY = edge.y < 0 ? -2 : 2; const labelOffsetZ = edge.z < 0 ? -2 : 2; const labelY = lineY + labelOffsetY; const labelZ = lineZ + labelOffsetZ; for (let i = 0; i < 4; i++) { const xPos = (i - 1.5) * config.spacing; const label = config.bases[i] + ' _ _'; const texture = createAxisLabelTexture(label); const highlightedTexture = createAxisLabelTexture(label, true); const material = new THREE.MeshBasicMaterial({ map: texture, side: THREE.DoubleSide, transparent: true, opacity: 0, depthWrite: false }); const mesh = new THREE.Mesh(new THREE.PlaneGeometry(config.plateWidth, config.plateHeight), material); mesh.position.set(xPos, labelY, labelZ); mesh.userData.base = config.bases[i]; mesh.userData.position = 0; mesh.userData.normalTexture = texture; mesh.userData.highlightedTexture = highlightedTexture; axisLabelMeshes.push(mesh); group.add(mesh); } xAxisGroups.push(group); scene.add(group); }); // Create Y axis groups yAxisEdges.forEach(edge => { const group = new THREE.Group(); group.userData.edgeId = edge.id; group.userData.opacity = 0; const offsetX = edge.x < 0 ? -3 : 3; const offsetZ = edge.z < 0 ? -3 : 3; const lineX = edge.x + offsetX; const lineZ = edge.z + offsetZ; const yAxisGeometry = new THREE.BufferGeometry().setFromPoints([ new THREE.Vector3(lineX, -18, lineZ), new THREE.Vector3(lineX, 18, lineZ) ]); const yAxisLine = new THREE.Line(yAxisGeometry, new THREE.LineBasicMaterial({ color: config.axisLineColor, transparent: true, opacity: 0 })); group.add(yAxisLine); const labelOffsetX = edge.x < 0 ? -2 : 2; const labelOffsetZ = edge.z < 0 ? -2 : 2; const labelX = lineX + labelOffsetX; const labelZ = lineZ + labelOffsetZ; for (let j = 0; j < 4; j++) { const yPos = (j - 1.5) * config.spacing; const label = '_ ' + config.bases[j] + ' _'; const texture = createAxisLabelTexture(label); const highlightedTexture = createAxisLabelTexture(label, true); const material = new THREE.MeshBasicMaterial({ map: texture, side: THREE.DoubleSide, transparent: true, opacity: 0, depthWrite: false }); const mesh = new THREE.Mesh(new THREE.PlaneGeometry(config.plateWidth, config.plateHeight), material); mesh.position.set(labelX, yPos, labelZ); mesh.userData.base = config.bases[j]; mesh.userData.position = 1; mesh.userData.normalTexture = texture; mesh.userData.highlightedTexture = highlightedTexture; axisLabelMeshes.push(mesh); group.add(mesh); } yAxisGroups.push(group); scene.add(group); }); // Create Z axis groups zAxisEdges.forEach(edge => { const group = new THREE.Group(); group.userData.edgeId = edge.id; group.userData.opacity = 0; const offsetX = edge.x < 0 ? -3 : 3; const offsetY = edge.y < 0 ? -3 : 3; const lineX = edge.x + offsetX; const lineY = edge.y + offsetY; const zAxisGeometry = new THREE.BufferGeometry().setFromPoints([ new THREE.Vector3(lineX, lineY, -18), new THREE.Vector3(lineX, lineY, 18) ]); const zAxisLine = new THREE.Line(zAxisGeometry, new THREE.LineBasicMaterial({ color: config.axisLineColor, transparent: true, opacity: 0 })); group.add(zAxisLine); const labelOffsetX = edge.x < 0 ? -2 : 2; const labelOffsetY = edge.y < 0 ? -2 : 2; const labelX = lineX + labelOffsetX; const labelY = lineY + labelOffsetY; for (let k = 0; k < 4; k++) { const zPos = (k - 1.5) * config.spacing; const label = '_ _ ' + config.bases[k]; const texture = createAxisLabelTexture(label); const highlightedTexture = createAxisLabelTexture(label, true); const material = new THREE.MeshBasicMaterial({ map: texture, side: THREE.DoubleSide, transparent: true, opacity: 0, depthWrite: false }); const mesh = new THREE.Mesh(new THREE.PlaneGeometry(config.plateWidth, config.plateHeight), material); mesh.position.set(labelX, labelY, zPos); mesh.userData.base = config.bases[k]; mesh.userData.position = 2; mesh.userData.normalTexture = texture; mesh.userData.highlightedTexture = highlightedTexture; axisLabelMeshes.push(mesh); group.add(mesh); } zAxisGroups.push(group); scene.add(group); }); // Interaction handling const raycaster = new THREE.Raycaster(); const mouse = new THREE.Vector2(); let isDragging = false; let hoveredCodon = null; let hoveredAxisLabel = null; let lockedHoveredCodon = null; let lockedHoveredAxisLabel = null; // Tap selection: persists until user taps empty space or another element let tappedCodon = null; let tappedAxisLabel = null; let touchStartPos = null; let touchStartTime = 0; const TAP_THRESHOLD = 10; // max pixel movement to count as a tap const TAP_TIME = 300; // max ms to count as a tap container.addEventListener('mousemove', (event) => { const rect = container.getBoundingClientRect(); mouse.x = ((event.clientX - rect.left) / width) * 2 - 1; mouse.y = -((event.clientY - rect.top) / height) * 2 + 1; }); container.addEventListener('touchstart', (event) => { if (event.touches.length === 1) { touchStartPos = { x: event.touches[0].clientX, y: event.touches[0].clientY }; touchStartTime = Date.now(); } }, { passive: true }); container.addEventListener('touchend', (event) => { if (!touchStartPos) return; const touch = event.changedTouches[0]; const dx = touch.clientX - touchStartPos.x; const dy = touch.clientY - touchStartPos.y; const dist = Math.sqrt(dx * dx + dy * dy); const elapsed = Date.now() - touchStartTime; touchStartPos = null; if (dist < TAP_THRESHOLD && elapsed < TAP_TIME) { // It's a tap — raycast at tap position const rect = container.getBoundingClientRect(); mouse.x = ((touch.clientX - rect.left) / width) * 2 - 1; mouse.y = -((touch.clientY - rect.top) / height) * 2 + 1; raycaster.setFromCamera(mouse, camera); const codonIntersects = raycaster.intersectObjects(codonMeshes); if (codonIntersects.length > 0) { const hit = codonData.find(d => d.mesh === codonIntersects[0].object); if (tappedCodon === hit) { // Tap same element again to deselect tappedCodon = null; tappedAxisLabel = null; } else { tappedCodon = hit; tappedAxisLabel = null; } } else { const visibleAxisLabels = axisLabelMeshes.filter(m => m.visible && m.material.opacity > 0.01); const axisIntersects = raycaster.intersectObjects(visibleAxisLabels); if (axisIntersects.length > 0) { const mesh = axisIntersects[0].object; const newLabel = { base: mesh.userData.base, position: mesh.userData.position }; if (tappedAxisLabel && tappedAxisLabel.base === newLabel.base && tappedAxisLabel.position === newLabel.position) { tappedCodon = null; tappedAxisLabel = null; } else { tappedCodon = null; tappedAxisLabel = newLabel; } } else { // Tapped empty space — clear selection tappedCodon = null; tappedAxisLabel = null; } } updateTextures(tappedCodon, tappedAxisLabel); } }, { passive: true }); controls.addEventListener('start', () => { isDragging = true; lockedHoveredCodon = hoveredCodon || tappedCodon; lockedHoveredAxisLabel = hoveredAxisLabel || tappedAxisLabel; }); controls.addEventListener('end', () => { isDragging = false; lockedHoveredCodon = null; lockedHoveredAxisLabel = null; }); function updateTextures(selectedCodon, axisLabel) { // Reset all axis labels to normal axisLabelMeshes.forEach(mesh => { if (mesh.material.map !== mesh.userData.normalTexture) { mesh.material.map = mesh.userData.normalTexture; mesh.material.needsUpdate = true; } }); if (!selectedCodon && !axisLabel) { codonData.forEach(d => { if (d.mesh.material.map !== d.originalTexture) { d.mesh.material.map = d.originalTexture; d.mesh.material.needsUpdate = true; } d.mesh.visible = true; }); // Show all lines, shells, and labels aaLines.forEach(line => line.visible = true); transparentMeshes.forEach(mesh => mesh.visible = true); labelMeshes.forEach(mesh => mesh.visible = true); return; } if (selectedCodon) { codonData.forEach(d => { let newTexture; if (d === selectedCodon) { newTexture = getCachedTexture(d.codon, 0x000000, [true, true, true]); } else { const highlightMask = [ d.baseIndices[0] === selectedCodon.baseIndices[0], d.baseIndices[1] === selectedCodon.baseIndices[1], d.baseIndices[2] === selectedCodon.baseIndices[2] ]; const matchCount = highlightMask.filter(m => m).length; const finalHighlightMask = matchCount === 2 ? highlightMask : [false, false, false]; newTexture = getCachedTexture(d.codon, d.color, finalHighlightMask); } if (d.mesh.material.map !== newTexture) { d.mesh.material.map = newTexture; d.mesh.material.needsUpdate = true; } d.mesh.visible = true; }); // Show all lines, shells, and labels when hovering codon aaLines.forEach(line => line.visible = true); transparentMeshes.forEach(mesh => mesh.visible = true); labelMeshes.forEach(mesh => mesh.visible = true); } else if (axisLabel) { // Highlight the hovered axis label axisLabelMeshes.forEach(mesh => { if (mesh.userData.base === axisLabel.base && mesh.userData.position === axisLabel.position && mesh.visible && mesh.material.opacity > 0.01) { mesh.material.map = mesh.userData.highlightedTexture; mesh.material.needsUpdate = true; } }); // Track which amino acids have visible codons const visibleAminoAcids = new Set(); // Highlight matching codons and hide non-matching ones codonData.forEach(d => { const highlightMask = [false, false, false]; if (d.codon[axisLabel.position] === axisLabel.base) { highlightMask[axisLabel.position] = true; d.mesh.visible = true; visibleAminoAcids.add(d.aa); } else { d.mesh.visible = false; } const newTexture = getCachedTexture(d.codon, d.color, highlightMask); if (d.mesh.material.map !== newTexture) { d.mesh.material.map = newTexture; d.mesh.material.needsUpdate = true; } }); // Hide/show lines based on amino acid visibility aaLines.forEach(line => { line.visible = visibleAminoAcids.has(line.userData.aminoAcid); }); // Hide/show shells based on amino acid visibility transparentMeshes.forEach(mesh => { mesh.visible = visibleAminoAcids.has(mesh.userData.aminoAcid); }); // Hide/show labels based on amino acid visibility labelMeshes.forEach(mesh => { mesh.visible = visibleAminoAcids.has(mesh.userData.aminoAcid); }); } } // Animation loop function animate() { requestAnimationFrame(animate); // Update fog so front and back of the cube have consistent fog regardless of zoom const camDist = camera.position.length(); // distance from origin scene.fog.near = camDist - cubeHalfDiag - fogPadding; scene.fog.far = camDist + cubeHalfDiag + fogPadding; // Billboard codon meshes codonMeshes.forEach(mesh => { mesh.quaternion.copy(camera.quaternion); const direction = new THREE.Vector3(); direction.subVectors(camera.position, mesh.position).normalize(); const offset = direction.multiplyScalar(0.5); mesh.position.copy(codonData.find(d => d.mesh === mesh).position).add(offset); }); // Billboard label meshes labelMeshes.forEach(mesh => { mesh.quaternion.copy(camera.quaternion); }); // Determine best edges for each axis let bestYEdge = null; let lowestYScore = Infinity; yAxisGroups.forEach(group => { const edgeId = group.userData.edgeId; const edge = yAxisEdges[edgeId]; const midpoint = new THREE.Vector3(edge.x, 0, edge.z); const screenPos = midpoint.clone().project(camera); const score = screenPos.x; if (score < lowestYScore) { lowestYScore = score; bestYEdge = edgeId; } }); const yEdge = yAxisEdges[bestYEdge]; const topPoint = new THREE.Vector3(yEdge.x, 18, yEdge.z); const bottomPoint = new THREE.Vector3(yEdge.x, -18, yEdge.z); const topScreen = topPoint.clone().project(camera); const bottomScreen = bottomPoint.clone().project(camera); const yBottom = bottomScreen.y < topScreen.y ? bottomPoint.y : topPoint.y; // Independently determine X axis position const xEdgeZNeg = new THREE.Vector3(0, yBottom, -18); const xEdgeZPos = new THREE.Vector3(0, yBottom, 18); const xEdgeZNegScreen = xEdgeZNeg.clone().project(camera); const xEdgeZPosScreen = xEdgeZPos.clone().project(camera); const bestXZ = xEdgeZNegScreen.y > xEdgeZPosScreen.y ? 18 : -18; // Independently determine Z axis position const zEdgeXNeg = new THREE.Vector3(-18, yBottom, 0); const zEdgeXPos = new THREE.Vector3(18, yBottom, 0); const zEdgeXNegScreen = zEdgeXNeg.clone().project(camera); const zEdgeXPosScreen = zEdgeXPos.clone().project(camera); const bestZX = zEdgeXNegScreen.y > zEdgeXPosScreen.y ? 18 : -18; let bestXEdge = null; let bestZEdge = null; xAxisEdges.forEach((edge, idx) => { if (edge.y === yBottom && edge.z === bestXZ) { bestXEdge = idx; } }); zAxisEdges.forEach((edge, idx) => { if (edge.x === bestZX && edge.y === yBottom) { bestZEdge = idx; } }); if (bestXEdge === null) bestXEdge = 0; if (bestZEdge === null) bestZEdge = 0; // Fade axis groups xAxisGroups.forEach(group => { const targetOpacity = group.userData.edgeId === bestXEdge ? 1 : 0; const currentOpacity = group.userData.opacity; const delta = targetOpacity - currentOpacity; const newOpacity = currentOpacity + delta * 0.15; group.userData.opacity = Math.abs(delta) < 0.01 ? targetOpacity : newOpacity; group.children.forEach(child => { if (child.material) { child.material.opacity = group.userData.opacity; child.visible = group.userData.opacity > 0.001; } if (child.type === 'Mesh') { child.quaternion.copy(camera.quaternion); } }); }); yAxisGroups.forEach(group => { const targetOpacity = group.userData.edgeId === bestYEdge ? 1 : 0; const currentOpacity = group.userData.opacity; const delta = targetOpacity - currentOpacity; const newOpacity = currentOpacity + delta * 0.15; group.userData.opacity = Math.abs(delta) < 0.01 ? targetOpacity : newOpacity; group.children.forEach(child => { if (child.material) { child.material.opacity = group.userData.opacity; child.visible = group.userData.opacity > 0.001; } if (child.type === 'Mesh') { child.quaternion.copy(camera.quaternion); } }); }); zAxisGroups.forEach(group => { const targetOpacity = group.userData.edgeId === bestZEdge ? 1 : 0; const currentOpacity = group.userData.opacity; const delta = targetOpacity - currentOpacity; const newOpacity = currentOpacity + delta * 0.15; group.userData.opacity = Math.abs(delta) < 0.01 ? targetOpacity : newOpacity; group.children.forEach(child => { if (child.material) { child.material.opacity = group.userData.opacity; child.visible = group.userData.opacity > 0.001; } if (child.type === 'Mesh') { child.quaternion.copy(camera.quaternion); } }); }); // Raycasting for hover (desktop) / tap selection persists (mobile) if (tappedCodon || tappedAxisLabel) { // A tap selection is active — use it, ignore hover updateTextures(tappedCodon, tappedAxisLabel); } else if (!isDragging) { raycaster.setFromCamera(mouse, camera); const codonIntersects = raycaster.intersectObjects(codonMeshes); if (codonIntersects.length > 0) { const intersectedMesh = codonIntersects[0].object; const newHovered = codonData.find(d => d.mesh === intersectedMesh); if (newHovered !== hoveredCodon) { hoveredCodon = newHovered; hoveredAxisLabel = null; updateTextures(hoveredCodon, null); } } else { const visibleAxisLabels = axisLabelMeshes.filter(m => m.visible && m.material.opacity > 0.01); const axisIntersects = raycaster.intersectObjects(visibleAxisLabels); if (axisIntersects.length > 0) { const intersectedMesh = axisIntersects[0].object; const newHoveredAxisLabel = { base: intersectedMesh.userData.base, position: intersectedMesh.userData.position }; if (!hoveredAxisLabel || hoveredAxisLabel.base !== newHoveredAxisLabel.base || hoveredAxisLabel.position !== newHoveredAxisLabel.position) { hoveredCodon = null; hoveredAxisLabel = newHoveredAxisLabel; updateTextures(null, hoveredAxisLabel); } } else { if (hoveredCodon || hoveredAxisLabel) { hoveredCodon = null; hoveredAxisLabel = null; updateTextures(null, null); } } } } else { updateTextures(lockedHoveredCodon, lockedHoveredAxisLabel); } controls.update(); renderer.render(scene, camera); } animate(); // Re-render all textures once the font loads document.fonts.ready.then(() => { // Clear the texture cache so highlights get regenerated with the correct font textureCache.clear(); // Rebuild codon original textures codonData.forEach(d => { const newTexture = createCodonTexture(d.codon, d.color); d.originalTexture = newTexture; d.mesh.material.map = newTexture; d.mesh.material.needsUpdate = true; }); // Rebuild amino acid label textures labelMeshes.forEach(mesh => { const aa = mesh.userData.aminoAcid; const color = aminoAcids[aa].color; const newTexture = createLabelTexture(config.aaFullNames[aa] || aa, color); mesh.material.map = newTexture; mesh.material.needsUpdate = true; }); // Rebuild axis label textures axisLabelMeshes.forEach(mesh => { let label; const pos = mesh.userData.position; if (pos === 0) label = mesh.userData.base + ' _ _'; else if (pos === 1) label = '_ ' + mesh.userData.base + ' _'; else label = '_ _ ' + mesh.userData.base; mesh.userData.normalTexture = createAxisLabelTexture(label); mesh.userData.highlightedTexture = createAxisLabelTexture(label, true); mesh.material.map = mesh.userData.normalTexture; mesh.material.needsUpdate = true; }); }); return container; }