Interactive 3D Human Brain

size); window.addEventListener('deviceorientation', onDeviceOrientation); document.addEventListener('mousedown', onMouseDown, false); document.addEventListener('touchstart', onTouchStart, false); animate(); } function addLabels() { const labelDiv = document.createElement('div'); labelDiv.style.position = 'absolute'; labelDiv.style.color = 'white'; labelDiv.style.pointerEvents = 'auto'; labelDiv.style.cursor = 'pointer'; document.body.appendChild(labelDiv); for (const [part, data] of Object.entries(brainParts)) { const label = document.createElement('div'); label.textContent = part; label.style.position = 'absolute'; label.style.color = 'white'; label.style.backgroundColor = 'rgba(0,0,0,0.5)'; label.style.padding = '5px'; label.style.borderRadius = '3px'; label.style.cursor = 'pointer'; label.dataset.part = part; label.addEventListener('click', () => showBrainInfo(part)); document.body.appendChild(label); labels.push({ element: label, part: part, position: data.position }); } } function updateLabels() { for (const label of labels) { const position = new THREE.Vector3( label.position.x, label.position.y, label.position.z ); position.project(camera); const x = (position.x * 0.5 + 0.5) * window.innerWidth; const y = (-(position.y * 0.5) + 0.5) * window.innerHeight; label.element.style.transform = `translate(-50%, -50%) translate(${x}px,${y}px)`; } } function showBrainInfo(part) { const infoDiv = document.getElementById('brain-info'); infoDiv.innerHTML = `

${part}

${brainParts[part].info}

`; infoDiv.style.display = 'block'; setTimeout(() => infoDiv.style.display = 'none', 5000); } function onWindowResize() { camera.aspect = window.innerWidth / window.innerHeight; camera.updateProjectionMatrix(); renderer.setSize(window.innerWidth, window.innerHeight); } function onDeviceOrientation(event) { if (controls) { controls.update(); } } function onMouseDown(event) { mouse.x = (event.clientX / window.innerWidth) * 2 - 1; mouse.y = -(event.clientY / window.innerHeight) * 2 + 1; checkIntersection(); } function onTouchStart(event) { if (event.touches.length > 0) { mouse.x = (event.touches[0].clientX / window.innerWidth) * 2 - 1; mouse.y = -(event.touches[0].clientY / window.innerHeight) * 2 + 1; checkIntersection(); } } function checkIntersection() { raycaster.setFromCamera(mouse, camera); const intersects = raycaster.intersectObject(brain); if (intersects.length > 0) { const point = intersects[0].point; let closestPart = null; let minDistance = Infinity; for (const [part, data] of Object.entries(brainParts)) { const distance = point.distanceTo(new THREE.Vector3( data.position.x, data.position.y, data.position.z )); if (distance < minDistance) { minDistance = distance; closestPart = part; } } if (closestPart && minDistance < 0.5) { showBrainInfo(closestPart); } } } function animate() { requestAnimationFrame(animate); controls.update(); updateLabels(); renderer.render(scene, camera); } 1d:T431, Interactive 3D Human Brain

Interactive 3D Human Brain - Move your device or drag to rotate