Dossier Space – 3D Coordinate System<\/title>\n <style>\n * {\n margin: 0;\n padding: 0;\n box-sizing: border-box;\n }\n \n body {\n font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;\n background: linear-gradient(135deg, #fff9e6 0%, #fffae6 100%);\n overflow: hidden;\n color: #333;\n }\n \n #container {\n width: 100vw;\n height: 100vh;\n position: relative;\n }\n \n #canvas-container {\n width: 100%;\n height: 100%;\n }\n \n .info-panel {\n position: absolute;\n top: 20px;\n left: 20px;\n background: rgba(255, 255, 255, 0.95);\n padding: 25px;\n border-radius: 12px;\n max-width: 400px;\n backdrop-filter: blur(10px);\n border: 2px solid rgba(79, 195, 247, 0.3);\n box-shadow: 0 8px 32px rgba(0, 0, 0, 0.15);\n }\n \n .info-panel h1 {\n font-size: 24px;\n margin-bottom: 15px;\n color: #0277bd;\n font-weight: 600;\n }\n \n .info-panel h2 {\n font-size: 16px;\n margin: 15px 0 8px 0;\n color: #0288d1;\n font-weight: 500;\n }\n \n .info-panel p {\n font-size: 13px;\n line-height: 1.6;\n color: #424242;\n margin-bottom: 8px;\n }\n \n .axis-info {\n margin: 10px 0;\n padding: 12px;\n background: rgba(255, 255, 255, 0.7);\n border-radius: 8px;\n border-left: 4px solid;\n }\n \n .axis-info.x-axis { border-left-color: #ef5350; background: rgba(239, 83, 80, 0.08); }\n .axis-info.y-axis { border-left-color: #66bb6a; background: rgba(102, 187, 106, 0.08); }\n .axis-info.z-axis { border-left-color: #42a5f5; background: rgba(66, 165, 245, 0.08); }\n \n .axis-info strong {\n display: block;\n margin-bottom: 4px;\n font-size: 14px;\n }\n \n .axis-info.x-axis strong { color: #c62828; }\n .axis-info.y-axis strong { color: #2e7d32; }\n .axis-info.z-axis strong { color: #1565c0; }\n \n .controls {\n position: absolute;\n bottom: 20px;\n left: 20px;\n background: rgba(255, 255, 255, 0.95);\n padding: 20px;\n border-radius: 12px;\n backdrop-filter: blur(10px);\n border: 2px solid rgba(79, 195, 247, 0.3);\n box-shadow: 0 8px 32px rgba(0, 0, 0, 0.15);\n }\n \n .controls h3 {\n font-size: 14px;\n margin-bottom: 12px;\n color: #0277bd;\n font-weight: 500;\n }\n \n .view-buttons {\n display: flex;\n gap: 10px;\n flex-wrap: wrap;\n }\n \n .view-btn {\n padding: 10px 18px;\n background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);\n border: none;\n border-radius: 8px;\n color: white;\n cursor: pointer;\n font-size: 13px;\n font-weight: 500;\n transition: all 0.3s ease;\n box-shadow: 0 4px 15px rgba(102, 126, 234, 0.4);\n }\n \n .view-btn:hover {\n transform: translateY(-2px);\n box-shadow: 0 6px 20px rgba(102, 126, 234, 0.6);\n }\n \n .view-btn.active {\n background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);\n }\n \n .instructions {\n position: absolute;\n bottom: 20px;\n right: 20px;\n background: rgba(255, 255, 255, 0.95);\n padding: 15px 20px;\n border-radius: 12px;\n backdrop-filter: blur(10px);\n border: 2px solid rgba(79, 195, 247, 0.3);\n box-shadow: 0 8px 32px rgba(0, 0, 0, 0.15);\n font-size: 12px;\n color: #424242;\n }\n \n .instructions strong {\n color: #0277bd;\n display: block;\n margin-bottom: 8px;\n }\n \n .formula {\n background: rgba(2, 119, 189, 0.1);\n padding: 12px;\n border-radius: 8px;\n margin-top: 12px;\n border: 2px solid rgba(2, 119, 189, 0.3);\n font-family: 'Courier New', monospace;\n font-size: 12px;\n text-align: center;\n color: #01579b;\n font-weight: bold;\n }\n <\/style>\n<\/head>\n<body>\n <div id=\"container\">\n <div id=\"canvas-container\"><\/div>\n \n <div class=\"info-panel\">\n <h1>Dossier Space<\/h1>\n <p>A three-dimensional framework where evidence occupies coordinates (x, y, z) with geometric properties.<\/p>\n \n <div class=\"axis-info x-axis\">\n <strong>X-Axis: Procedural (CIPDA\/ISO)<\/strong>\n <p>“Is it real?” – Breadth of process from unauthorized to standardized.<\/p>\n <\/div>\n \n <div class=\"axis-info y-axis\">\n <strong>Y-Axis: Logical (ROMER)<\/strong>\n <p>“What happened?” – Depth of analysis from raw signal to final verdict.<\/p>\n <\/div>\n \n <div class=\"axis-info z-axis\">\n <strong>Z-Axis: Agentic (Meta-Primer)<\/strong>\n <p>“Who understands this?” – Interrogatability from static file to accessible asset.<\/p>\n <\/div>\n \n <h2>Origin Point (0,0,0)<\/h2>\n <p>The Evidence Dossier sits at the origin where all three axes meet.<\/p>\n \n <div class=\"formula\">\n Defensibility = X \u00d7 Y \u00d7 Z\n <\/div>\n <\/div>\n \n <div class=\"controls\">\n <h3>View Perspectives<\/h3>\n <div class=\"view-buttons\">\n <button class=\"view-btn\" data-view=\"default\">Isometric<\/button>\n <button class=\"view-btn\" data-view=\"jury\">Jury View (X-axis)<\/button>\n <button class=\"view-btn\" data-view=\"auditor\">Auditor View (Y-axis)<\/button>\n <button class=\"view-btn\" data-view=\"forensic\">Forensic View (Z-axis)<\/button>\n <\/div>\n <\/div>\n \n <div class=\"instructions\">\n <strong>Controls:<\/strong>\n \u2022 Drag to rotate<br>\n \u2022 Scroll to zoom<br>\n \u2022 Click view buttons to see different perspectives\n <\/div>\n <\/div>\n\n <script src=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/three.js\/r128\/three.min.js\"><\/script>\n <script>\n \/\/ Scene setup\n const scene = new THREE.Scene();\n scene.background = new THREE.Color(0xfffae6); \/\/ Pale yellow background\n scene.fog = new THREE.Fog(0xfffae6, 30, 60);\n \n const camera = new THREE.PerspectiveCamera(\n 75,\n window.innerWidth \/ window.innerHeight,\n 0.1,\n 1000\n );\n \n const renderer = new THREE.WebGLRenderer({ antialias: true });\n renderer.setSize(window.innerWidth, window.innerHeight);\n renderer.shadowMap.enabled = true;\n renderer.shadowMap.type = THREE.PCFSoftShadowMap;\n document.getElementById('canvas-container').appendChild(renderer.domElement);\n \n \/\/ Lighting - adjusted for light background\n const ambientLight = new THREE.AmbientLight(0xffffff, 0.8);\n scene.add(ambientLight);\n \n const directionalLight = new THREE.DirectionalLight(0xffffff, 1.0);\n directionalLight.position.set(5, 10, 5);\n directionalLight.castShadow = true;\n scene.add(directionalLight);\n \n const pointLight1 = new THREE.PointLight(0x4fc3f7, 0.3, 20);\n pointLight1.position.set(5, 5, 5);\n scene.add(pointLight1);\n \n const pointLight2 = new THREE.PointLight(0xf06292, 0.3, 20);\n pointLight2.position.set(-5, -5, -5);\n scene.add(pointLight2);\n \n \/\/ Create axes\n const axisLength = 8;\n const axisRadius = 0.05;\n const arrowLength = 0.5;\n const arrowRadius = 0.15;\n \n \/\/ X-Axis (Red - Procedural)\n const xAxisMaterial = new THREE.MeshPhongMaterial({ \n color: 0xef5350,\n emissive: 0xef5350,\n emissiveIntensity: 0.3\n });\n const xAxisGeometry = new THREE.CylinderGeometry(axisRadius, axisRadius, axisLength, 16);\n const xAxis = new THREE.Mesh(xAxisGeometry, xAxisMaterial);\n xAxis.rotation.z = Math.PI \/ 2;\n xAxis.position.x = axisLength \/ 2;\n scene.add(xAxis);\n \n \/\/ X-Axis arrow\n const xArrowGeometry = new THREE.ConeGeometry(arrowRadius, arrowLength, 16);\n const xArrow = new THREE.Mesh(xArrowGeometry, xAxisMaterial);\n xArrow.rotation.z = -Math.PI \/ 2;\n xArrow.position.x = axisLength + arrowLength \/ 2;\n scene.add(xArrow);\n \n \/\/ Y-Axis (Green - Logical)\n const yAxisMaterial = new THREE.MeshPhongMaterial({ \n color: 0x66bb6a,\n emissive: 0x66bb6a,\n emissiveIntensity: 0.3\n });\n const yAxisGeometry = new THREE.CylinderGeometry(axisRadius, axisRadius, axisLength, 16);\n const yAxis = new THREE.Mesh(yAxisGeometry, yAxisMaterial);\n yAxis.position.y = axisLength \/ 2;\n scene.add(yAxis);\n \n \/\/ Y-Axis arrow\n const yArrowGeometry = new THREE.ConeGeometry(arrowRadius, arrowLength, 16);\n const yArrow = new THREE.Mesh(yArrowGeometry, yAxisMaterial);\n yArrow.position.y = axisLength + arrowLength \/ 2;\n scene.add(yArrow);\n \n \/\/ Z-Axis (Blue - Agentic)\n const zAxisMaterial = new THREE.MeshPhongMaterial({ \n color: 0x42a5f5,\n emissive: 0x42a5f5,\n emissiveIntensity: 0.3\n });\n const zAxisGeometry = new THREE.CylinderGeometry(axisRadius, axisRadius, axisLength, 16);\n const zAxis = new THREE.Mesh(zAxisGeometry, zAxisMaterial);\n zAxis.rotation.x = Math.PI \/ 2;\n zAxis.position.z = axisLength \/ 2;\n scene.add(zAxis);\n \n \/\/ Z-Axis arrow\n const zArrowGeometry = new THREE.ConeGeometry(arrowRadius, arrowLength, 16);\n const zArrow = new THREE.Mesh(zArrowGeometry, zAxisMaterial);\n zArrow.rotation.x = Math.PI;\n zArrow.position.z = axisLength + arrowLength \/ 2;\n scene.add(zArrow);\n \n \/\/ Origin sphere (Evidence Dossier) - Made prominent (50% of axis space)\n const sphereRadius = 4.0; \/\/ Exactly 50% of axis length for maximum prominence\n \n \/\/ Main sphere with glass-like material - adjusted for light background\n const originGeometry = new THREE.SphereGeometry(sphereRadius, 64, 64);\n const originMaterial = new THREE.MeshPhongMaterial({ \n color: 0x0277bd,\n emissive: 0x01579b,\n emissiveIntensity: 0.3,\n shininess: 100,\n transparent: true,\n opacity: 0.4,\n side: THREE.DoubleSide\n });\n const origin = new THREE.Mesh(originGeometry, originMaterial);\n scene.add(origin);\n \n \/\/ Add inner glowing core - more visible\n const coreGeometry = new THREE.SphereGeometry(sphereRadius * 0.75, 32, 32);\n const coreMaterial = new THREE.MeshBasicMaterial({\n color: 0x4fc3f7,\n transparent: true,\n opacity: 0.25\n });\n const core = new THREE.Mesh(coreGeometry, coreMaterial);\n origin.add(core);\n \n \/\/ Add wireframe overlay for structure - darker for visibility\n const wireframeGeometry = new THREE.SphereGeometry(sphereRadius * 1.01, 24, 24);\n const wireframeMaterial = new THREE.MeshBasicMaterial({\n color: 0x01579b,\n wireframe: true,\n transparent: true,\n opacity: 0.5\n });\n const wireframe = new THREE.Mesh(wireframeGeometry, wireframeMaterial);\n origin.add(wireframe);\n \n \/\/ Add particles\/points for \"data\" effect - darker for visibility\n const particlesGeometry = new THREE.BufferGeometry();\n const particlesCount = 500;\n const posArray = new Float32Array(particlesCount * 3);\n \n for(let i = 0; i < particlesCount * 3; i += 3) {\n \/\/ Random points within sphere\n const theta = Math.random() * Math.PI * 2;\n const phi = Math.acos(2 * Math.random() - 1);\n const r = sphereRadius * 0.9 * Math.cbrt(Math.random());\n \n posArray[i] = r * Math.sin(phi) * Math.cos(theta);\n posArray[i + 1] = r * Math.sin(phi) * Math.sin(theta);\n posArray[i + 2] = r * Math.cos(phi);\n }\n \n particlesGeometry.setAttribute('position', new THREE.BufferAttribute(posArray, 3));\n \n const particlesMaterial = new THREE.PointsMaterial({\n size: 0.08,\n color: 0x0277bd,\n transparent: true,\n opacity: 0.6,\n blending: THREE.AdditiveBlending\n });\n \n const particlesMesh = new THREE.Points(particlesGeometry, particlesMaterial);\n origin.add(particlesMesh);\n \n \/\/ Grid helpers - darker for light background\n const gridSize = 16;\n const gridDivisions = 16;\n \n \/\/ XY plane (at z=0)\n const gridHelperXY = new THREE.GridHelper(gridSize, gridDivisions, 0x666666, 0xcccccc);\n gridHelperXY.rotation.x = Math.PI \/ 2;\n gridHelperXY.material.opacity = 0.3;\n gridHelperXY.material.transparent = true;\n scene.add(gridHelperXY);\n \n \/\/ XZ plane (at y=0)\n const gridHelperXZ = new THREE.GridHelper(gridSize, gridDivisions, 0x666666, 0xcccccc);\n gridHelperXZ.material.opacity = 0.3;\n gridHelperXZ.material.transparent = true;\n scene.add(gridHelperXZ);\n \n \/\/ YZ plane (at x=0)\n const gridHelperYZ = new THREE.GridHelper(gridSize, gridDivisions, 0x666666, 0xcccccc);\n gridHelperYZ.rotation.z = Math.PI \/ 2;\n gridHelperYZ.material.opacity = 0.3;\n gridHelperYZ.material.transparent = true;\n scene.add(gridHelperYZ);\n \n \/\/ Add text labels using sprites - more prominent\n function createTextSprite(text, color = '#000000', isLarge = false) {\n const canvas = document.createElement('canvas');\n const context = canvas.getContext('2d');\n canvas.width = isLarge ? 1024 : 512;\n canvas.height = isLarge ? 512 : 256;\n \n \/\/ White background with border for visibility\n context.fillStyle = 'rgba(255, 255, 255, 0.95)';\n context.fillRect(0, 0, canvas.width, canvas.height);\n \n \/\/ Border\n context.strokeStyle = color;\n context.lineWidth = 8;\n context.strokeRect(4, 4, canvas.width - 8, canvas.height - 8);\n \n \/\/ Text\n context.font = isLarge ? 'Bold 80px Arial' : 'Bold 60px Arial';\n context.fillStyle = color;\n context.textAlign = 'center';\n context.textBaseline = 'middle';\n context.fillText(text, canvas.width \/ 2, canvas.height \/ 2);\n \n const texture = new THREE.CanvasTexture(canvas);\n const spriteMaterial = new THREE.SpriteMaterial({ map: texture });\n const sprite = new THREE.Sprite(spriteMaterial);\n sprite.scale.set(isLarge ? 8 : 4, isLarge ? 4 : 2, 1);\n \n return sprite;\n }\n \n \/\/ Add axis labels\n const xLabel = createTextSprite('X: Procedural', '#c62828');\n xLabel.position.set(axisLength + 1.5, 0, 0);\n scene.add(xLabel);\n \n const yLabel = createTextSprite('Y: Logical', '#2e7d32');\n yLabel.position.set(0, axisLength + 1.5, 0);\n scene.add(yLabel);\n \n const zLabel = createTextSprite('Z: Agentic', '#1565c0');\n zLabel.position.set(0, 0, axisLength + 1.5);\n scene.add(zLabel);\n \n \/\/ Large prominent label for the dossier sphere\n const originLabel = createTextSprite('EVIDENCE DOSSIER', '#01579b', true);\n originLabel.position.set(0, -5.5, 0);\n scene.add(originLabel);\n \n \/\/ Add coordinate label\n const coordLabel = createTextSprite('(0,0,0)', '#01579b');\n coordLabel.position.set(0, -7, 0);\n coordLabel.scale.set(3, 1.5, 1);\n scene.add(coordLabel);\n \n \/\/ Camera position\n camera.position.set(12, 10, 12);\n camera.lookAt(0, 0, 0);\n \n \/\/ Mouse controls\n let isDragging = false;\n let previousMousePosition = { x: 0, y: 0 };\n let rotationAngles = { x: -0.6, y: 0.8 }; \/\/ Initial rotation\n const rotationSpeed = 0.005;\n \n renderer.domElement.addEventListener('mousedown', (e) => {\n isDragging = true;\n previousMousePosition = { x: e.clientX, y: e.clientY };\n });\n \n window.addEventListener('mousemove', (e) => {\n if (isDragging) {\n const deltaX = e.clientX - previousMousePosition.x;\n const deltaY = e.clientY - previousMousePosition.y;\n \n rotationAngles.y += deltaX * rotationSpeed;\n rotationAngles.x += deltaY * rotationSpeed;\n \n \/\/ Clamp vertical rotation to avoid flipping\n rotationAngles.x = Math.max(-Math.PI \/ 2, Math.min(Math.PI \/ 2, rotationAngles.x));\n \n previousMousePosition = { x: e.clientX, y: e.clientY };\n }\n });\n \n window.addEventListener('mouseup', () => {\n isDragging = false;\n });\n \n \/\/ Zoom with mouse wheel\n let cameraDistance = 20;\n \n renderer.domElement.addEventListener('wheel', (e) => {\n e.preventDefault();\n cameraDistance += e.deltaY * 0.02;\n cameraDistance = Math.max(8, Math.min(35, cameraDistance));\n });\n \n \/\/ View presets\n const viewPresets = {\n default: { distance: 20, angleX: -0.6, angleY: 0.8 },\n jury: { distance: 24, angleX: 0, angleY: 0 }, \/\/ Looking down X-axis\n auditor: { distance: 24, angleX: Math.PI \/ 2, angleY: 0 }, \/\/ Looking down Y-axis\n forensic: { distance: 24, angleX: 0, angleY: Math.PI \/ 2 } \/\/ Looking down Z-axis\n };\n \n let isTransitioning = false;\n let transitionStart = null;\n let transitionDuration = 1000; \/\/ ms\n let transitionStartPos = { distance: cameraDistance, angleX: rotationAngles.x, angleY: rotationAngles.y };\n let transitionEndPos = null;\n \n document.querySelectorAll('.view-btn').forEach(btn => {\n btn.addEventListener('click', function() {\n document.querySelectorAll('.view-btn').forEach(b => b.classList.remove('active'));\n this.classList.add('active');\n \n const view = this.getAttribute('data-view');\n const preset = viewPresets[view];\n \n \/\/ Start smooth transition\n isTransitioning = true;\n transitionStart = Date.now();\n transitionStartPos = { \n distance: cameraDistance, \n angleX: rotationAngles.x, \n angleY: rotationAngles.y \n };\n transitionEndPos = { \n distance: preset.distance, \n angleX: preset.angleX, \n angleY: preset.angleY \n };\n });\n });\n \n \/\/ Easing function for smooth transitions\n function easeInOutCubic(t) {\n return t < 0.5 ? 4 * t * t * t : 1 - Math.pow(-2 * t + 2, 3) \/ 2;\n }\n \n \/\/ Animation loop\n function animate() {\n requestAnimationFrame(animate);\n \n \/\/ Handle view transitions\n if (isTransitioning) {\n const elapsed = Date.now() - transitionStart;\n const progress = Math.min(elapsed \/ transitionDuration, 1);\n const easedProgress = easeInOutCubic(progress);\n \n cameraDistance = transitionStartPos.distance + \n (transitionEndPos.distance - transitionStartPos.distance) * easedProgress;\n rotationAngles.x = transitionStartPos.angleX + \n (transitionEndPos.angleX - transitionStartPos.angleX) * easedProgress;\n rotationAngles.y = transitionStartPos.angleY + \n (transitionEndPos.angleY - transitionStartPos.angleY) * easedProgress;\n \n if (progress >= 1) {\n isTransitioning = false;\n }\n }\n \n \/\/ Update camera position based on rotation angles\n camera.position.x = cameraDistance * Math.sin(rotationAngles.y) * Math.cos(rotationAngles.x);\n camera.position.y = cameraDistance * Math.sin(rotationAngles.x);\n camera.position.z = cameraDistance * Math.cos(rotationAngles.y) * Math.cos(rotationAngles.x);\n \n camera.lookAt(0, 0, 0);\n \n \/\/ Animated effects for origin sphere\n const time = Date.now() * 0.001;\n \n \/\/ Gentle pulsing of main sphere\n origin.scale.setScalar(1 + Math.sin(time * 0.8) * 0.05);\n \n \/\/ Rotate wireframe slowly\n if (origin.children[1]) { \/\/ wireframe\n origin.children[1].rotation.y = time * 0.2;\n origin.children[1].rotation.x = time * 0.15;\n }\n \n \/\/ Rotate particle cloud\n if (origin.children[2]) { \/\/ particles\n origin.children[2].rotation.y = time * -0.1;\n origin.children[2].rotation.z = time * 0.05;\n }\n \n \/\/ Pulse inner core opacity\n if (origin.children[0]) { \/\/ core\n origin.children[0].material.opacity = 0.2 + Math.sin(time * 1.5) * 0.15;\n }\n \n renderer.render(scene, camera);\n }\n \n \/\/ Handle window resize\n window.addEventListener('resize', () => {\n camera.aspect = window.innerWidth \/ window.innerHeight;\n camera.updateProjectionMatrix();\n renderer.setSize(window.innerWidth, window.innerHeight);\n });\n \n \/\/ Start animation\n animate();\n <\/script>\n<\/body>\n<\/html>\n","protected":false},"excerpt":{"rendered":"<p>A three-dimensional hypothetical framework where evidence occupies coordinates (x, y, z) with geometric properties. The accompanying research pilot description is published by the UK Society for Comuters and Law in April ’26 Dossier Space – 3D Coordinate System Dossier Space A three-dimensional framework where evidence occupies coordinates (x, y, z) with geometric properties. X-Axis: Procedural […]<\/p>\n","protected":false},"author":2,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":""},"class_list":["post-567","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/xplain-r.com\/index.php?rest_route=\/wp\/v2\/pages\/567","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/xplain-r.com\/index.php?rest_route=\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/xplain-r.com\/index.php?rest_route=\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/xplain-r.com\/index.php?rest_route=\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/xplain-r.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=567"}],"version-history":[{"count":5,"href":"https:\/\/xplain-r.com\/index.php?rest_route=\/wp\/v2\/pages\/567\/revisions"}],"predecessor-version":[{"id":656,"href":"https:\/\/xplain-r.com\/index.php?rest_route=\/wp\/v2\/pages\/567\/revisions\/656"}],"wp:attachment":[{"href":"https:\/\/xplain-r.com\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=567"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}

{"id":567,"date":"2026-02-04T15:45:51","date_gmt":"2026-02-04T15:45:51","guid":{"rendered":"https:\/\/xplain-r.com\/?page_id=567"},"modified":"2026-09-04T08:56:32","modified_gmt":"2026-09-04T08:56:32","slug":"dossier-space","status":"publish","type":"page","link":"https:\/\/xplain-r.com\/?page_id=567","title":{"rendered":"Dossier Space?"},"content":{"rendered":"\n

A three-dimensional hypothetical framework where evidence occupies coordinates (x, y, z) with geometric properties. The accompanying research pilot description is published by the UK Society for Comuters and Law in April ’26<\/p>\n\n\n\n\n\n\n \n \n Dossier Space – 3D Coordinate System<\/title>\n <style>\n * {\n margin: 0;\n padding: 0;\n box-sizing: border-box;\n }\n \n body {\n font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;\n background: linear-gradient(135deg, #fff9e6 0%, #fffae6 100%);\n overflow: hidden;\n color: #333;\n }\n \n #container {\n width: 100vw;\n height: 100vh;\n position: relative;\n }\n \n #canvas-container {\n width: 100%;\n height: 100%;\n }\n \n .info-panel {\n position: absolute;\n top: 20px;\n left: 20px;\n background: rgba(255, 255, 255, 0.95);\n padding: 25px;\n border-radius: 12px;\n max-width: 400px;\n backdrop-filter: blur(10px);\n border: 2px solid rgba(79, 195, 247, 0.3);\n box-shadow: 0 8px 32px rgba(0, 0, 0, 0.15);\n }\n \n .info-panel h1 {\n font-size: 24px;\n margin-bottom: 15px;\n color: #0277bd;\n font-weight: 600;\n }\n \n .info-panel h2 {\n font-size: 16px;\n margin: 15px 0 8px 0;\n color: #0288d1;\n font-weight: 500;\n }\n \n .info-panel p {\n font-size: 13px;\n line-height: 1.6;\n color: #424242;\n margin-bottom: 8px;\n }\n \n .axis-info {\n margin: 10px 0;\n padding: 12px;\n background: rgba(255, 255, 255, 0.7);\n border-radius: 8px;\n border-left: 4px solid;\n }\n \n .axis-info.x-axis { border-left-color: #ef5350; background: rgba(239, 83, 80, 0.08); }\n .axis-info.y-axis { border-left-color: #66bb6a; background: rgba(102, 187, 106, 0.08); }\n .axis-info.z-axis { border-left-color: #42a5f5; background: rgba(66, 165, 245, 0.08); }\n \n .axis-info strong {\n display: block;\n margin-bottom: 4px;\n font-size: 14px;\n }\n \n .axis-info.x-axis strong { color: #c62828; }\n .axis-info.y-axis strong { color: #2e7d32; }\n .axis-info.z-axis strong { color: #1565c0; }\n \n .controls {\n position: absolute;\n bottom: 20px;\n left: 20px;\n background: rgba(255, 255, 255, 0.95);\n padding: 20px;\n border-radius: 12px;\n backdrop-filter: blur(10px);\n border: 2px solid rgba(79, 195, 247, 0.3);\n box-shadow: 0 8px 32px rgba(0, 0, 0, 0.15);\n }\n \n .controls h3 {\n font-size: 14px;\n margin-bottom: 12px;\n color: #0277bd;\n font-weight: 500;\n }\n \n .view-buttons {\n display: flex;\n gap: 10px;\n flex-wrap: wrap;\n }\n \n .view-btn {\n padding: 10px 18px;\n background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);\n border: none;\n border-radius: 8px;\n color: white;\n cursor: pointer;\n font-size: 13px;\n font-weight: 500;\n transition: all 0.3s ease;\n box-shadow: 0 4px 15px rgba(102, 126, 234, 0.4);\n }\n \n .view-btn:hover {\n transform: translateY(-2px);\n box-shadow: 0 6px 20px rgba(102, 126, 234, 0.6);\n }\n \n .view-btn.active {\n background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);\n }\n \n .instructions {\n position: absolute;\n bottom: 20px;\n right: 20px;\n background: rgba(255, 255, 255, 0.95);\n padding: 15px 20px;\n border-radius: 12px;\n backdrop-filter: blur(10px);\n border: 2px solid rgba(79, 195, 247, 0.3);\n box-shadow: 0 8px 32px rgba(0, 0, 0, 0.15);\n font-size: 12px;\n color: #424242;\n }\n \n .instructions strong {\n color: #0277bd;\n display: block;\n margin-bottom: 8px;\n }\n \n .formula {\n background: rgba(2, 119, 189, 0.1);\n padding: 12px;\n border-radius: 8px;\n margin-top: 12px;\n border: 2px solid rgba(2, 119, 189, 0.3);\n font-family: 'Courier New', monospace;\n font-size: 12px;\n text-align: center;\n color: #01579b;\n font-weight: bold;\n }\n <\/style>\n<\/head>\n<body>\n <div id=\"container\">\n <div id=\"canvas-container\"><\/div>\n \n <div class=\"info-panel\">\n <h1>Dossier Space<\/h1>\n <p>A three-dimensional framework where evidence occupies coordinates (x, y, z) with geometric properties.<\/p>\n \n <div class=\"axis-info x-axis\">\n <strong>X-Axis: Procedural (CIPDA\/ISO)<\/strong>\n <p>“Is it real?” – Breadth of process from unauthorized to standardized.<\/p>\n <\/div>\n \n <div class=\"axis-info y-axis\">\n <strong>Y-Axis: Logical (ROMER)<\/strong>\n <p>“What happened?” – Depth of analysis from raw signal to final verdict.<\/p>\n <\/div>\n \n <div class=\"axis-info z-axis\">\n <strong>Z-Axis: Agentic (Meta-Primer)<\/strong>\n <p>“Who understands this?” – Interrogatability from static file to accessible asset.<\/p>\n <\/div>\n \n <h2>Origin Point (0,0,0)<\/h2>\n <p>The Evidence Dossier sits at the origin where all three axes meet.<\/p>\n \n <div class=\"formula\">\n Defensibility = X \u00d7 Y \u00d7 Z\n <\/div>\n <\/div>\n \n <div class=\"controls\">\n <h3>View Perspectives<\/h3>\n <div class=\"view-buttons\">\n <button class=\"view-btn\" data-view=\"default\">Isometric<\/button>\n <button class=\"view-btn\" data-view=\"jury\">Jury View (X-axis)<\/button>\n <button class=\"view-btn\" data-view=\"auditor\">Auditor View (Y-axis)<\/button>\n <button class=\"view-btn\" data-view=\"forensic\">Forensic View (Z-axis)<\/button>\n <\/div>\n <\/div>\n \n <div class=\"instructions\">\n <strong>Controls:<\/strong>\n \u2022 Drag to rotate<br>\n \u2022 Scroll to zoom<br>\n \u2022 Click view buttons to see different perspectives\n <\/div>\n <\/div>\n\n <script src=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/three.js\/r128\/three.min.js\"><\/script>\n <script>\n \/\/ Scene setup\n const scene = new THREE.Scene();\n scene.background = new THREE.Color(0xfffae6); \/\/ Pale yellow background\n scene.fog = new THREE.Fog(0xfffae6, 30, 60);\n \n const camera = new THREE.PerspectiveCamera(\n 75,\n window.innerWidth \/ window.innerHeight,\n 0.1,\n 1000\n );\n \n const renderer = new THREE.WebGLRenderer({ antialias: true });\n renderer.setSize(window.innerWidth, window.innerHeight);\n renderer.shadowMap.enabled = true;\n renderer.shadowMap.type = THREE.PCFSoftShadowMap;\n document.getElementById('canvas-container').appendChild(renderer.domElement);\n \n \/\/ Lighting - adjusted for light background\n const ambientLight = new THREE.AmbientLight(0xffffff, 0.8);\n scene.add(ambientLight);\n \n const directionalLight = new THREE.DirectionalLight(0xffffff, 1.0);\n directionalLight.position.set(5, 10, 5);\n directionalLight.castShadow = true;\n scene.add(directionalLight);\n \n const pointLight1 = new THREE.PointLight(0x4fc3f7, 0.3, 20);\n pointLight1.position.set(5, 5, 5);\n scene.add(pointLight1);\n \n const pointLight2 = new THREE.PointLight(0xf06292, 0.3, 20);\n pointLight2.position.set(-5, -5, -5);\n scene.add(pointLight2);\n \n \/\/ Create axes\n const axisLength = 8;\n const axisRadius = 0.05;\n const arrowLength = 0.5;\n const arrowRadius = 0.15;\n \n \/\/ X-Axis (Red - Procedural)\n const xAxisMaterial = new THREE.MeshPhongMaterial({ \n color: 0xef5350,\n emissive: 0xef5350,\n emissiveIntensity: 0.3\n });\n const xAxisGeometry = new THREE.CylinderGeometry(axisRadius, axisRadius, axisLength, 16);\n const xAxis = new THREE.Mesh(xAxisGeometry, xAxisMaterial);\n xAxis.rotation.z = Math.PI \/ 2;\n xAxis.position.x = axisLength \/ 2;\n scene.add(xAxis);\n \n \/\/ X-Axis arrow\n const xArrowGeometry = new THREE.ConeGeometry(arrowRadius, arrowLength, 16);\n const xArrow = new THREE.Mesh(xArrowGeometry, xAxisMaterial);\n xArrow.rotation.z = -Math.PI \/ 2;\n xArrow.position.x = axisLength + arrowLength \/ 2;\n scene.add(xArrow);\n \n \/\/ Y-Axis (Green - Logical)\n const yAxisMaterial = new THREE.MeshPhongMaterial({ \n color: 0x66bb6a,\n emissive: 0x66bb6a,\n emissiveIntensity: 0.3\n });\n const yAxisGeometry = new THREE.CylinderGeometry(axisRadius, axisRadius, axisLength, 16);\n const yAxis = new THREE.Mesh(yAxisGeometry, yAxisMaterial);\n yAxis.position.y = axisLength \/ 2;\n scene.add(yAxis);\n \n \/\/ Y-Axis arrow\n const yArrowGeometry = new THREE.ConeGeometry(arrowRadius, arrowLength, 16);\n const yArrow = new THREE.Mesh(yArrowGeometry, yAxisMaterial);\n yArrow.position.y = axisLength + arrowLength \/ 2;\n scene.add(yArrow);\n \n \/\/ Z-Axis (Blue - Agentic)\n const zAxisMaterial = new THREE.MeshPhongMaterial({ \n color: 0x42a5f5,\n emissive: 0x42a5f5,\n emissiveIntensity: 0.3\n });\n const zAxisGeometry = new THREE.CylinderGeometry(axisRadius, axisRadius, axisLength, 16);\n const zAxis = new THREE.Mesh(zAxisGeometry, zAxisMaterial);\n zAxis.rotation.x = Math.PI \/ 2;\n zAxis.position.z = axisLength \/ 2;\n scene.add(zAxis);\n \n \/\/ Z-Axis arrow\n const zArrowGeometry = new THREE.ConeGeometry(arrowRadius, arrowLength, 16);\n const zArrow = new THREE.Mesh(zArrowGeometry, zAxisMaterial);\n zArrow.rotation.x = Math.PI;\n zArrow.position.z = axisLength + arrowLength \/ 2;\n scene.add(zArrow);\n \n \/\/ Origin sphere (Evidence Dossier) - Made prominent (50% of axis space)\n const sphereRadius = 4.0; \/\/ Exactly 50% of axis length for maximum prominence\n \n \/\/ Main sphere with glass-like material - adjusted for light background\n const originGeometry = new THREE.SphereGeometry(sphereRadius, 64, 64);\n const originMaterial = new THREE.MeshPhongMaterial({ \n color: 0x0277bd,\n emissive: 0x01579b,\n emissiveIntensity: 0.3,\n shininess: 100,\n transparent: true,\n opacity: 0.4,\n side: THREE.DoubleSide\n });\n const origin = new THREE.Mesh(originGeometry, originMaterial);\n scene.add(origin);\n \n \/\/ Add inner glowing core - more visible\n const coreGeometry = new THREE.SphereGeometry(sphereRadius * 0.75, 32, 32);\n const coreMaterial = new THREE.MeshBasicMaterial({\n color: 0x4fc3f7,\n transparent: true,\n opacity: 0.25\n });\n const core = new THREE.Mesh(coreGeometry, coreMaterial);\n origin.add(core);\n \n \/\/ Add wireframe overlay for structure - darker for visibility\n const wireframeGeometry = new THREE.SphereGeometry(sphereRadius * 1.01, 24, 24);\n const wireframeMaterial = new THREE.MeshBasicMaterial({\n color: 0x01579b,\n wireframe: true,\n transparent: true,\n opacity: 0.5\n });\n const wireframe = new THREE.Mesh(wireframeGeometry, wireframeMaterial);\n origin.add(wireframe);\n \n \/\/ Add particles\/points for \"data\" effect - darker for visibility\n const particlesGeometry = new THREE.BufferGeometry();\n const particlesCount = 500;\n const posArray = new Float32Array(particlesCount * 3);\n \n for(let i = 0; i < particlesCount * 3; i += 3) {\n \/\/ Random points within sphere\n const theta = Math.random() * Math.PI * 2;\n const phi = Math.acos(2 * Math.random() - 1);\n const r = sphereRadius * 0.9 * Math.cbrt(Math.random());\n \n posArray[i] = r * Math.sin(phi) * Math.cos(theta);\n posArray[i + 1] = r * Math.sin(phi) * Math.sin(theta);\n posArray[i + 2] = r * Math.cos(phi);\n }\n \n particlesGeometry.setAttribute('position', new THREE.BufferAttribute(posArray, 3));\n \n const particlesMaterial = new THREE.PointsMaterial({\n size: 0.08,\n color: 0x0277bd,\n transparent: true,\n opacity: 0.6,\n blending: THREE.AdditiveBlending\n });\n \n const particlesMesh = new THREE.Points(particlesGeometry, particlesMaterial);\n origin.add(particlesMesh);\n \n \/\/ Grid helpers - darker for light background\n const gridSize = 16;\n const gridDivisions = 16;\n \n \/\/ XY plane (at z=0)\n const gridHelperXY = new THREE.GridHelper(gridSize, gridDivisions, 0x666666, 0xcccccc);\n gridHelperXY.rotation.x = Math.PI \/ 2;\n gridHelperXY.material.opacity = 0.3;\n gridHelperXY.material.transparent = true;\n scene.add(gridHelperXY);\n \n \/\/ XZ plane (at y=0)\n const gridHelperXZ = new THREE.GridHelper(gridSize, gridDivisions, 0x666666, 0xcccccc);\n gridHelperXZ.material.opacity = 0.3;\n gridHelperXZ.material.transparent = true;\n scene.add(gridHelperXZ);\n \n \/\/ YZ plane (at x=0)\n const gridHelperYZ = new THREE.GridHelper(gridSize, gridDivisions, 0x666666, 0xcccccc);\n gridHelperYZ.rotation.z = Math.PI \/ 2;\n gridHelperYZ.material.opacity = 0.3;\n gridHelperYZ.material.transparent = true;\n scene.add(gridHelperYZ);\n \n \/\/ Add text labels using sprites - more prominent\n function createTextSprite(text, color = '#000000', isLarge = false) {\n const canvas = document.createElement('canvas');\n const context = canvas.getContext('2d');\n canvas.width = isLarge ? 1024 : 512;\n canvas.height = isLarge ? 512 : 256;\n \n \/\/ White background with border for visibility\n context.fillStyle = 'rgba(255, 255, 255, 0.95)';\n context.fillRect(0, 0, canvas.width, canvas.height);\n \n \/\/ Border\n context.strokeStyle = color;\n context.lineWidth = 8;\n context.strokeRect(4, 4, canvas.width - 8, canvas.height - 8);\n \n \/\/ Text\n context.font = isLarge ? 'Bold 80px Arial' : 'Bold 60px Arial';\n context.fillStyle = color;\n context.textAlign = 'center';\n context.textBaseline = 'middle';\n context.fillText(text, canvas.width \/ 2, canvas.height \/ 2);\n \n const texture = new THREE.CanvasTexture(canvas);\n const spriteMaterial = new THREE.SpriteMaterial({ map: texture });\n const sprite = new THREE.Sprite(spriteMaterial);\n sprite.scale.set(isLarge ? 8 : 4, isLarge ? 4 : 2, 1);\n \n return sprite;\n }\n \n \/\/ Add axis labels\n const xLabel = createTextSprite('X: Procedural', '#c62828');\n xLabel.position.set(axisLength + 1.5, 0, 0);\n scene.add(xLabel);\n \n const yLabel = createTextSprite('Y: Logical', '#2e7d32');\n yLabel.position.set(0, axisLength + 1.5, 0);\n scene.add(yLabel);\n \n const zLabel = createTextSprite('Z: Agentic', '#1565c0');\n zLabel.position.set(0, 0, axisLength + 1.5);\n scene.add(zLabel);\n \n \/\/ Large prominent label for the dossier sphere\n const originLabel = createTextSprite('EVIDENCE DOSSIER', '#01579b', true);\n originLabel.position.set(0, -5.5, 0);\n scene.add(originLabel);\n \n \/\/ Add coordinate label\n const coordLabel = createTextSprite('(0,0,0)', '#01579b');\n coordLabel.position.set(0, -7, 0);\n coordLabel.scale.set(3, 1.5, 1);\n scene.add(coordLabel);\n \n \/\/ Camera position\n camera.position.set(12, 10, 12);\n camera.lookAt(0, 0, 0);\n \n \/\/ Mouse controls\n let isDragging = false;\n let previousMousePosition = { x: 0, y: 0 };\n let rotationAngles = { x: -0.6, y: 0.8 }; \/\/ Initial rotation\n const rotationSpeed = 0.005;\n \n renderer.domElement.addEventListener('mousedown', (e) => {\n isDragging = true;\n previousMousePosition = { x: e.clientX, y: e.clientY };\n });\n \n window.addEventListener('mousemove', (e) => {\n if (isDragging) {\n const deltaX = e.clientX - previousMousePosition.x;\n const deltaY = e.clientY - previousMousePosition.y;\n \n rotationAngles.y += deltaX * rotationSpeed;\n rotationAngles.x += deltaY * rotationSpeed;\n \n \/\/ Clamp vertical rotation to avoid flipping\n rotationAngles.x = Math.max(-Math.PI \/ 2, Math.min(Math.PI \/ 2, rotationAngles.x));\n \n previousMousePosition = { x: e.clientX, y: e.clientY };\n }\n });\n \n window.addEventListener('mouseup', () => {\n isDragging = false;\n });\n \n \/\/ Zoom with mouse wheel\n let cameraDistance = 20;\n \n renderer.domElement.addEventListener('wheel', (e) => {\n e.preventDefault();\n cameraDistance += e.deltaY * 0.02;\n cameraDistance = Math.max(8, Math.min(35, cameraDistance));\n });\n \n \/\/ View presets\n const viewPresets = {\n default: { distance: 20, angleX: -0.6, angleY: 0.8 },\n jury: { distance: 24, angleX: 0, angleY: 0 }, \/\/ Looking down X-axis\n auditor: { distance: 24, angleX: Math.PI \/ 2, angleY: 0 }, \/\/ Looking down Y-axis\n forensic: { distance: 24, angleX: 0, angleY: Math.PI \/ 2 } \/\/ Looking down Z-axis\n };\n \n let isTransitioning = false;\n let transitionStart = null;\n let transitionDuration = 1000; \/\/ ms\n let transitionStartPos = { distance: cameraDistance, angleX: rotationAngles.x, angleY: rotationAngles.y };\n let transitionEndPos = null;\n \n document.querySelectorAll('.view-btn').forEach(btn => {\n btn.addEventListener('click', function() {\n document.querySelectorAll('.view-btn').forEach(b => b.classList.remove('active'));\n this.classList.add('active');\n \n const view = this.getAttribute('data-view');\n const preset = viewPresets[view];\n \n \/\/ Start smooth transition\n isTransitioning = true;\n transitionStart = Date.now();\n transitionStartPos = { \n distance: cameraDistance, \n angleX: rotationAngles.x, \n angleY: rotationAngles.y \n };\n transitionEndPos = { \n distance: preset.distance, \n angleX: preset.angleX, \n angleY: preset.angleY \n };\n });\n });\n \n \/\/ Easing function for smooth transitions\n function easeInOutCubic(t) {\n return t < 0.5 ? 4 * t * t * t : 1 - Math.pow(-2 * t + 2, 3) \/ 2;\n }\n \n \/\/ Animation loop\n function animate() {\n requestAnimationFrame(animate);\n \n \/\/ Handle view transitions\n if (isTransitioning) {\n const elapsed = Date.now() - transitionStart;\n const progress = Math.min(elapsed \/ transitionDuration, 1);\n const easedProgress = easeInOutCubic(progress);\n \n cameraDistance = transitionStartPos.distance + \n (transitionEndPos.distance - transitionStartPos.distance) * easedProgress;\n rotationAngles.x = transitionStartPos.angleX + \n (transitionEndPos.angleX - transitionStartPos.angleX) * easedProgress;\n rotationAngles.y = transitionStartPos.angleY + \n (transitionEndPos.angleY - transitionStartPos.angleY) * easedProgress;\n \n if (progress >= 1) {\n isTransitioning = false;\n }\n }\n \n \/\/ Update camera position based on rotation angles\n camera.position.x = cameraDistance * Math.sin(rotationAngles.y) * Math.cos(rotationAngles.x);\n camera.position.y = cameraDistance * Math.sin(rotationAngles.x);\n camera.position.z = cameraDistance * Math.cos(rotationAngles.y) * Math.cos(rotationAngles.x);\n \n camera.lookAt(0, 0, 0);\n \n \/\/ Animated effects for origin sphere\n const time = Date.now() * 0.001;\n \n \/\/ Gentle pulsing of main sphere\n origin.scale.setScalar(1 + Math.sin(time * 0.8) * 0.05);\n \n \/\/ Rotate wireframe slowly\n if (origin.children[1]) { \/\/ wireframe\n origin.children[1].rotation.y = time * 0.2;\n origin.children[1].rotation.x = time * 0.15;\n }\n \n \/\/ Rotate particle cloud\n if (origin.children[2]) { \/\/ particles\n origin.children[2].rotation.y = time * -0.1;\n origin.children[2].rotation.z = time * 0.05;\n }\n \n \/\/ Pulse inner core opacity\n if (origin.children[0]) { \/\/ core\n origin.children[0].material.opacity = 0.2 + Math.sin(time * 1.5) * 0.15;\n }\n \n renderer.render(scene, camera);\n }\n \n \/\/ Handle window resize\n window.addEventListener('resize', () => {\n camera.aspect = window.innerWidth \/ window.innerHeight;\n camera.updateProjectionMatrix();\n renderer.setSize(window.innerWidth, window.innerHeight);\n });\n \n \/\/ Start animation\n animate();\n <\/script>\n<\/body>\n<\/html>\n","protected":false},"excerpt":{"rendered":"<p>A three-dimensional hypothetical framework where evidence occupies coordinates (x, y, z) with geometric properties. The accompanying research pilot description is published by the UK Society for Comuters and Law in April ’26 Dossier Space – 3D Coordinate System Dossier Space A three-dimensional framework where evidence occupies coordinates (x, y, z) with geometric properties. X-Axis: Procedural […]<\/p>\n","protected":false},"author":2,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":""},"class_list":["post-567","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/xplain-r.com\/index.php?rest_route=\/wp\/v2\/pages\/567","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/xplain-r.com\/index.php?rest_route=\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/xplain-r.com\/index.php?rest_route=\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/xplain-r.com\/index.php?rest_route=\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/xplain-r.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=567"}],"version-history":[{"count":5,"href":"https:\/\/xplain-r.com\/index.php?rest_route=\/wp\/v2\/pages\/567\/revisions"}],"predecessor-version":[{"id":656,"href":"https:\/\/xplain-r.com\/index.php?rest_route=\/wp\/v2\/pages\/567\/revisions\/656"}],"wp:attachment":[{"href":"https:\/\/xplain-r.com\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=567"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}