31:Tdc8,{ renderer.domElement.style.borderRadius = '8px'; renderer.domElement.style.position = 'absolute'; renderer.domElement.style.zIndex = '100'; renderer.domElement.style.top = '0px'; renderer.domElement.style.left = '0px'; renderer.domElement.style.width = '100%'; renderer.domElement.style.height = '100%'; const illustration = await illustration_svg.text(); const svg_data = (new DOMParser).parseFromString(illustration, "image/svg+xml"); const svg_illustration = d3.select(svg_data.documentElement); const svgElement = svg_illustration.node(); svgElement.setAttribute("width", "100%"); svgElement.setAttribute("height", "auto"); svgElement.setAttribute("viewBox", "0 20 750 750"); return html`

${renderer.domElement}

Frankford Arsenal
Prism No. 7

${svg_illustration.node()}

MATERIAL: Borosilicate Glass (N-BK7)
REFRACTIVE INDEX: n_d = 1.5168
REFERENCE:
Defense Supply Agency, “Optical Design: Military Standardization Handbook,” MIL-HDBK-141, USA (1962).
DESCRIPTION:
This prism is made in one piece. The line of sight is deviated through an angle of 90° in the horizontal plane and, simultaneously, through an angle of 45° in the vertical plane. The observer, standing at right angle to the line of sight, will see a normal image of the target since the prism neither inverts nor reverts the image.

`; }32:T5f5,camera = { const aspect = width / height; const near = 0.01; const far = 10000; const camera = new THREE.PerspectiveCamera(cameraFocalLength, aspect, near, far); // Transformation matrix to align the Three.js coordinate system with the original system const coordinateSystemTransformationMatrix = new THREE.Matrix4(); coordinateSystemTransformationMatrix.set( 1, 0, 0, 0, 0, 0, 1, 0, 0, -1, 0, 0, 0, 0, 0, 1 ); camera.position.set(cameraPosition[0], cameraPosition[2], -cameraPosition[1]); // Create the rotation matrix based on cameraOrientation const rotationMatrix = new THREE.Matrix4(); rotationMatrix.set( cameraOrientation[0], cameraOrientation[4], cameraOrientation[8], 0, cameraOrientation[1], cameraOrientation[5], cameraOrientation[9], 0, cameraOrientation[2], cameraOrientation[6], cameraOrientation[10], 0, 0, 0, 0, 1 ); const combinedMatrix = new THREE.Matrix4().multiplyMatrices(coordinateSystemTransformationMatrix, rotationMatrix); const forward = new THREE.Vector3(); forward.setFromMatrixColumn(combinedMatrix, 2); const up = new THREE.Vector3(); up.setFromMatrixColumn(combinedMatrix, 1); const right = new THREE.Vector3(); right.setFromMatrixColumn(combinedMatrix, 0); up.normalize(); right.normalize(); forward.normalize(); const quaternion = new THREE.Quaternion().setFromRotationMatrix(combinedMatrix); camera.quaternion.copy(quaternion); camera.up.copy(up); return camera; } 33:T8bb,renderer = { const renderer = new THREE.WebGLRenderer({ antialias: true, alpha: true, }); renderer.setSize(width, height); renderer.setPixelRatio(devicePixelRatio); // Clock for time-based animation const clock = new THREE.Clock(); let animationFrameId = null; let model = null; let mixer = null; let controls = null; const animationSpeed = 0.4; // Speed up or slow down animation const delayTime = 0; let lastUpdateTime = 0; // Load model and set up the animation loadModel().then((gltf) => { if (gltf) { model = gltf.scene; scene.add(model); // Set up the animation mixer if animations exist if (Play_animation && gltf.animations && gltf.animations.length) { mixer = new THREE.AnimationMixer(model); gltf.animations.forEach((clip) => { mixer.clipAction(clip).play(); }); } else { console.warn('No animations found in this GLB model'); } // Animation and rendering loop const animate = () => { animationFrameId = requestAnimationFrame(animate); const delta = clock.getDelta(); // Add delay before updating the animation if (lastUpdateTime >= delayTime) { if (mixer) { mixer.update(delta * animationSpeed); // Adjust animation speed } } else { lastUpdateTime += delta; // Increase the delay countdown } if (controls) { controls.update(); } renderer.render(scene, camera); }; animate(); } }).catch((error) => { console.error("Error loading model or animations:", error); }); // Cleanup on invalidation invalidation.then(() => { if (animationFrameId) { cancelAnimationFrame(animationFrameId); } renderer.dispose(); if (controls) { controls.dispose(); } if (mixer) { mixer.stopAllAction(); } if (model) { scene.remove(model); model.traverse((child) => { if (child.isMesh) { child.geometry.dispose(); if (child.material.isMaterial) { child.material.dispose(); } } }); } }); return renderer; }; 34:[{"id":"732d7369dc81c3394d41534a1bb3ece82ee7db2414685d6fc887e6c3d6f4409dd6b1ca692979b6c7ba4d8df1d47459b3e9c9eabde939d8ced7c45fce818b104c","href":"https://static.observableusercontent.com/files/732d7369dc81c3394d41534a1bb3ece82ee7db2414685d6fc887e6c3d6f4409dd6b1ca692979b6c7ba4d8df1d47459b3e9c9eabde939d8ced7c45fce818b104c","name":"ML-HDBK-141_Frankford_Arsenal_Prism_7.png","type":"image/png","lastModified":1742348338334.348,"size":84871},{"id":"b557a25d0aabe3df3210409f65d9cd1395e4d0994e9d1b179968685286f7c00a043265cbb5d0c502bfc6c4956b56005264ec15137642f428ff4dbc82577f4c1d","href":"https://static.observableusercontent.com/files/b557a25d0aabe3df3210409f65d9cd1395e4d0994e9d1b179968685286f7c00a043265cbb5d0c502bfc6c4956b56005264ec15137642f428ff4dbc82577f4c1d","name":"Keyshot9_Frankford_Arsenal_Prism_No.7_looped_animation.mp4","type":"video/mp4","lastModified":1742397535122.192,"size":7375147},{"id":"e91488a5b185de3f0adb3088587c0c5bde25fa309317481a48bf60e3f7573733958ee13afa4b1980e2a7c8e14470a1348aa468ff31bd825ef79dfec34b67fd27","href":"https://static.observableusercontent.com/files/e91488a5b185de3f0adb3088587c0c5bde25fa309317481a48bf60e3f7573733958ee13afa4b1980e2a7c8e14470a1348aa468ff31bd825ef79dfec34b67fd27","name":"Frankford_Arsenal_Prism_No.7.svg","type":"image/svg+xml","lastModified":1742397629943.04,"size":36602},{"id":"5dbb3606473cf8a5716d12e189cefc3dde8f7870620dc2bf3d4e3557dfae9db2a321bfef635e73b1a41f99070464bdafed6b145c80e2d08c1b3653267981fe55","href":"https://static.observableusercontent.com/files/5dbb3606473cf8a5716d12e189cefc3dde8f7870620dc2bf3d4e3557dfae9db2a321bfef635e73b1a41f99070464bdafed6b145c80e2d08c1b3653267981fe55","name":"Frankford_Arsenal_Prism_No.7_animated.glb","type":"model/gltf-binary","lastModified":1742397754197.652,"size":7464},{"id":"3a43058f780db1b84ae716c1dbf1f2b38d07271720ca02f1ef9d14ed7e4fcf177115a5103bb4b6cade84584190363a0cf8bcb24ef6305040801bdfc8bb211124","href":"https://static.observableusercontent.com/files/3a43058f780db1b84ae716c1dbf1f2b38d07271720ca02f1ef9d14ed7e4fcf177115a5103bb4b6cade84584190363a0cf8bcb24ef6305040801bdfc8bb211124","name":"PBR_Octopus_vs_Frankford_Arsenal_Prism_No.7.png","type":"image/png","lastModified":1742397836349.331,"size":828486}] 2f:{"title":"Frankford Arsenal Prism No. 7","cells":[{"id":0,"value":"# Frankford Arsenal Prism No. 7","pinned":false,"hidden":false,"mode":"md"},{"id":2875,"value":"The **Frankford Arsenal Prism No. 7** is a specialized optical device designed to maintain the correct orientation of an image, ensuring it is neither inverted nor reverted. Featuring a roof-like structure, this prism operates on principles similar to those of the **Amici prism**, using a series of reflections to correct the image while preserving its upright and non-mirrored state.\n","pinned":false,"hidden":false,"mode":"md"},{"id":4861,"value":"### 3D Model and PBR\n\nThe following physically-based rendering (PBR) image was created using KeyShot 9, incorporating refraction and caustics. The 3D model featured in this rendering, “Cartoon Octopus Takes a Tea Bath,” was designed by AzTiZ.\n","pinned":false,"hidden":false,"mode":"md"},{"id":4671,"value":"viewof Play_animation = Inputs.toggle({label: \"Play animation\", value: true})","pinned":false,"hidden":false,"mode":"ojs"},{"id":3562,"value":"viewof Display_text = Inputs.toggle({label: \"Display description\", value: true})","pinned":false,"hidden":false,"mode":"ojs"},{"id":2136,"value":"$31","pinned":false,"hidden":false,"mode":"ojs"},{"id":4849,"value":"
\n

Keyshot Animation

\n A short video created with Keyshot 9, showcasing the accurately simulated refractive properties of the Frankford Arsenal Prism No. 7.\n

\n\n","pinned":false,"hidden":false,"mode":"html"},{"id":4832,"value":"
\n\n## Reference","pinned":false,"hidden":false,"mode":"md"},{"id":4793,"value":"ML_HDBK_141 = {\n const container = html`\n

Defense Supply Agency, “Optical Design: Military Standardization Handbook,”\n MIL-HDBK-141, USA (1962).\n
↪ The Frankford Arsenal Prism No. 7 is detailed on page 13-52 within Chapter 13, “Mirror and Prism Systems.”\n

👆🏻 Click to resize the illustration\n

`;\n\n container.onclick = () => {\n const currentWidth = container.style.width;\n container.style.width = currentWidth === \"450px\" ? \"850px\" : \"450px\";\n };\n\n return container; \n}\n","pinned":false,"hidden":false,"mode":"ojs"},{"id":888,"value":"
\n\n---","pinned":false,"hidden":false,"mode":"md"},{"id":4772,"value":"viewof display_inspect = Inputs.toggle({label: \"⇣ Check to inspect variables and functions\", values: [\"true\", \"none\"], value: \"false\" })","pinned":false,"hidden":false,"mode":"ojs"},{"id":4778,"value":"\n
\n${display_inspect == \"none\"? html`

⇣ Appendix is hidden ...

` : md`## Appendix`}","pinned":false,"hidden":false,"mode":"html"},{"id":106,"value":"height = 760","pinned":false,"hidden":false,"mode":"ojs"},{"id":908,"value":"BKG_color = \"#343742\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":3859,"value":"BKG_Image = await (FileAttachment(\"PBR_Octopus_vs_Frankford_Arsenal_Prism_No.7.png\").url())","pinned":false,"hidden":false,"mode":"ojs"},{"id":720,"value":"GLB_3D_Model = await (FileAttachment(\"Frankford_Arsenal_Prism_No.7_animated.glb\").url())","pinned":false,"hidden":false,"mode":"ojs"},{"id":3630,"value":"illustration_svg = FileAttachment(\"Frankford_Arsenal_Prism_No.7.svg\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":4846,"value":"keyshot9_frankford_arsenal_prism_no7 = FileAttachment(\"Keyshot9_Frankford_Arsenal_Prism_No.7_looped_animation.mp4\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":2229,"value":"$${display_inspect == \"none\"? `` : md`### Camera`}","pinned":false,"hidden":false,"mode":"md"},{"id":2176,"value":"// Camera information from MeshLab\ncameraXML = `\n\n\n \n \n\n\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":2142,"value":"// Retrieve the focal length from cameraXML\ncameraFocalLength = parseFloat(cameraXML.match(/FocalMm=\"([^\"]+)\"/)?.[1]);","pinned":false,"hidden":false,"mode":"ojs"},{"id":2058,"value":"// Retrieve the camera position from cameraXML\ncameraPosition = cameraXML.match(/TranslationVector=\"([^\"]+)\"/)[1].split(' ').slice(0, 3).map(value => parseFloat(value) * -1);","pinned":false,"hidden":false,"mode":"ojs"},{"id":2116,"value":"// Retrieve the camera orientation from cameraXML\ncameraOrientation = cameraXML.match(/RotationMatrix=\"([^\"]+)\"/)[1].split(' ').slice(0, 12).map(parseFloat);","pinned":false,"hidden":false,"mode":"ojs"},{"id":98,"value":"$32","pinned":false,"hidden":false,"mode":"ojs"},{"id":2227,"value":"$${display_inspect == \"none\"? `` : md`### Three.js`}","pinned":false,"hidden":false,"mode":"md"},{"id":3,"value":"THREE = {\n // import threejs\n const three = await require(\"three@0.139.2\");\n window.THREE = three;\n\n // import plugins\n await require(\"three@0.139.2/examples/js/controls/OrbitControls.js\").catch((e) => { console.warn(e) });\n await require(\"three@0.139.2/examples/js/loaders/GLTFLoader\").catch((e) => { console.warn(e) });\n\n console.log(three);\n return three;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":217,"value":"loadModel = () => {\n const loader = new THREE.GLTFLoader();\n\n return new Promise((resolve, reject) => {\n loader.load(\n GLB_3D_Model, \n (model) => { \n resolve(model);\n },\n undefined, // onProgress\n (error) => {\n reject(error);\n }\n );\n }).catch((e) => { \n console.warn(e); \n return null;\n });\n};\n","pinned":false,"hidden":false,"mode":"ojs"},{"id":127,"value":"$33","pinned":false,"hidden":false,"mode":"ojs"},{"id":34,"value":"// create scene\nscene = {\n const scene = new THREE.Scene();\n\n // Point Light (Main Light)\n const pointLight = new THREE.PointLight(0x555566, 50, 100);\n pointLight.position.set(0, -50, -70);\n pointLight.castShadow = true;\n scene.add(pointLight);\n \n // Ambient Light\n const ambientLight = new THREE.AmbientLight(0xffffff, 0.4); //\n scene.add(ambientLight);\n \n // Hemisphere Light\n const hemiLight = new THREE.HemisphereLight(0xffffbb, 0x080820, 1.5);\n scene.add(hemiLight);\n\n\n return scene;\n}\n","pinned":false,"hidden":false,"mode":"ojs"},{"id":624,"value":"continous_animation = {\n while (true) {\n renderer.render(scene, camera);\n yield null;\n } \n}","pinned":false,"hidden":false,"mode":"ojs"}],"files":"$W34","stdlib":"1","titling":"auto"}