/** @jsxImportSource https://esm.sh/react */ import React, { useEffect, useRef, useState } from "https://esm.sh/react"; import { createRoot } from "https://esm.sh/react-dom/client"; import * as THREE from "https://esm.sh/three"; import { TrackballControls } from "https://esm.sh/three/examples/jsm/controls/TrackballControls"; import { EffectComposer } from "https://esm.sh/three/examples/jsm/postprocessing/EffectComposer"; import { RenderPass } from "https://esm.sh/three/examples/jsm/postprocessing/RenderPass"; import { UnrealBloomPass } from "https://esm.sh/three/examples/jsm/postprocessing/UnrealBloomPass"; // Custom shader for chromatin spheres const chromatinVertexShader = ` varying vec3 vNormal; varying vec3 vViewPosition; void main() { vNormal = normalize(normalMatrix * normal); vec4 mvPosition = modelViewMatrix * vec4(position, 1.0); vViewPosition = -mvPosition.xyz; gl_Position = projectionMatrix * mvPosition; } `; const chromatinFragmentShader = ` uniform vec3 color; uniform float time; varying vec3 vNormal; varying vec3 vViewPosition; void main() { vec3 normal = normalize(vNormal); vec3 viewDir = normalize(vViewPosition); float fresnel = pow(1.0 + dot(viewDir, normal), 3.0); vec3 finalColor = mix(color, vec3(1.0), fresnel * 0.5); finalColor += 0.2 * sin(time * 2.0 + gl_FragCoord.x * 0.01) * vec3(0.5, 0.5, 1.0); gl_FragColor = vec4(finalColor, 1.0); } `; // Mock chromatin-structure library (chs) const chs = { initScene: () => { const scene = new THREE.Scene(); scene.background = new THREE.Color(0x000011); return scene; }, addChunkToScene: (scene, chunk, config) => { const group = new THREE.Group(); const colors = [0xff0000, 0x00ff00, 0x0000ff, 0xffff00, 0xff00ff, 0x00ffff]; const instancedGeometry = new THREE.InstancedBufferGeometry().copy(new THREE.SphereGeometry(0.2, 32, 32)); const instanceCount = 1000; const offsets = new Float32Array(instanceCount * 3); const colorArray = new Float32Array(instanceCount * 3); for (let i = 0; i < instanceCount; i++) { offsets[i * 3] = (Math.random() - 0.5) * 10; offsets[i * 3 + 1] = (Math.random() - 0.5) * 10; offsets[i * 3 + 2] = (Math.random() - 0.5) * 10; const color = new THREE.Color(colors[i % colors.length]); colorArray[i * 3] = color.r; colorArray[i * 3 + 1] = color.g; colorArray[i * 3 + 2] = color.b; } instancedGeometry.setAttribute("offset", new THREE.InstancedBufferAttribute(offsets, 3)); instancedGeometry.setAttribute("color", new THREE.InstancedBufferAttribute(colorArray, 3)); const material = new THREE.ShaderMaterial({ vertexShader: chromatinVertexShader, fragmentShader: chromatinFragmentShader, uniforms: { color: { value: new THREE.Color(0xffffff) }, time: { value: 0 }, }, }); const instancedMesh = new THREE.InstancedMesh(instancedGeometry, material, instanceCount); group.add(instancedMesh); scene.add(group); return scene; }, display: (scene, options) => { const renderer = new THREE.WebGLRenderer({ antialias: true }); renderer.setSize(window.innerWidth, window.innerHeight); return [renderer, renderer.domElement]; }, }; function App() { const canvasRef = useRef(null); const [isLoaded, setIsLoaded] = useState(false); const [zoomLevel, setZoomLevel] = useState(15); const [selectedRegion, setSelectedRegion] = useState(null); const [showInfo, setShowInfo] = useState(false); useEffect(() => { if (!canvasRef.current) return; console.log("Setting up Three.js scene"); const scene = chs.initScene(); const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000); const [renderer, canvas] = chs.display(scene, {}); canvasRef.current.appendChild(canvas); chs.addChunkToScene(scene, {}, {}); camera.position.z = zoomLevel; const controls = new TrackballControls(camera, canvas); controls.rotateSpeed = 1.0; controls.zoomSpeed = 1.2; controls.panSpeed = 0.8; const ambientLight = new THREE.AmbientLight(0x404040); scene.add(ambientLight); const pointLight = new THREE.PointLight(0xffffff, 1, 100); pointLight.position.set(10, 10, 10); scene.add(pointLight); // Particle system const particlesGeometry = new THREE.BufferGeometry(); const particleCount = 5000; const posArray = new Float32Array(particleCount * 3); for (let i = 0; i < particleCount * 3; i++) { posArray[i] = (Math.random() - 0.5) * 50; } particlesGeometry.setAttribute("position", new THREE.BufferAttribute(posArray, 3)); const particlesMaterial = new THREE.PointsMaterial({ size: 0.005, color: 0xffffff, transparent: true, opacity: 0.5, }); const particlesMesh = new THREE.Points(particlesGeometry, particlesMaterial); scene.add(particlesMesh); // Texture mapping const textureLoader = new THREE.TextureLoader(); const texture = textureLoader.load("https://maxm-imggenurl.web.val.run/dna-texture"); const planeGeometry = new THREE.PlaneGeometry(20, 20); const planeMaterial = new THREE.MeshBasicMaterial({ map: texture, transparent: true, opacity: 0.2, side: THREE.DoubleSide, }); const plane = new THREE.Mesh(planeGeometry, planeMaterial); plane.rotation.x = Math.PI / 2; plane.position.y = -5; scene.add(plane); // Post-processing const composer = new EffectComposer(renderer); const renderPass = new RenderPass(scene, camera); composer.addPass(renderPass); const bloomPass = new UnrealBloomPass(new THREE.Vector2(window.innerWidth, window.innerHeight), 1.5, 0.4, 0.85); composer.addPass(bloomPass); const raycaster = new THREE.Raycaster(); const mouse = new THREE.Vector2(); function onMouseMove(event) { mouse.x = (event.clientX / window.innerWidth) * 2 - 1; mouse.y = -(event.clientY / window.innerHeight) * 2 + 1; raycaster.setFromCamera(mouse, camera); const intersects = raycaster.intersectObjects(scene.children, true); if (intersects.length > 0) { const intersectedObject = intersects[0].object; setSelectedRegion(`Region ${intersects[0].instanceId}`); setShowInfo(true); } else { setSelectedRegion(null); setShowInfo(false); } } window.addEventListener("mousemove", onMouseMove, false); function animate(time) { requestAnimationFrame(animate); // Update shader uniforms scene.traverse((child) => { if (child.isMesh && child.material.uniforms) { child.material.uniforms.time.value = time * 0.001; } }); // Rotate particle system particlesMesh.rotation.x += 0.0001; particlesMesh.rotation.y += 0.0002; controls.update(); composer.render(); } animate(0); setIsLoaded(true); return () => { console.log("Cleaning up Three.js scene"); renderer.dispose(); canvasRef.current.removeChild(canvas); window.removeEventListener("mousemove", onMouseMove); }; }, [zoomLevel]); const handleZoom = (delta) => { setZoomLevel(prevZoom => Math.max(5, Math.min(30, prevZoom + delta))); }; return (

all

{isLoaded ? "Three.js scene loaded" : "Loading Three.js scene..."}

{showInfo && (

Information Panel

Selected: {selectedRegion}

Zoom Level: {zoomLevel.toFixed(1)}

)}

); } function client() { console.log("Client function called"); const root = document.getElementById("root"); if (root) { console.log("Rendering App component"); createRoot(root).render(); } else { console.error("Root element not found"); } } if (typeof document !== "undefined") { console.log("Document is defined, calling client function"); client(); } export default async function server(request: Request): Promise { console.log("Server function called"); return new Response( ` all

`, { headers: { "content-type": "text/html", }, }, ); } const css = ` body { margin: 0; font-family: system-ui, sans-serif; overflow: hidden; background-color: #000; } canvas { width: 100%; height: 100%; } button { margin: 5px; padding: 5px 10px; background-color: #4CAF50; color: white; border: none; border-radius: 4px; cursor: pointer; } button:hover { background-color: #45a049; } `; export { client };

chronosphere

Version 19